Intro to pages

A page is the distinct screen that appears when visitors go to a specific web address (URL) on your web app. Each page shows different information and features, like how a "Contact" page displays contact details while an "About" page shows company information.

Create a page

To create a new page in WeWeb:

1. Click on the Pages icon in the Interface tab on the left side of the editor
2. Click on the Add Page button at the top of the Pages panel
3. Enter a name for your page
4. Choose whether to copy content from an existing page or start with an empty page
5. Configure the page's default URL path
6. If copying from another page, decide which sections should be linked across pages
7. Click Create to create the page

TIP

Linked sections are referred to as Reusable Sections in WeWeb. They are useful to improve the user experience and page loading time of your web application.

Learn more about using multi-page sections in WeWeb.

Page name

The name of your page. This is what you'll see in the Pages panel when you open the pages list in the Interface tab.

To update a page name:

1. Open the Pages panel in the Interface tab
2. Click the cog next to the page you want to rename
3. Update the Page name field
4. The name will be automatically saved

Page folder

Organize your pages into folders to keep your project structured. You can assign pages to folders and create new folders as needed.

To add a page to a folder:

1. Open the Pages panel in the Interface tab
2. Click the cog next to the page you want to organize
3. Select or type a folder name in the Folder field
4. The page will be moved to that folder in the pages list

Draft mode

Pages with draft mode Enable won't be included when you publish your WeWeb app. This is useful when you're working on a page that isn't ready for production yet.

Pages in draft mode are indicated by a warning color in the Pages panel.

To enable draft mode for a page:

1. Open the Pages panel in the Interface tab
2. Click the cog next to the page you want to set as draft
3. Toggle Draft mode to Enable

WARNING

Changing a page's Draft mode setting only takes effect after you (re)publish the app.

For example, if the app was published when Page A had draft mode set to Disable, changing the draft mode of Page A to Enable in the WeWeb Editor won't remove the page from production until you publish the app again.

Note: You cannot enable draft mode on your homepage.

Pre-rendering

With Pre-rendering set to Enable, WeWeb serves a pre-built version of the page, so it loads faster and search engines read it more easily. It is on by default for new public pages.

Pre-rendering is only available on public pages with static URLs. On a dynamic page (a page with a variable in its path) or a private page, the setting is locked.

Description

A short description of what the page does. It helps you and your team find your way in a large project, and it gives WeWeb AI context about the page. Click Generate to have it written for you.

URL paths

Configure the URL path for your page to control what appears in the browser's address bar when users visit the page.

To configure URL paths:

1. Open the Pages panel in the Interface tab
2. Click the cog next to the page you want to configure
3. Click on Url paths in the menu
4. Set the default path for your page
5. Use + add variable to insert path variables into the path
6. Review the URL preview below the path field and check the Parameters section to confirm each variable and its default value

Adding path variables

You can add variables to your path to create dynamic pages. Path variables are defined using the syntax {{variableName|defaultValue}}.

For example, a path like products/{{product_id|123}} creates a dynamic product detail page where product_id can change based on which product the user is viewing.

You can access path variables anywhere in your page through the data explorer under From path in current page. Open the binding menu, go to the Page tab (usually the first tab, with the icon), and expand From path in current page to bind a path variable in a formula or element property.

TIP

Path variables are essential for creating detail pages for your table views. For example, if you have a table view of products, you can create a page with the path products/{{product_id|123}} and use the product_id variable to fetch and display the specific product details.

Learn more about dynamic collection pages and configuring URL parameters.

Dynamic pages

A dynamic page is a single page template that shows a different record depending on its URL. It is how you build detail pages, like a product page, a blog post or a user profile.

The usual setup uses a path variable and a table view:

1. Give the page a path with a variable, for example products/{{slug|ceramic-coffee-mug}}
2. In the Data & API tab, create a view of your table with a parameter (for example slug), and a filter that only returns the row where slug is equal to that parameter
3. Back on the page, add a page workflow with the On page load trigger and the Table View: Fetch action, and bind the view parameter to your path variable: in the Page tab of the binding panel (usually the first tab, with the icon), open From path in current page and select slug
4. Bind the elements of the page (title, image, price) to the first row returned by the view
5. On the page that lists your records, link each item to the dynamic page and pass its slug in the path

Because the page reads the record from its URL, it shows the right data even when someone opens the link directly, refreshes the page, or shares it.

CHOOSING AN ID OR A SLUG

You can use the record ID or a slug (a readable text identifier, like oak-cutting-board) as the path variable. A slug gives cleaner URLs, but make it unique in your table so each URL points to one record.

Learn how to build a dynamic page step by step →

Page workflows

Page workflows allow you to run actions when specific events occur on a page, such as when the page loads, when a user scrolls, or when a key is pressed.

Workflows are now managed in a dedicated Workflows tab in the Interface section, not in the page settings.

To create or edit page workflows:

1. In the left panel of the Interface tab, open the Workflows tab
2. In the Workflows panel, select the Page Triggers tab
3. Choose which page you want to add workflows to (the page you're on is selected by default)
4. Click New to open the workflow creation popup
5. Pick a trigger (for example, on page load, on page scroll, etc.) or start from one of the templates
6. Add actions to your workflow

Page workflow triggers include:

• On app load
• On page load
• On page unload
• On page scroll
• On page resize
• On keydown
• On keyup

Common use cases for page workflows:

• Fetching a table view when the page loads, like on a dynamic page
• Reacting to a user scrolling up or down the page
• Checking for a purchase completion after a page loads
• Manipulating table view data before displaying it on the page
• Triggering analytics events when users interact with the page

TIP

For more information about creating and managing workflows, see the Workflows documentation.

Custom code

Add custom code to specific pages for tracking scripts, custom styling, or specialized functionality that only applies to that page.

To add custom code to a page:

1. Open the Pages panel in the Interface tab
2. Click the cog next to the page where you want to add custom code
3. Click on Custom scripts in the menu
4. Choose where to inject your code:
   • Page header — Code is loaded before the page renders (useful for custom CSS or JavaScript, but may affect SEO performance)
   • Page body — Code is loaded after the page renders (ideal for tracking scripts, doesn't impact SEO)

Page-level custom code only runs on your published app, not in the editor preview. When you add JavaScript, wrap it in <script> tags.

TIP

Custom code added at the page level only applies to that specific page.

To add custom code across your entire app, open the Settings tab → Interface Settings → Advanced → Custom scripts.

Learn more about custom scripts →

WARNING

When you add custom CSS to a page or project, do not include <head> or <body> tags. WeWeb handles those tags automatically.

Languages

Configure which languages are available on a specific page and control how language-specific URLs are structured.

To configure page languages:

1. Open the Pages panel in the Interface tab
2. Click the cog next to the page you want to configure
3. Click on Languages in the menu

The Languages panel has two areas:

• Page languages — choose which project languages are enabled on the current page
• Project languages — add languages to your project, set the default language, and decide whether to include the default language slug in URL paths

In the Languages panel, you can:

1. Add languages to your project
2. Define the default language of your project
3. Decide if you want to add the default language slug to the URL path of the current page
4. Decide which languages should be enabled on the current page
5. Toggle between active languages to preview the page content in different languages

Working with multiple languages

When you have multiple languages enabled on a page:

1. Text elements on the page will prompt you to provide content in each language
2. Selected text elements show a field for each enabled language (for example, Text - en, Text - es)
3. Use the language selector in the canvas header to switch between languages in the editor
4. The appropriate text will be displayed based on the user's language selection

Duplicate a page

Duplicate a page when you want to create a new page with similar content and structure to an existing one.

To duplicate a page:

1. Open the Pages panel in the Interface tab
2. Click the cog next to the page you want to duplicate
3. Click on Duplicate {page name} in the menu
4. Configure the new page name and URL path
5. Choose which sections should be linked
6. Click Create to create the duplicate

The duplicate page panel provides the same options as creating a new page, with all content pre-filled from the page you're duplicating.

Make a page the homepage

Set any page as your app's homepage. The homepage is the page that users see when they visit the root URL of your app.

To make a page the homepage:

1. Open the Pages panel in the Interface tab
2. Click the cog next to the page you want to set as the homepage
3. Click on Make {page name} your home page in the menu
4. Confirm the change

Remove a page

Delete pages that are no longer needed in your app.

To delete a page:

1. Open the Pages panel in the Interface tab
2. Click the cog next to the page you want to delete
3. Click the trash icon at the top of the page settings panel
4. Enter the page name to confirm deletion
5. Click Delete page

WARNING

You cannot delete your homepage. If you want to delete the current homepage, first set another page as the homepage, then delete the original one.

Be careful when deleting pages, as any links pointing to that page will be broken.

Collection pages in older projects

Older projects can still have static collection pages, built on collections. New projects use tables, views and dynamic pages instead. If your project still uses collections, you'll find the Add static collection page option next to the Add Page button.

See the legacy documentation for collection pages →