# How to add dynamic text with Bubble expressions

- Tool: Bubble
- Difficulty: Beginner
- Time required: 10-15 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

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.

## Before you start

- 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

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

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

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

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

### 5. 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 code example

File: `Workflow summary`

```text
DYNAMIC EXPRESSION PATTERNS
=============================

BASIC INSERT:
  "Hello, [Current User's first_name]!"
  "Order #[Current cell's Order's Unique ID:truncated to 8]"

DATE FORMATTING:
  [date :formatted as MM/DD/YYYY]      → 03/28/2026
  [date :formatted as DD MMM YYYY]     → 28 Mar 2026
  [date :formatted as MMMM D, YYYY]    → March 28, 2026
  [date :formatted as h:mm A]          → 3:45 PM
  [date :formatted as relative]        → 2 hours ago

NUMBER FORMATTING:
  [number :formatted as $#,##0.00]     → $1,234.56
  [number :formatted as #,##0]         → 1,235
  [number :formatted as 0.0%]          → 85.3%
  [number :formatted as 0]             → 1235 (no decimals)

TEXT OPERATORS:
  [text :uppercase]                    → HELLO WORLD
  [text :lowercase]                    → hello world
  [text :truncated to 50]              → First 50 chars...
  [text :find & replace (old, new)]    → replaces substring
  [text :split by , :first item]       → first comma-separated value
  [text :number of characters]         → 11

LIST OPERATORS:
  [list :count]                        → 5
  [list :first item]                   → first record
  [list :join with ", "]              → "item1, item2, item3"
  [list :filtered (field = value)]     → filtered subset

DEFAULT VALUES:
  [value :default = "Not specified"]   → shows fallback when empty

COMPLEX EXAMPLE:
  "Welcome back, [Current User's first_name :default = there]!
   You have [Search Orders (user=me, status=Pending):count]
   pending orders worth
   [Search Orders (user=me, status=Pending):each item's total:sum
    :formatted as $#,##0.00].
   Last login: [Current User's last_login :formatted as relative]."
```

## Common mistakes

- **Forgetting to handle empty dynamic values** — When a dynamic value is null (e.g., user has not set their company), the text shows an awkward blank gap Fix: Use the :default operator to show a fallback value, or add a condition to hide the element when the value is empty
- **Applying the wrong date format string** — Bubble's date formatting uses specific tokens (MM, DD, YYYY, etc.) and an incorrect token shows the wrong value Fix: Reference Bubble's date format documentation — common tokens: MM (month), DD (day), YYYY (year), h (hour), mm (minute), A (AM/PM)
- **Using :filtered on large lists in dynamic expressions** — The :filtered operator processes each item individually on the client side, which is slow for large datasets Fix: 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

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

---

Source: https://www.rapidevelopers.com/bubble-tutorial/add-dynamic-expression-text-field-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/add-dynamic-expression-text-field-bubble