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,
3. the left panel, and
4. the right panel.

Topbar

The topbar is where you can:

1. go back to your dashboard or access project settings
2. manage pages and page languages to your project
3. add elements, libraries, plugins, and users to your web app
4. manage your connected Supabase backend
5. access PWA settings, project assets, and custom code
6. navigate between changes (undo/redo/refresh)
7. see who is currently editing the project
8. view different breakpoints (screen sizes)
9. switch between AI and Edit mode
10. preview the application
11. publish the app

Project settings

Here you can:

• view available shortcuts
• navigate to project settings
• navigate back to your dashboard
• switch the Editor to light or dark mode

Pages

This is where you can:

• see the list of pages in your app,
• create new pages, and
• navigate between pages in your app.

TIP

When creating a new page, you can save time by copying it from another page and choosing which sections are linked:

The changes you make in linked sections will be reflected on all the pages that use that linked section.

Learn more about leveraging multi-page sections to improve your WeWeb app's performances.

Languages

Here you can toggle between languages to see how text content will vary depending on your user's browser language.

To enable this feature, you will first need to:

• add a language to the project, and
• enable it on all relevant pages (you can choose to enable a language on some pages only)

TIP

Notice that when you have more than one language available on a page:

1. for one text element in the HTML tree,
2. you have several text binding options in the style tab, and
3. the text displayed on the page matches the text defined for the language selected in the topbar

Add panel

In the Add menu, you will find 4 categories of items:

• Basics: the native elements available in WeWeb.
• Assets: components & templates from the libraries available in your project.
• Custom Coded Components: the custom coded components of your project.
• Multi-page sections: list of sections being used throughout the project.
• Plugin UI kits: UI blocks that are specific to plugins used in the project (e.g. charts, login forms).

You can drag-and-drop elements from the add menu onto the canvas:

Assets

In the Assets menu, you will find access to:

1. the library of your project, such as your UI kits and saved colors. Learn more about libraries.
2. icons of your project. Learn more about icons.
3. fonts of your project. Learn more about fonts.
4. uploaded images of your project. Learn more about images.
5. uploaded files of your project. Learn more about files.
6. a link to the WeWeb marketplace, where you can download public libraries. Learn more about the marketplace.

TIP

To use an external library in a project, it needs to have been shared in your workspace, and Added in the project.

Learn more about using UI libraries in WeWeb.

Plugins

The Plugins menu is where you will find:

• the plugins that have already been added to the project, and
• all available WeWeb plugins.

There are currently 3 categories of plugins:

1. Data sources, like Xano, Supabase, REST API, and more
2. Authentication systems, like Auth0, OpenID, JSON Web Tokens, and more
3. Extensions, like Stripe, Charts, Mapbox, OpenAI, and more

To add a plugin, simply navigate to the plugin category of your choice, select a plugin and click on the Add button:

Learn more about using plugins in WeWeb.

TIP

We don't add popular plugins like charts and dates to every project by default because, under-the-hood, each plugin loads a JS library.

As in traditional web development, we refrain from adding unneeded libraries to your no-code apps.

Auth

In the Auth menu, there are three sections:

1. Users where you can import, export, or view users of your app
2. Roles where you can add user roles and user groups to handle user permissions
3. File storage where you can see the files uploaded by app users

Learn more about working with authentication plugins in WeWeb.

Back-end

The Back-end panel is where you can manage key parts of your integrated backend directly from the WeWeb editor.

Currently, only Supabase is supported.

Learn more about the Back-end panel.

More

In the more menu, you will find features that apply at app level:

This is where you can:

• define the manifest for the PWA version of the app,
• trigger workflows at app level,
• add languages to your project,
• edit the custom coded components of your project,
• add custom code at app level,
• add redirections, and a base tag,
• add custom headers,
• access app settings,
• import designs and styles from Figma. Learn more,
• access WeWeb developer tools.

Learn more about WeWeb app settings.

Canvas

The Canvas is the great big part in the middle. It's where you can interact with the page in real-time.

You can select elements, move them around, and edit content right on the page:

The layout of everything you build in the Canvas follows the box model with sections and elements that are responsive by default.

It ensures that we're generating clean, production-ready code.

You can edit and preview this on three different views – desktop, tablet, mobile – and publish when you're ready:

Left panel

In the left panel of the WeWeb editor, you will find:

1. the HTML tree of the page you're on in the Layout tab
2. the data collections and global variables in the Data tab
3. the global workflows and formulas in the Actions tab, and
4. the debugger panel with app logs and the current state of variables

Layout panel

In the Layout panel, you will see the HTML tree of the page you are currently on.

In the example below, you can see we are on the Jobs page and selected the heading element in our HTML tree.

As a result, the element is selected on the Canvas and we can edit its properties in the right panel:

Data panel

In the Data panel, you can:

• see all the collections available in the project or used on the current page,
• create new collections and variables, and
• update or delete existing ones.

TIP

Collections and variables are essential tools to build dynamic web applications in WeWeb.

Learn more about working with collections and variables in WeWeb.

Actions panel

In the Actions panel, you can create, edit, and delete global workflows and formulas that you can then use throughout your project.

TIP

Workflows and formulas are essential tools to build dynamic web applications in WeWeb.

Learn more about working with workflows and formulas in WeWeb.

Debugger panel

In the debugger panel, you will find:

• the logs of what is happening in your application, and
• the current values of global variables

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.