Component editor

The component editor is a specialized development environment within WeWeb that allows you to create and modify coded components using HTML, CSS, and JavaScript.

Accessing the component editor

To access the component editor:

1. Click on the Development icon (terminal icon) in the Interface section sidebar
2. Under the Advanced section, click Component editor

The component editor opens in a dedicated panel where you can write and test your custom component code.

Component editor interface

The component editor provides:

• Code editor — Write HTML, CSS, and JavaScript for your component
• Property configuration — Define configurable properties for your component
• Preview panel — Test your component in real-time
• Settings panel — Configure component metadata and behavior

Creating a custom component

When creating a custom component, you can define:

Component properties

Properties allow users to customize your component without editing code. You can define:

• Text inputs
• Number inputs
• Boolean toggles
• Select dropdowns
• Color pickers
• And more

Component styles

Write CSS to style your component and make it responsive across different screen sizes.

Component logic

Add JavaScript to create interactive behavior and handle user actions.

Component structure

Custom components in WeWeb follow a specific structure:

<!-- Template: Your HTML structure -->
<div class="my-component">
  <h1>{{ title }}</h1>
</div>

/* Styles: Your CSS styling */
.my-component {
  padding: 20px;
}

// Logic: Your JavaScript behavior
return {
  props: {
    title: { type: String, default: 'Hello' }
  }
}

Testing your component

Use the preview panel to:

• Test different property values
• Verify responsive behavior
• Debug JavaScript errors
• Check component performance

Publishing your component

Once your component is ready:

1. Save your changes in the component editor
2. The component becomes available in your project
3. You can add it to pages from the Development menu
4. Optionally, share it with other projects through libraries

TIP

Start with simple components and gradually add complexity. Well-structured components are easier to maintain and debug.

Best practices

When creating coded components:

• Use clear naming — Name properties and classes descriptively
• Handle edge cases — Account for empty or invalid property values
• Optimize performance — Avoid unnecessary DOM manipulations
• Document your code — Add comments explaining complex logic
• Test thoroughly — Verify behavior across different scenarios

WARNING

Changes made to coded components affect all instances of that component in your project. Always test changes before publishing your application.

Common use cases

Custom components are ideal for:

• Third-party integrations — Embed external widgets and tools
• Specialized visualizations — Create custom charts and graphs
• Complex interactions — Build advanced UI patterns
• Custom forms — Create specialized input fields
• Animations — Add custom animations and transitions

Development resources

For detailed technical documentation:

• Click Documentation in the Development menu's Information section
• Visit the public repositories for component examples

CONTINUE LEARNING

Learn how to manage different versions of your coded components:

Learn about component versions →