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. ask WeWeb Copilot to help you build your app
5. manage PWA settings, project assets, and custom code
6. navigate between changes, editing and preview modes, and breakpoints
7. see who is currently editing the project
8. 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: commonly used elements & layouts with minimal style presets.
• Assets: components & templates from the libraries available in the 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 on the canvas:

Libraries

In the Libraries menu, you will find:

1. the UI kit attached to your current project
2. external UI kits that you have added to your project
3. external UI kits that are available to you but that you haven't added to your project
4. UI kits that are present in your workspace but that haven't been shared with the workspace

TIP

To use an external library in a project, it needs to have been 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 plugings:

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 uneeded 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.

Copilot

This is where you can ask WeWeb Copilot how to build something or use a text prompt to create a section or element that you will then be able to drag-and-drop on the page.

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,
• manage project assets like images and fonts,
• upload custom app files (e.g. sitemap, manifest, service worker, etc.)
• add custom code at app level,
• add redirections, and a base tag,
• add custom headers,
• subscribe to a different plan,
• 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

Collection 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 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.