Bubble lets you insert dynamic data into any Text element by clicking Insert dynamic data in the text editor. You can chain operators like formatted as, truncated to, and find & replace to transform data before display. This tutorial covers inserting dynamic data, chaining operators, mixing static and dynamic text, and common formatting patterns.
Overview: Dynamic Expressions in Bubble Text Fields
Dynamic expressions are the backbone of personalized content in Bubble. Instead of hardcoding text, you can pull data from the database, the current user, URL parameters, or custom states and display it directly in Text elements. This tutorial covers the mechanics and common patterns.
Prerequisites
- A Bubble app with Data Types containing records
- Basic understanding of Bubble's Design tab and Text elements
- Familiarity with data sources (Current User, searches, page data)
Step-by-step guide
Insert dynamic data into a Text element
Insert dynamic data into a Text element
Select a Text element on your page. In the text editor area, click where you want to insert dynamic content. Click the Insert dynamic data button (blue link) or type a dynamic expression. A dropdown appears showing available data sources: Current User, Current Page's data type, search results, and custom states. Select the data source and then the specific field. The dynamic reference appears as a highlighted tag in the text.
Pro tip: You can type directly in the text editor and insert dynamic data at any point — Bubble will highlight dynamic portions differently from static text.
Expected result: The Text element displays data pulled from your database, current user, or other data sources.
Chain operators to format dynamic data
Chain operators to format dynamic data
After inserting a dynamic value, you can chain operators by clicking More... on the dynamic expression. Common operators: formatted as (format dates and numbers), truncated to (limit text length with an ellipsis), find & replace (swap text), :uppercase, :lowercase, :split by, :first item, :last item, :count, and +items (for lists). For example, Current User's name :uppercase displays the name in all caps.
Expected result: Dynamic data is transformed before display using chained operators.
Mix static and dynamic text in one element
Mix static and dynamic text in one element
A single Text element can contain multiple dynamic expressions mixed with static text. For example: Welcome back, [Current User's first_name]! You have [Search for Orders (user=Current User, status=Pending):count] pending orders. Each dynamic portion is inserted separately using Insert dynamic data, and the static text is typed normally around them.
Expected result: Text elements display a natural mix of static text and multiple dynamic values.
Format dates and numbers for display
Format dates and numbers for display
For dates, use :formatted as with a format string: MM/DD/YYYY for American dates, DD MMM YYYY for international (28 Mar 2026), or relative time for 3 hours ago. For numbers, use :formatted as with a number format: currency (adds $ and commas), decimal places, or percentage. These formatting operators are applied after the data source and before display.
Expected result: Dates display in your chosen format and numbers show proper currency or decimal formatting.
Handle empty dynamic values gracefully
Handle empty dynamic values gracefully
Dynamic values can be empty (null) if the data does not exist. Use the :default operator to show a fallback value: Current User's company :default = Not specified. Without this, empty values show as blank gaps in your text. For conditional text, use conditions on the Text element to change the entire text based on whether data exists.
Expected result: Empty dynamic values show meaningful defaults instead of blank spaces.
Complete working example
1DYNAMIC EXPRESSION PATTERNS2=============================34BASIC INSERT:5 "Hello, [Current User's first_name]!"6 "Order #[Current cell's Order's Unique ID:truncated to 8]"78DATE FORMATTING:9 [date :formatted as MM/DD/YYYY] → 03/28/202610 [date :formatted as DD MMM YYYY] → 28 Mar 202611 [date :formatted as MMMM D, YYYY] → March 28, 202612 [date :formatted as h:mm A] → 3:45 PM13 [date :formatted as relative] → 2 hours ago1415NUMBER FORMATTING:16 [number :formatted as $#,##0.00] → $1,234.5617 [number :formatted as #,##0] → 1,23518 [number :formatted as 0.0%] → 85.3%19 [number :formatted as 0] → 1235 (no decimals)2021TEXT OPERATORS:22 [text :uppercase] → HELLO WORLD23 [text :lowercase] → hello world24 [text :truncated to 50] → First 50 chars...25 [text :find & replace (old, new)] → replaces substring26 [text :split by , :first item] → first comma-separated value27 [text :number of characters] → 112829LIST OPERATORS:30 [list :count] → 531 [list :first item] → first record32 [list :join with ", "] → "item1, item2, item3"33 [list :filtered (field = value)] → filtered subset3435DEFAULT VALUES:36 [value :default = "Not specified"] → shows fallback when empty3738COMPLEX EXAMPLE:39 "Welcome back, [Current User's first_name :default = there]!40 You have [Search Orders (user=me, status=Pending):count]41 pending orders worth42 [Search Orders (user=me, status=Pending):each item's total:sum43 :formatted as $#,##0.00].44 Last login: [Current User's last_login :formatted as relative]."Common mistakes when adding dynamic text with Bubble expressions
Why it's a problem: Forgetting to handle empty dynamic values
How to avoid: Use the :default operator to show a fallback value, or add a condition to hide the element when the value is empty
Why it's a problem: Applying the wrong date format string
How to avoid: Reference Bubble's date format documentation — common tokens: MM (month), DD (day), YYYY (year), h (hour), mm (minute), A (AM/PM)
Why it's a problem: Using :filtered on large lists in dynamic expressions
How to avoid: Use Do a Search For with constraints instead of fetching a large list and filtering it client-side
Best practices
- Use :default to provide fallback values for potentially empty data
- Format dates consistently throughout your app using the same format string
- Use :truncated to for long text in list views to keep layouts clean
- Chain operators in the correct order — each operator processes the result of the previous one
- Use conditions on Text elements for completely different text variations rather than complex inline logic
- Test dynamic expressions with real data to ensure formatting works correctly
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I'm building a Bubble.io app and need to display dynamic data in my text elements. I need to show the user's name, format dates, display currency values, and handle empty fields gracefully. Can you show me the common dynamic expression patterns?
Add dynamic text to my dashboard page. I need a welcome message with the user's name, their pending order count, total order value formatted as currency, and their last login time as relative time (e.g., '2 hours ago').
Frequently asked questions
Can I use HTML in dynamic text?
No, Text elements do not render HTML. For HTML content (like rich text from a blog post), use an HTML element instead.
How do I show a count of items?
Use a search with the :count operator. For example, Do a Search for Orders (status=Pending):count displays the number of pending orders.
Can I concatenate multiple dynamic values?
Yes. Insert multiple dynamic expressions in a single Text element with static text between them. Each dynamic portion is independent.
What does :default do?
The :default operator provides a fallback value when the dynamic expression returns empty/null. Example: Current User's company :default = Not set.
How do I format a number as currency?
Use :formatted as with the pattern $#,##0.00 for US dollars with two decimal places. Adjust the pattern for other currencies.
Can I run calculations in dynamic expressions?
Yes. You can use arithmetic operators (+, -, *, /) and aggregation operators (:sum, :average, :count) on numeric values. For complex calculations, consider using custom states. RapidDev can help build complex data dashboards with advanced calculations.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation