Coded components overview

The Development menu in WeWeb provides access to manage all coded components in your project. These are custom-built components created with code that extend WeWeb's functionality beyond the no-code elements.

Accessing coded components

To access coded components:

1. Click on the Development icon (terminal icon) in the Interface section sidebar
2. You'll see three categories under Coded components:
   • Elements
   • Sections
   • Plugins

Coded component categories

Elements

Custom coded elements are reusable components built with HTML, CSS, and JavaScript that can be added to your pages just like native WeWeb elements.

These elements:

• Can be dragged onto the canvas from the Development menu
• Have configurable properties
• Can be styled and positioned like any other element
• Are maintained and versioned separately from your project

TIP

Coded elements are useful when you need functionality that isn't available in WeWeb's native element library, such as custom charts, specialized inputs, or third-party integrations.

Sections

Custom coded sections are larger, pre-built layout components that typically contain multiple elements and styling.

These sections:

• Provide complete, styled layouts (like hero sections, footers, or navigation bars)
• Can be customized through properties
• Are useful for maintaining consistent designs across projects
• Can include embedded logic and interactions

TIP

Sections are ideal for reusable layout patterns that you want to maintain across multiple projects or share with your team.

Plugins

Plugins extend WeWeb's core functionality by adding new capabilities to the editor or your published applications.

Plugins can:

• Add new data sources and API integrations
• Provide authentication methods
• Add analytics and tracking capabilities
• Extend the editor with custom features

TIP

Plugins are typically installed from external sources and maintained by their creators. Check the plugin documentation for specific configuration and usage instructions.

Managing coded components

For each coded component in your project, you can:

• View installed versions — See which version of each component is currently in use
• Update components — Upgrade to newer versions when available
• Configure settings — Adjust component-specific settings and properties
• Remove components — Remove unused components from your project

WARNING

When updating coded components, test your application thoroughly as updates may introduce breaking changes or new behaviors.

Component dependencies

Coded components may have dependencies on:

• Other coded components
• Specific integrations
• External libraries

WeWeb automatically manages most dependencies, but you may need to add required integrations manually.

Learn more about library dependencies →

Development resources

For developers creating custom coded components:

• Documentation — Access comprehensive developer documentation
• Public repositories — View example components and templates on GitHub

These resources can be accessed directly from the Development menu under the Information section.

CONTINUE LEARNING

Learn how to use the component editor to create and modify coded components:

Learn about the component editor →