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 panel to place UI elements on your canvas.

Understanding the add panel

The Add panel 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 panel is organized into several categories:

• Basics — Native WeWeb elements like text, containers, buttons, and forms
• Assets — Components and templates from libraries in your project
• Custom coded components — Custom coded components that have been added to your workspace
• Multi-page sections — Reusable sections that can be shared across pages
• Integration UI kits — Elements specific to external services you have connected in the Integrations tab

How to add elements

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

1. Select the element
   Browse through the Add panel categories to find the element you want to add. The Basics category is a good starting point for most common UI elements.

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 →