Top & Context Menu Options

Undo

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

Redo

Redo an undo change.

Edit

Edits the current selection, e.g., element, action, event.

Edit reusable

Navigates the design editor to edit the currently selected reusable element.

Edit page

Edits the current page.

Delete

Deletes the current selection, e.g., element, action, event, style.

Replace by another type

This action replaces an element/action/event by another element/action/event of a different type. For example, change an element from a checkbox to a toggle or from a group to a popup.

Note: This operation may lead to inconsistencies if the data type changes and a different input is needed. Review the Issue checker to ensure no issues were introduced. Undo this change, if necessary.

Convert to a reusable element

This option takes a group of elements and converts them into a reusable element. This is useful when reusing the same elements. Using reusable elements keeps the app smaller and makes it easier to edit.

Group elements in a Group

Our Academy quick tip on how to group elements together

This option takes the selected elements and creates a new group. You can choose with container layout type you'd like to group the elements in. The options are as follows:

• Group elements in a Fixed container

• Group elements in a Row container

• Group elements in a Column container

• Group elements in an Align-to-Parent container

Ungroup these elements

Our Academy quick tip on how to ungroup elements

This option moves the elements outside of the group that contains them, leaving the elements in the same position. This does not delete the group container, so delete it if no longer needed.

Add a new page...

Creates a new page from a blank template or by cloning an existing page.

Clone this Page

Creates a new page with the same elements/actions/events as the original page.

Make this page the new index

Our Academy quick tip on how to set a new index page

This function replaces the app's existing index and uses the current page as the new index. An index page cannot be deleted, so use this option to replace it. The previous page will be renamed old_index.

Add a new reusable element...

Creates a new reusable element. Choose an existing element or clone a reusable element.

Clone this reusable element

Creates a new reusable element with the current element's properties.

Backend workflows

This page is for editing the different backend workflows used in the app - the common characteristic of all backend workflows is that they run on the server, i.e. they are not tied to a specific page of the app. There are three types of backend workflows you can define:

• API workflows: a general workflow that can be initiated from elsewhere in the app or via the Workflow API (see Workflow API)

• Recurring workflows: a workflow that is set to run at a certain frequency (see Recurring Event)

• Database change trigger: a workflow that runs when any change of any thing of a specified data type happens (see Trigger Event)

Cut

Cuts the current selection, e.g., element, action, event, style.

Copy

Copies the current selection, e.g., element, action, event, style.

Paste

Pastes the current clipboard onto the current page. If the pasted element came from a different page or a different app, relative references to elements on the initial page will be removed.

Duplicate

Copies the current selection and pastes it onto the current page.

Select all

Selects all the elements on the page.

Select first parent

Selections the immediate parent of the selected element. This is convenient when an element is contained by a group with the same dimensions.

Copy with workflows

Copies the selected elements and the associated workflows.

Paste with workflows

Pastes the elements and the associated workflows from the clipboard. If the pasted element came from a different page or app, relative references to elements on the initial page will be removed.

Copy formatting

Copies the design options of the current selection.

Paste formatting

Pastes the design options from the clipboard.

Copy style

Copies the style of the current selection.

Paste style

Pastes the design options from the clipboard. The style itself is also copied.

Copy layout settings

Copies the layout settings of the selected element.

Paste layout settings

Applies the layout settings from the clipboard to the selected element. A full list of settings that can be copied and pasted is included below.

Note: Not all elements have compatible layout settings. When the elements are incompatible, this option will be disabled in the menu. Below are instances where element layout settings are not compatible:

• Visual Elements and Containers

• Form Inputs and Containers

• Elements with different parent container layout types

List of layout settings that can be copied and pasted

Global

• Make this element fixed width

• min width

• max width

• fit width to content

• Make this element fixed height

• min height

• max height

• fit height to content

• Padding

• Margin

Specific to Row Parent

• Vertical Alignment

Specific to Column parent

• Horizontal Alignment

Specific to Align to Parent parent

• Nonant

Specific to Container

• Container Layout Type

• Container Alignment

• Row gap

• Column Gap

Layout Settings that cannot be copied pasted

• Order (Row & Column)

Copy conditional expressions

Copies all conditional expressions of the currently selected element.

Paste conditional expressions

Pastes all the conditional expressions from the clipboard.

Copy condition

This function copies a condition of an element (when editing it in the Property Editor). It can then be pasted for the same element or another element.

Paste condition

This function pastes a condition to an element.

Copy expression

This function copies a dynamic expression that was built with the Composer.

Paste expression

This function pastes a dynamic expression from the clipboard. Access it when editing an expression, even if it is empty.

Clear expression

This clears the dynamic expression.

Paste before

This function pastes a text dynamic expression from the clipboard and appends it before the currently edited expression.

Paste after

This function pastes a text dynamic expression from the clipboard and appends it after the currently edited expression.

Clear all

Clears the entire dynamic and text expression.

Bring to front

Moves an element to the forefront.

Send to back

Moves an element behind all other elements.

Show all children

Make all direct children visible in the editor.

Hide all children

Make all direct children invisible in the editor.

Delete all children

Delete recursively all children in an element.

Center horizontally

Our Academy quick tip on how to center elements

Centers an element horizontally relative to the group that contains it or to the page.

Center vertically

Centers an element vertically relative to the group that contains it or to the page.

Align left

When applied to several elements, this option arranges all the elements so that the left borders line up.

Align horizontal centers

When applied to several elements, this option arranges all the elements so that their horizontal centers line up.

Align right

When applied to several elements, this option arranges all the elements so that the right borders line up.

Align top

When applied to several elements, this option arranges all the elements so that the top borders line up.

Align vertical centers

When applied to several elements, this option arranges all the elements so that their vertical centers line up.

Align bottom

When applied to several elements, this option arranges all the elements so that the bottom borders line up.

Distribute horizontally

When applied to several elements, this option ensures that the horizontal space between the elements is equal.

Distribute vertically

When applied to several elements, this option ensures that the vertical space between the elements is equal.

Swap element positions

Our Academy quick tip on how to swap element positions

Swaps the positions of two elements.

Reveal in Elements tree

This option shows where the element is in the Elements tree box, which is located in the Palette.

Start/Edit workflow

Use this function to either create a workflow or display the existing workflow for the selected element.

Insert an action

Inserts an action before the action you're currently editing.

Reveal the element

Use this function to see which element is used by the selected event or action.

Reveal the action

Shows the action a dynamic expression is referring to.

Show short videos

For new users, a short video is shown the first time you draw each type of new element. Click here to disable this feature.

Always show all properties

Show less options in the Property Editor for visibility and clarity purposes.

Show recent feature release

Add a gift icon to your toolbar to stay up to date on new features and fixes that we add to Bubble. Clicking here opens a popup that lists the changes since the last time you visited the application editor.

Shortcut list

Open a popup that lists keyboard shortcuts for common actions, such as CTRL+P to preview your application just like you had clicked on Preview in the toolbar.

Academy

A link to our educational library, including video courses, tutorials, and quick tips.

Forum

A link to our online community, where many expert Bubble users spend time helping other users out.

Report a bug

Watch our Academy quick tip on what to include in a bug report

A link to a bug report form, where you can share steps for our team to reproduce and investigate an unexpected behavior on Bubble.

Show grid

Customize a grid on the background of your page to help with your design. Choose the grid's color, step size, gutter size, and horizontal lines.

Snap element to edges

Auto-align elements to the edges of other elements, for example, to make sure two buttons are left-aligned.

Snap elements to grid

Auto-align elements to the edges of the grid on your page, for example, if you wanted to design your page in thirds.

Snap to edges and grid

Auto-align elements to each other and columns or rows within you grid.

Do not snap elements

Manually position elements only, without preference for the edges of other elements or alignment with the grid.

Show element borders

Add an outline around the edges of your elements when designing in the application editor. Change the color in the grid & borders menu to help it stand out.