Using the Add Element

Add an element on the page

The Add Element panel is where you find UI blocks to add to your web application — from simple text to complex forms.

To add an element, drag it from the panel onto the canvas:

Open the panel from the Add Element icon (+) in the Interface tab left sidebar.

The panel is organized into sections:

Elements

This is where you find native WeWeb elements, grouped in folders (for example layout, inputs, data display):

TIP

For a full list of available elements, see the elements documentation.

Your project

Project-specific building blocks live under Your project:

Manage Popups

Open Manage Popups to create and manage popups. From here, you can:

• Create a new popup with the New button
• See popup models in your project and open or edit them
• View currently opened popup instances and close them

Popups are opened via the Open popup workflow action, not by placing them in the page layout.

Learn more about working with popups →

Reusable Sections

Open Reusable Sections to work with multi-page sections (the panel title inside is Reusable Sections):

• Linked sections — sections shared across multiple pages
• Pages — each page and its sections (linked or not)

Drag a section onto a page. When you drop it, choose Create an instance or Create a copy:

THE POWER OF MULTI PAGE SECTIONS

When you create an instance of a section, it is also called a linked section or multi-page section.

Changes on one instance are reflected on all other instances of that section throughout the app.

Learn more about multi-page sections →

Coded components

Open Coded components to see custom coded components in your project:

You can have AI generate custom coded components or code them yourself.

From each component's menu you can use Edit with AI, open the code editor, or Fork active version.

TIP

Native WeWeb elements in the Elements section are built as coded components by the WeWeb team. Many are public on GitHub.

UI Kits

If your project has linked libraries from the marketplace or workspace, they appear under UI Kits. Drag components from a kit onto the page like any other element.

TIP

Learn more about working with libraries in WeWeb.