How to build a blog post preview in Bubble

The simplest way to build a blog post preview in Bubble is to store a short version of your post (either manually or auto‑generated) in your Blog Post data type, and then show it inside a Repeating Group using a Text element that displays either the “Preview” field or a truncated version of the full content using Bubble’s built‑in :truncated to operator.

What the preview actually is

A “preview” is just a shorter piece of text that represents the full blog post. In Bubble, you don’t need a special feature for this. You either store it as a field or generate it visually using an expression.

• Option A (recommended for beginners): Add a field called Preview text (text) inside your Blog Post data type.
• Option B: Don’t store anything, simply use Full post :truncated to 150 to show the first 150 characters.

How to show previews in a Repeating Group

Create a Repeating Group on your page and set its Type of content to Blog Post. Set its Data source to Do a search for Blog Posts. Inside the cell, add a Text element that displays the preview.

// Example expression inside the Text element
Current cell's Blog Post's Full content:truncated to 150   // shows first 150 chars

If you stored a preview field instead:

// If you saved a preview field
Current cell's Blog Post's Preview

Optional: Auto-generate preview when creating the post

When the user clicks “Publish,” add a step in your workflow that sets the Preview field using Bubble’s truncation operator.

// In “Create a new Blog Post” workflow action
Preview = This Blog Post's Full content:truncated to 150

This keeps your previews consistent and fast to load.