Bubble's editor includes keyboard shortcuts that speed up inserting dynamic data into text fields, navigating the visual editor, and managing expressions efficiently. This tutorial covers the essential keyboard shortcuts for inserting dynamic data, navigating between elements and pages, using expression shortcuts in text fields, and customizing your editor workflow for maximum productivity.
Overview: Keyboard Shortcuts and Dynamic Data in Bubble
This tutorial helps you become faster in the Bubble editor by mastering keyboard shortcuts for dynamic data insertion and general navigation. Whether you are building expressions in text fields, jumping between pages, or duplicating elements, these shortcuts will significantly reduce the time you spend on repetitive editor tasks.
Prerequisites
- A Bubble app with at least one page containing text elements or inputs
- Basic familiarity with Bubble's dynamic data expressions
- A desktop computer with a keyboard (shortcuts do not work on tablets)
Step-by-step guide
Insert dynamic data into a text field using the shortcut
Insert dynamic data into a text field using the shortcut
Click on any text element or input that supports dynamic data. When you see the text editor, type a dynamic expression by clicking the Insert dynamic data button or pressing the keyboard shortcut. In Bubble, dynamic data appears as colored tags within text fields. To insert dynamic data, click inside the text field where you want the dynamic value, then click Insert dynamic data (the blue link that appears). This opens the expression composer where you can select data sources like Current User, Current Page data, or Do a Search for. The expression composer supports typing to filter options — start typing the name of a field and the list narrows automatically.
Pro tip: When building long expressions, type the first few letters of each field name to quickly filter the dropdown options instead of scrolling through the entire list.
Expected result: Dynamic data tags appear inline within your text, showing live values from your database when previewed.
Use copy and paste for expressions between elements
Use copy and paste for expressions between elements
To copy an expression from one element to another, right-click the element and select Copy expression (or use Cmd/Ctrl+C when the expression editor is active). Navigate to the target element and paste with Cmd/Ctrl+V. This works for text fields, conditional expressions, and data sources. If the pasted expression references elements that do not exist on the destination page, Bubble will show red errors — you will need to update those references manually. This shortcut saves significant time when building similar dynamic text across multiple elements.
Expected result: Expressions are copied between elements without retyping, and any broken references are flagged for correction.
Navigate the editor quickly with keyboard shortcuts
Navigate the editor quickly with keyboard shortcuts
The Bubble editor supports several navigation shortcuts. Use Cmd/Ctrl+Z to undo and Cmd/Ctrl+Shift+Z to redo. Press Cmd/Ctrl+E to open the Search Tool, which lets you find any element, workflow, or data type across your entire app by name. Use Cmd/Ctrl+Click on an element to select it directly even if it is nested inside groups. To duplicate an element, select it and press Cmd/Ctrl+D. To delete, press the Delete or Backspace key. Hold Shift while clicking to multi-select elements for bulk operations like alignment or group creation.
Pro tip: Cmd/Ctrl+E (Search Tool) is the fastest way to find anything in a complex app — it searches across elements, workflows, Data Types, and Option Sets.
Expected result: You can navigate, search, duplicate, and modify elements in the editor without relying solely on mouse clicks.
Build complex expressions using chained operators
Build complex expressions using chained operators
When inserting dynamic data, you can chain operators to transform values. After selecting a data source (e.g., Current Page Product's Price), click the :more... option to see available operators like :formatted as, :rounded to, :truncated to, and text operators like :find & replace, :truncated to, :append. For dates, use :formatted as to display dates in custom formats. For numbers, use :formatted as currency. Chain multiple operators by clicking each one sequentially — they apply left to right. For example: Current Page Product's Price:formatted as currency will display '$99.00' instead of '99'.
Expected result: Your dynamic expressions display formatted, transformed data exactly as intended in the preview.
Use the Element Tree for fast element selection
Use the Element Tree for fast element selection
Open the Element Tree by clicking the icon in the left toolbar (it looks like a nested list). The Element Tree shows every element on the current page in a hierarchical view. Click any element name to select it instantly — this is much faster than clicking through nested groups in the visual editor. You can also drag elements within the Element Tree to reorder them or move them into different parent groups. Right-click an element in the tree to access options like Hide, Copy, Rename, or Start/edit workflow.
Expected result: You can find and select any element on the page instantly through the Element Tree, regardless of how deeply nested it is.
Complete working example
1BUBBLE EDITOR KEYBOARD SHORTCUTS REFERENCE2============================================34GENERAL:5 Cmd/Ctrl + Z Undo6 Cmd/Ctrl + Shift + Z Redo7 Cmd/Ctrl + S Save (auto-saves, but forces save)8 Cmd/Ctrl + E Open Search Tool9 Delete / Backspace Delete selected element1011ELEMENT OPERATIONS:12 Cmd/Ctrl + C Copy element or expression13 Cmd/Ctrl + V Paste element or expression14 Cmd/Ctrl + D Duplicate element15 Cmd/Ctrl + Click Select nested element directly16 Shift + Click Multi-select elements17 Arrow keys Nudge selected element by 1px18 Shift + Arrow keys Nudge by 10px1920DYNAMIC DATA:21 Click 'Insert dynamic data' in text field22 Type to filter data source options23 Chain operators with ':more...' button24 Copy/paste expressions between elements2526NAVIGATION:27 Element Tree Left toolbar icon (nested list)28 Page dropdown Top-left of editor29 Workflow tab Left sidebar30 Data tab Left sidebar3132EXPRESSION OPERATORS:33 :formatted as Format numbers/dates/currencies34 :rounded to Round number to decimal places35 :truncated to Limit text length36 :find & replace Replace text within string37 :filtered Filter a list38 :sorted by Sort a list39 :count Count items in a list40 :first item Get first item from list41 :last item Get last item from listCommon mistakes when adding dynamic data anywhere in a text field using keyboard shortcuts:
Why it's a problem: Pasting expressions that reference elements not present on the destination page
How to avoid: After pasting, check for red error indicators and update any broken references to point to the correct elements on the current page
Why it's a problem: Not using the Search Tool to find elements in complex apps
How to avoid: Use Cmd/Ctrl+E to open the Search Tool and type the element name — it searches across the entire app instantly
Why it's a problem: Building long expressions without testing intermediate results
How to avoid: Build expressions step by step, previewing the result after each operator addition using the Debugger
Best practices
- Learn and use Cmd/Ctrl+E (Search Tool) — it is the single biggest time saver in the Bubble editor
- Use the Element Tree for selecting deeply nested elements instead of clicking through groups
- Type to filter when inserting dynamic data — do not scroll through long dropdown lists
- Copy and paste expressions between similar elements to avoid retyping complex formulas
- Use Cmd/Ctrl+Click to select elements that are hidden behind other elements
- Chain formatting operators (:formatted as) to display data in user-friendly formats
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I am working in the Bubble.io editor and want to be more productive. What are the most important keyboard shortcuts and tips for working with dynamic data expressions, navigating between elements, and building formulas quickly?
Add a text element that displays a formatted greeting using dynamic data. Show 'Welcome back, [Current User's first name]! You have [Do a Search for Tasks where assigned_to = Current User and completed = no:count] pending tasks.' Format the task count as a number.
Frequently asked questions
Is there a shortcut to insert dynamic data without clicking the button?
In Bubble, you insert dynamic data by clicking the 'Insert dynamic data' link that appears in text fields. There is no single keyboard shortcut for this, but you can speed up the process by typing to filter the dropdown options once the expression composer opens.
Can I copy workflows between pages?
Yes. Right-click a workflow event in the Workflow tab, select Copy, navigate to another page, and paste. Be aware that references to page-specific elements may break and need to be reconnected.
What does Cmd/Ctrl+E do in the Bubble editor?
It opens the Search Tool, which lets you search for any element, workflow, Data Type, or Option Set across your entire app by name. It is the fastest way to find anything in a complex project.
Can I undo a deleted element?
Yes. Press Cmd/Ctrl+Z immediately after deleting to undo. Bubble maintains an undo history for the current editing session. If you close and reopen the editor, the undo history is lost.
Can RapidDev help optimize my Bubble editor workflow?
Yes. RapidDev can help structure your app for maximum editor efficiency, set up reusable components to minimize repetitive work, and train your team on advanced Bubble editor techniques.
How do I select an element that is hidden behind another element?
Use Cmd/Ctrl+Click to click through overlapping elements and select the one underneath. Alternatively, use the Element Tree in the left toolbar to click the exact element by name.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation