Adding elements to your page

When you first open the WeWeb editor, one of the first things you'll want to do is add elements to your page.

This is where the Interface tab comes in. The Interface tab is where you control everything related to the UI of your application, such as the elements on the page and their content, the styling of the elements, how a user can interact with the elements, and also the temporary saving of pieces of data.

This guide will walk you through the process of using the Add Element to place UI elements on your canvas.

Understanding the add panel

The Add Element is the first item in the left side panel:

This panel contains all the UI blocks you can add to your web application, from simple text elements to complex forms.

What you can add

The Add Element is organized into several categories:

• All — Browse native WeWeb elements (text, containers, buttons, forms, and more)
• Assets — Components and templates from libraries in your project
• Your project — Reusable Sections and Coded components you have added to the workspace

How to add elements

Adding elements to your page is simple. Just follow these steps:

1. Select the element
   Browse through the Add Element panel to find the element you want. Open All for native elements like text, buttons, and forms.

2. Drag and drop
   Click and hold on the element you want to add, then drag it onto your canvas:

Common elements for beginners

If you're just getting started, here are some basic elements you might want to try first:

• Text — For adding standard text content
• Heading — For adding titles and section headers
• Container — For grouping related elements together
• Button — For adding clickable actions
• Image — For adding pictures to your page
• Input — For creating forms and collecting user data

Learn about all available elements →

Tips for success

• Use containers

  Organize your elements logically
• Name your elements

  In the Settings panel to keep your project organized
• Explore the element documentation

  Understand each element’s capabilities

CONTINUE LEARNING

Now that you've learned how to add elements to your page, the next step is to style them:

Styling your elements →