Toolbar
The Toolbar provides useful tools while building. They're described here. The Toolbar lives at the top of the Application Editor.
Our Academy quick tip on how to search for pages and elements in the Design tab
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 the last change. You can undo all changes made since the last page load.
Redo an undo change.
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.
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.
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.
Shows the element edges to help with design.
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.
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.
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.
When this option is on, the Property Editor pane will be locked on the right side of the Design canvas instead of being draggable.
When this option is on, the editor will show the distances in pixels between the selected element the the currently hovered element.
This dropdown menu offers different grid options, such as showing/hiding the grid, defining a color, and snapping to the grid or edges.
You can zoom in or out on the page for more precision. Note that this feature isn't available on Firefox currently.
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.
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.
FYI
As you change your app, Bubble does calculations behind-the-scenes to help optimize page load times in the future. One consequence of this is that the first time an app is visited in runmode after a lot of new changes have been made, that first load may be a bit slower as Bubble does its calculations. This slowness on the first load should not happen again after the calculation is done (which usually takes at most a couple of minutes), until of course the next time major changes are made. Note that this calculation happens separately for your development vs. live versions, so if you aren't deploying to live frequently, this effect may be more noticeable there.
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.
When you build the app, you may forget to fill in some fields or have type inconsistencies. The Issue Checker helps you resolve issues. Clicking on it shows a list of issues that need to be fixed, and when you click an entry, it will take you to the element/action that needs fixing.
Tip
Resolve issues when they arise because Live deployment cannot happen with active issues.
FYI
To flag issues, Bubble does a lot of calculations behind-the-scenes. For very large apps, this calculation may spot additional issues on a page only once you visit that page.
Known issue
After merging two development versions, the issues in the newly combined version may not update right away. In these situations, if you want to be extra sure that any issues are caught in the merged version, our suggestion is to visit each page in the editor - visiting a page will should cause the Issue Checker to run for that page.
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.
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.
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.
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.
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 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.
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.
Last modified 1mo ago