Toolbar
The Toolbar provides useful tools while building. They're described here. The Toolbar lives at the top of the Application Editor.
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.
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, as you continue making changes on the newly combined version, the issue checker should eventually catch up.
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.
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
