The page is the element at the top of the hierarchy in a web app. For native mobile apps, see the view.
At the core of everything related to design and user interface in Bubble is the page. It's the canvas where you place input elements, text, images, icons, videos, and everything else your users need to interact with your app.
The page gives you a blank canvas on which to build your vision.
What is a page?
No matter what kind of app you're building, from a simple website to a complex eCommerce platform, the page is the starting point for all your design and development work. Think of the page as the base level in a page's hierarchy: every element you add sits inside it.
What is a page's hierarchy structure?
What is a page's hierarchy structure?
A Bubble page is composed of three types of components:
The page The page is the top-level component of a web page and organizes all the groups and elements placed on it. The page is the top container for all elements
Groups Groups are containers used to hold other elements and control their layout. Think of them as boxes that can hold elements, and even other groups, to create a hierarchy. Groups can be styled or made invisible to the user. They play a major role in your page's design, since the way they're set up determines how the elements inside them behave. Groups are containers for elements and for sub-groups
Elements Elements are the content your users see and interact with, such as buttons, links, images, icons, and input fields. They can be placed inside a group, or directly on the page. Elements are the things that users interact with on the page
In a way, the hierarchy above is how your browser sees the page before rendering it on the screen. You can read more about the element hierarchy in the article below.
Article: The element hierarchy
Default pages
When you create a new Bubble web app, a few pages are included by default. These pages share a few traits:
They're always present when your app is created.
Their names can't be changed.
They can't be deleted.
index
The index page is the main page of your app (more on that below).
404
The 404 page is where your users are taken if they type in an URL in the URL bar that includes your domain, but the page name they enter doesn't exist:
https://appname.bubbleapps.io/non-existing-page → https://appname.bubbleapps.io/404
The 404 is an http error code that is used to tell your browser that the page doesn't exists.
The 404 page can be edited freely just like any other page – but it can't be deleted.
You can use this page to tell your users that the page couldn't be found and point them in another direction.
reset_pw
This is the page to which your users are directed if they need to reset their password. They will most likely follow a link in a reset password email to this page.
The reset_pw page is a special page that lets your users reset their password safely. It's part of Bubble's core functionality and can't be removed or renamed.
The index page
The index page is the main page of your app. It's the first page that loads when someone enters your app's domain in the browser. It's also the only page that can be displayed without its name appearing in the URL.
For example, all of the following URLs take you to the index page, even without the page name included:
No custom domain
Version | URL |
Development | |
Live |
Custom domain
Version | URL |
Development | |
Live |
If your app has any custom branches set up in version control, the version-test part of the URL is replaced by the ID of the currently active branch.
Setting an index page
When you create an app in Bubble, the index page is created automatically. You cannot name another page index, but you can replace it by using the Make this page the new index function. To change the index page:
1. Open the page dropdown menu
Open the page navigator, click the three dots on the page you want to make the new index.
2. Click Make index
Select Make index in the dropdown menu.
You can also change the index page by right-clicking the page element in the design canvas and clicking Make this page the new index.
Set a new index page by clicking the Make index option in the page dropdown.
The old index page will be named old_index.
The page URL
Every page you add is automatically assigned a unique URL that users can access, just like any other website. All page URLs follow the same pattern: the root URL of your app followed by the page name.
No custom domain
Version | URL |
Development | |
Live |
Custom domain
Version | URL |
Development | |
Live |
If your app has any custom branches set up in version control, the version-test part of the URL is replaced by the ID of the currently active branch.
Creating a new page
To create a new page:
1. Click the New button
Open the page navigator and click the New button.
2. Click Web page
Select Web page in the dropdown menu.
Create a new page using the New and Web page option.
You will be asked to provide a name for the new page and whether you want to clone an existing page.
You can give your page any name you want, as long as it's URL-safe and unique within the app.
Naming your page
You can create as many pages as you need in your app, as long as they have unique names. Keep in mind when naming pages that they need to be URL-safe. Any non-URL-safe strings you provide will automatically be URL encoded.
A good rule of thumb for page names is to use only the English letters a-z and numbers 0-9, and to replace spaces with dashes. When URL-encoding a page name, Bubble will:
Change the text to lowercase.
Replace spaces with
-.Replace special characters with
_.
Cloning a page
Cloning a page creates an exact copy of it under a new name, including all elements and workflows. There are three ways to duplicate a page:
By selecting New → Web page, and populating the Clone from field in the new web page popup...
You can clone a page by using the New web page option and then selecting a page to clone.
... by having the page you want to duplicate open in the editor and selecting Edit - Duplicate this page...
You can also clone the page by selecting Duplicate page while having the page you want to clone open in the editor.
... or by using the contextual dropdown menu and clicking Duplicate.
You can duplicate a page by clicking the contextual page menu and selecting Duplicate.
Regardless of the method you choose, you will be asked to provide a name for the clone and confirm which page to clone in the page dropdown marked below:
Give the duplicated page a name, and select which page to clone.
Page properties
Each page can have their own individual settings configured that affects how that page looks and behaves. Settings are available in the Property Editor.
There are two ways to access the page settings:
Left-click anywhere on the page itself (avoid clicking on another group or element).
Clicking on the page in the page's element tree.
To select the page from the element tree, click it at the top of the tree.
For the full list of all page properties, see our page properties article in the core reference.
When you select the page, Bubble automatically displays the element property editor on the right side of the screen:
Clicking anywhere on the page opens up the element property editor for the page.
Visual
The Visual tab lets you control the visual properties of the page, such as its content type, layout, size, style, background, and appearance.
Interaction
The Interaction tab lets you control the page's interactive properties, such as workflows, transitions and meta tags.
Conditional
The Conditional tab lets you change the page's properties when one or more conditions are true.
Organizing your pages
Pages can be organized into folders in the Bubble editor to make them easier to find.
Organizing pages into folders makes it easier to find them in the editor, but it doesn't affect the page's URL or how users navigate to it in your app.
Creating a page folder
To create a new page folder:
1. Click the New button in the page navigator
Open the page navigator and click on the New button in the upper right corner.
2. Name the folder
Click Folder in the dropdown menu and enter a name in the dialog that appears.
Create a new page folder by selecting New and then Folder.
Adding a page to a folder
To move a page into a folder:
1. Open the page contextual menu
Open the page navigator, and click the contextual menu icon next to the page name.
2. Click Manage folder
Click Manage folder and select the folder you want to page the page into.
You need to create a folder before you try to move a page.
Click the page's contextual menu and select Manage folder to move it into a folder.
Managing folders
You will find all the folders you've created at the bottom of the page navigator. Use the contextual menu to delete a folder.
Open the page navigator, and you can manage folders at the bottom.
FAQ: Pages
Can I add page folders to my URL structure?
Can I add page folders to my URL structure?
Bubble doesn't support page folders in your app's URLs. Every page follows the same URL structure described above, regardless of how it's organized in the editor.
Can I publish and unpublish pages?
Can I publish and unpublish pages?
All pages are public. Once a page is created, it's accessible in your app as soon as changes are deployed. If you'd like to keep the elements on a page without making the page available to users, you can convert its contents into a reusable element and store them there instead.
How do I navigate between pages?
How do I navigate between pages?
To send a user to another page, use the Go to page workflow action or the link element.
Can I restrict a page to logged-in users?
Can I restrict a page to logged-in users?
Yes. You can restrict access using a workflow that triggers on page load, checks whether the user is logged in, and redirects them to a login page if they aren't. Keep in mind that page-level redirects aren't fully secure on their own, since page assets are downloaded to the client before the redirect runs. Sensitive data should always be protected with privacy rules in the database.
What's the difference between a page and a reusable element?
What's the difference between a page and a reusable element?
A page is a standalone canvas that users can navigate to via a URL. A reusable element is a component you build once and use in multiple places, such as a header, footer, or shared form. Pages appear in the navigation and have their own URLs, while reusable elements are embedded inside pages or other reusable elements.
Can two pages share the same URL?
Can two pages share the same URL?
No. Every page in your app must have a unique name, and each name maps directly to a URL. If you want two pages to appear at the same URL, you'll need to combine them into one page and use conditions or dynamic groups to show different content based on the situation.
Can I use dynamic URLs, like '/product/[product-name]'?
Can I use dynamic URLs, like '/product/[product-name]'?
Yes. Bubble supports dynamic URLs by giving the page a type of content and passing data to it. Use the slug field on a data type to show a URL-friendly name.
What happens if a user visits a page that doesn't exist?
What happens if a user visits a page that doesn't exist?
Bubble automatically shows a 404 error page. You can customize the design of the 404 page in the same way as any other page in your app.
Can I make a page load faster?
Can I make a page load faster?
Yes. A few things help: reduce the number of elements on the page, limit the amount of data loaded at page load, avoid heavy media files where possible, and use conditions to defer rendering of non-essential content. Bubble also caches assets automatically for repeat visits.
Other ways to learn
Related articles
Related articles
Core reference: Go to page
Core reference: The link element
Article section: The link element
Article series: Navigation