Academy

Want to learn how to use the WeWeb Editor effectively? Check out our Build a proof of concept course which provides hands-on experience with the editor and its features.

Intro to the editor

The WeWeb Editor is where you build your projects.

It is made up of 4 sections:

1. The top navigation menu
2. The canvas in the middle (visible in the Interface tab)
3. The left panel
4. The right panel

Topbar

The topbar is where you can:

1. Go back to your dashboard or access project settings
2. Switch between the three main tabs: Interface, Data & API, and Settings
3. Navigate between changes (undo/redo)
4. See who is currently editing the project
5. Switch between AI and Edit mode (right panel toggle)
6. Publish the app

Project settings

By clicking the menu icon in the top-left corner, you can:

• View available shortcuts
• Navigate to project settings
• Navigate back to your dashboard
• Switch the editor to light or dark mode

Main Editor Tabs

The WeWeb editor has three main tabs that you can switch between in the top navigation:

Interface Tab

The Interface tab is where you build and design your user interface. This tab provides access to the canvas (the visual workspace) along with its header for page-level controls.

In the Interface tab, you can access:

• Canvas: The visual workspace where you build and preview your interface
• Canvas header: Quick access to page selection, language switching, URL parameters, device views, and preview options
• Left panel tools: Access various panels from the icon sidebar including:
  • Add Element: Drag-and-drop native elements, components, and templates onto the canvas
  • Pages: Manage pages, routes, and page settings
  • Assets: Access UI libraries, icons, fonts, images, and files
  • Workflows: Create interface workflows that respond to user actions
  • Variables: Create and manage variables for dynamic content
  • Formulas: Build custom formulas for data transformation and calculations
  • Debug: View logs and inspect variable values in real-time

CONTINUE LEARNING

The Interface tab contains all the tools you need to build your user interface:

Learn more about the add panel →

Data & API Tab

The Data & API tab is where you manage your backend and data operations. Here you can access:

• Tables: Create and manage database tables with built-in or external data sources
• Workflows: Build backend workflows (APIs) that run server-side
• Authentication: Configure SSO Providers, manage users, roles, and file storage
• Settings: Configure backend settings and access controls

Learn more about working with Data & API features.

Settings Tab

The Settings tab is where you configure project-level settings and integrations:

• Integrations: Add and configure external services (e.g., Resend, SendGrid, Airtable, Segment, Slack, and more)
• Environment Variables: Manage API keys and configuration values for different environments (Editor and Production)

TIP

Integrations are configured in the Settings tab, not through the old plugin system. Most data source integrations are now managed through the Data & API tab using tables with external data sources.

Canvas (Interface tab)

The canvas is the central workspace in the Interface tab where you build and visualize your application's user interface in real-time.

You can select elements, move them around, and directly edit content:

Canvas header

When working in the Interface tab, the canvas has a header bar that provides quick access to important page-level controls:

The canvas header includes:

• Collapse sidebar — Button to collapse/expand the Left Panel
• Page selection/settings — Change pages or access settings of a specific page
• Language selector — Switch between languages to preview translated content (languages must first be added to your project and enabled on pages)
• URL parameters/paths — View and test URL parameters/paths for the current page. Learn more about the URL Parameters panel
• Refresh — Reload the page
• User display — See which user account you're previewing as and dynamically switch between users (useful when testing role-based access)
• Page Settings — Access the settings for the current page
• Device breakpoint toggles — Quick switch between desktop, tablet, and mobile views
• Preview button — Preview your application

TIP

Language switching is done through the canvas header, not the topbar. To enable multi-language support, you need to first add languages to your project through the Pages panel in the left sidebar, then enable them on specific pages.

Learn more about managing page languages.

The box model

Crafting layouts in WeWeb revolves around the box model.

Think of every element on your page as a box with four layers:

• The content (like text or images)
• Padding (space inside the box)
• Border (an outline around the padding)
• Margin (space outside the box)

Learn more about the box model →

Responsive design

To help build responsive designs, you can edit and preview the canvas views – desktop, tablet, mobile – and publish when you're ready:

Left panel

The left panel in the WeWeb editor serves as your navigation and organization hub. It consists of two main parts:

Icon sidebar

The icon sidebar provides quick access to all the tools and features available in the current tab. The available icons change depending on which tab you're in (Interface, Data & API, or Settings).

Interface tab icons

When in the Interface tab, the icon sidebar includes:

• Add Element (+ icon) — Drag-and-drop native elements, components, and templates onto the canvas
• Pages (document icon) — Manage pages, routes, and page settings
• Assets (shapes icon) — Access UI libraries, icons, fonts, images, and files
• Workflows (lightning bolt icon) — Create interface workflows that respond to user actions
• Variables (variable icon) — Create and manage variables for dynamic content
• Formulas (formula icon) — Build custom formulas for data transformation
• Debug (bug icon) — View logs and inspect variable values in real-time

TIP

Pages are managed through the Pages icon in the left panel icon sidebar, not from the topbar. You can also switch between pages using the page selector in the canvas header.

Navigator panel

When working in the editor, the navigator panel displays alongside the canvas. It has two tabs that help you organize and manage your page structure and popups:

Layout tab

In the Layout tab, you will see the element tree of the page you are currently on.

Layout tree icons

To help you quickly understand what's configured on each element, the layout tree shows small icons on the right side.

• Lightning Bolt Icon — Indicates the element has one or more workflows attached.

  

• Plug Icon — Indicates the element has data bound to one or more properties (for example, repeat items, text, or a style value).

  

• Eye Icon — Indicates conditional rendering or display logic is set on the element (for example, show/hide based on a condition).

  

• Square Icon — Indicates an animation is configured on the element.

  

Popups tab

In the Popups tab, you can create and manage popups for your application. Popups are UI elements that appear above the main content to display information, capture user input, or provide notifications.

Key features of the Popups tab include:

• See which popup instances are currently open during preview or editing
• Create new popups from various templates (modal, toast, alert, sheet)
• View and manage all popups in your project

TIP

Popups in WeWeb are treated as dedicated components with their own management system, making them highly reusable across your application.

Learn more about working with popups →

Right panel

The panel on the right has two modes that you can toggle between:

1. Edit mode - For styling and configuring elements
2. AI mode - For accessing WeWeb AI

Right panel (Edit)

The edit mode of the right panel gives you precise control over the element that is selected on the page.

It allows you to:

• Style the element,
• Bind data to the element,
• Change settings that are specific to that type of element,
• Add no-code workflows on the element.

Style

The styling panel is where you can change the styling properties of elements.

See a full breakdown of all available styling properties

TIP

Whenever you change the styling of an element from the style panel, you are actually changing the CSS of the element

Bind data

You can bind data to almost every property in WeWeb.

This means you can bind something like a styling property, or even the repeating of items.

In the example below, we bound a list of products to a Collection List, resulting in the product card being created for every item in the list:

TIP

When you bind the repeating of elements, you will only see a single element in the layout tree. However, the element will actually be repeated for each item in your bound list.

Learn more about binding data in WeWeb.

Settings

In the settings tab of the right panel, you can:

1. Link to another page or URL on click of the selected element
2. Name the selected element
3. Add an id, class, or attribute to the HTML of the selected element
4. Control whether the scroll position of the selected element is watched
5. Set the conditional rendering of the selected element. Learn more about conditional rendering

Workflows

Workflows are core to the logic and functionality of your web applications.

In the workflows tab of the right panel, you can add new workflows to an element and access all existing workflows of the element:

TIP

Workflows allow you to execute actions when a certain trigger happens on the element, like changing the value of a variable on click.

Learn more about workflows

Right panel (AI)

The AI mode of the right panel provides direct access to WeWeb AI, which is an integral feature of the editor. It serves as an intelligent assistant that helps you create every aspect of your web application through natural conversation.

With WeWeb AI, you can:

• Generate responsive layouts and designs
• Build workflows
• Generate tables and APIs for your backend
• Create formulas
• Generate custom components

To begin learning about how to leverage WeWeb AI, check out the intro to WeWeb AI documentation.