Return

Generating a custom coded component

Create a custom coded component and use it like any other element in your interface.

Steps at a glance

1. Open the component development area.
2. Generate (or create) a coded component.
3. Add properties so the component is configurable in the editor.
4. Use the component in the interface and test it in preview.

1) Create the component

1. Open the coded components area in the editor.
2. Create a new component.
3. Generate the initial code (or start from a template).

2) Add configurable properties

Make sure the component is easy to reuse:

• Add properties for text, colors, and sizes.
• Provide sensible defaults.
• Handle empty states gracefully.

3) Use it in the interface

1. Add the component to a page.
2. Bind properties to variables when needed.
3. Test interactions in preview mode.

Common pitfalls

The component works in the editor but not in preview

• Check for missing configuration values.
• Confirm you are not relying on editor-only behavior.

Related guides

Importing a design from Figma

Bring a Figma design into WeWeb so you can build faster and stay consistent.

Beginner7 min

Understanding URL params and paths

Use the URL to load the right record, build clean links, and handle dynamic pages.

Beginner6 min