The Bubble editor

This section covers how to navigate the Bubble editor

The Bubble editor refers to the editor connected to any one app (as opposed to the dashboard where you navigate your different apps and manage your account).

Our Academy course to introduce you to Bubble and its interface.

Multiple browser tabs editing the same app

Opening the Bubble editor for the same app in multiple browser tabs might result in unexpected behavior. We recommend keeping the editor of an app limited to just one tab at a time.

The Bubble editor is like a digital workshop where you build and design your app. Think of it as a crafting table where you arrange, tweak, and connect different parts to make your app look and work just the way you want.

We will go into the technical details of design, data and logic in later chapters, but for now we'll cover how the editor is structured, and the different tools available.

Tabs and sections: how the editor is structured

First, we'll explore the basic structure of the editor and how to navigate it. The editor is divided into tabs, and some of those tabs are further divided into sections.

Article: Tabs and sections

Key features: Saving, undo, navigation and contextual menus

Next, we'll look into basic functionality like saving, undo/redo and using the Bubble toolbar and right-click contextual menus.

Article: Key features

Tools: the property editor, search tool and issue tracker

Then, we'll have a look at the most widely used tools in the editor. The property editor is used to change the properties of elements on the page. The search tool is an advanced tool to search for a wide range of different objects in your app and the issue tracker helps you identify and fix issues.

Article: The property editor Article: The search tool Article: The Issue Checker

Previewing and deploying: running your app with test and live users

Bubble comes with a built-in tool to preview your app. This Development environment comes with a completely independent database and lets you try out your app and all its features before deploying it to live users.

Deploying your app means transferring or updating the current version of your application from the Development environment to the Live environment, making it accessible to end-users.

Article: Previewing your app Article: Deploying your app

Other ways to learn

Core reference

The core reference section below covers each individual setting in each of Bubble's tabs and sections.

Core reference: Bubble's interface