Toolbar

Experience level

This core reference entry is suited for beginner-level builders.

In-depth articles (7)

To learn about this topic more in-depth, we recommend reading the suggested articles below:

Bubble editor tools

This article series covers the different tools available in the Bubble editor.

• Article series: Bubble editor tools

  • Article: The issue tracker

  • Article: The search tool

  • Article: The issue tracker

  • Article: The element tree

  • Article: The element property editor

  • Article: The debugger

  • Article: Notes

The Toolbar provides useful tools while building. They're described here. The Toolbar lives at the top of the Application Editor.

Inline page search

Search your application for pages or reusable elements by name in the leftmost dropdown, or search the elements on the current page in the next dropdown.

Undo

Undo the last change. You can undo all changes made since the last page load.

Redo

Redo an undo change.

Recent releases

The Gift icon indicates that new features and fixes have been added to Bubble. Clicking here opens a popup that lists the changes since the last time you visited the application editor.

Viewing mode

UI Builder and Responsive are the two different viewing modes. The app is designed and edited in the UI Builder mode. Responsive mode shows how the app will behave in different situations and screen widths.

Selection mode

If you select an element in the Palette and then decide not to add that element, click this button to deselect the item and return to edit mode.

Show / Hide element edges

Shows the element edges to help with design.

Show element labels

Elements on the canvas will display an icon on them as an indicator if the element needs data or a workflow to function (i.e. a button or repeating group). If the element has data, a workflow, or a note attached to it, the indicator will be solid. If the note on an element has not been read, the indicator will be yellow. To help distinguish between individual elements and reusables, individuals will be blue and reusables will be purple.

X-Ray mode

Sometimes the page will have many elements, and you need to see if something is behind another element. Toggling the X-Ray mode shows all elements with some amount of transparency. Users will never see this view, but it is convenient for development and design purposes.

Disable element thumbnails on hover

When hovering an expression or workflow that uses an element, you will see a helpful thumbnail preview of this element. This can decrease performance on slower computers, so you can disable that in the canvas settings.

Lock Property Editor

When this option is on, the Property Editor pane will be locked on the right side of the Design canvas instead of being draggable.

Show distances

When this option is on, the editor will show the distances in pixels between the selected element the the currently hovered element.

Grid options

This dropdown menu offers different grid options, such as showing/hiding the grid, defining a color, and snapping to the grid or edges.

Zoom

You can zoom in or out on the page for more precision. Note that this feature isn't available on Firefox currently.

Arrange options

This dropdown menu offers different options to organize elements on the page. Choose from Bring to Front, Send to back, Center horizontally/vertically, Align left/top/bottom/right, Distribute horizontally/vertically, and Group/Ungroup elements.

Preview

Click this button to see your application in run mode. By default, the debugger will be turned on when you're running your application from this button. If you hover the button for a second, you will see more preview options; you will be able to run the application without the custom HTML that you added to the page, and without adding community plugins (built by the community). These modes are useful when you are debugging your app, as some custom code can sometime conflict with Bubble's native behavior.

Understanding page load times: When you update your app, Bubble optimizes it in the background for faster future loads. After significant changes, the initial load might be slower while these optimizations occur. This delay, typically brief, won't recur until the next major update.

This optimization happens separately for Development and Live, so infrequent deployments to live may make this more noticeable.

Search Tool

The Search Tool searches the app for elements, styles, and other objects. Advanced searches can be performed, such as finding all elements and actions that use or modify a field. When you click the search results, the Bubble Editor will take you to the requested items. All the found elements can be edited at once by clicking on 'Edit these elements.' Caution: This can modify elements across many pages.

User manual article: Using the search tool

Issue Checker

While building your app, you might overlook certain fields or encounter data mismatches. The Issue Checker aids in identifying and addressing these problems. By selecting it, you'll see a list of outstanding issues.

Clicking on a specific issue navigates you directly to the problematic element or action for correction.

When using the Issue checker, keep in mind the following:

• We recommend resolving issues as soon as they arise, as you will not be able to deploy your app before they are resolved

  • Having a very large number of issues in the tracker can also lead to degraded performance in the Bubble editor

• Bubble performs extensive behind-the-scenes computations to identify issues. For particularly large apps, you might notice additional issues on a specific page only after accessing it. We recommend opening the different pages in your app to make sure the issue tracker has caught everything before deploying app-wide changes

Known issue: In certain cases, like with Plugin element inputs, the Issue Checker will mark text fields filled out with an empty string (ie. "") as empty. Either enter text, or " ", if this is a required field that you'd like to keep blank.

Component Library

The Component Library is a collection of pre-built User Interface (UI) components that can be dragged and dropped onto your page to help you build beautiful interfaces faster. These UI components are fully responsive and are made up of containers, visual elements, and form inputs that can be individually customized once added to your page.

Each component is a fully independent unit, but can be connected to each other or other parts of your app by adding workflows and data. You can learn more about using the component library to build a page in the Help Guide.

The Component Library contains a handful of the most common UI components used in web applications today. Each type of UI component has 3 to 4 different versions that can be selected based on personal preference. New UI components will be regularly added to the Component Library.

User manual article: The Component Library User manual article series: Design

Header

Header components are commonly found at the top of most landing pages and contain placeholder links that allow your users to navigate to the most important parts of your application. The header component also contains a placeholder for your company's logo and buttons for users to login and signup.

The Login and Signup buttons are not connected to any workflows by default. Refer to the Help Guide to learn more about connecting these buttons to the Signup/Login component.

Hero

A Hero component is typically the first section of your landing page under the header. This section is used to grab the users attention and communicate your brand and what your application has to offer. The hero component contains placeholders for a large image, header text, smaller subtitle text, and CTA's (or "calls to action" buttons) for your users.

Value Props

A Value Props section is used to communicate the key differentiators, or value, that your application can deliver to your users. This section is typically found beneath the Hero Section as it allows you to go into more detail about your web app. The value props component contains placeholders for multiple sets of images, text, and CTA's to help you describe your application's value proposition.

Footer

Footer components are found at the very bottom of a landing page. The footer component is generally used to provide a more detailed map of links to different pages of your website, how to find your company on social media, and any copyright information. The Footer component contains placeholder links, a placeholder for your logo, and buttons for linking to your social media accounts.

Signup/Login

The Signup/Login component is used to allow your users to sign up for an account or login to your website. The Signup/Login component contains two forms that can be toggled depending on which form you'd like to show your users. Both groups overlap each other, so this is done by conditionally hiding one group and showing the other. Learn more about how to use the Signup/Login form in your app in the Help Guide.

The Login and Signup buttons are not connected to any workflows by default. Refer to the Help Guide to learn more about connecting these buttons to the workflows that will signup or login your users.