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.
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.