# How to build a blog post preview in Bubble

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

## TL;DR

You can add a blog post preview feature in Bubble by managing a status field on your BlogPost data type with values like Draft, Preview, and Published. Authors see a preview button that renders the post exactly as it will look when published, without making it visible to the public. This tutorial covers the complete draft-to-preview-to-publish workflow.

## Overview: Adding Blog Post Preview in Bubble

This tutorial shows how to build a preview system for blog posts in your Bubble app. Authors can write a post, preview exactly how it will look to readers, and then publish it when ready. The preview is only visible to the author, not the public. We cover the data model, preview page, privacy rules, and the publish workflow. This is ideal for any content management system built in Bubble.

## Before you start

- A Bubble app with a basic blog setup (BlogPost data type)
- User authentication set up with author roles
- Basic familiarity with Bubble workflows and Privacy Rules
- A rich text editor element (optional but recommended)

## Step-by-step guide

### 1. Set up the BlogPost data type with status management

Go to the Data tab → Data types. If you do not already have a BlogPost type, create one. Add or verify these fields: title (text), content (text), author (User), status (text — default value Draft), slug (text), featured_image (image), published_date (date), and excerpt (text). The status field is key — it will have three possible values: Draft, Preview, and Published. Consider using an Option Set called PostStatus with these three values for type safety.

> Pro tip: Using an Option Set for status values prevents typos and makes it easy to add new statuses later (like Archived or Scheduled).

**Expected result:** A BlogPost data type exists with a status field that tracks whether a post is draft, preview, or published.

### 2. Build the post editor with a preview button

On your blog editor page, ensure you have Input elements for title, a Rich Text Editor for content, a File Uploader for the featured image, and an Input for the excerpt. Add two buttons at the bottom: Save Draft and Preview. The Save Draft button should create or update the BlogPost with status set to Draft. The Preview button should first save the current content (Make changes to the BlogPost) and then navigate to the preview page: Go to page blog-preview with data = Current Page's BlogPost.

**Expected result:** Authors can write content and click Preview to save and navigate to the preview page.

### 3. Create the preview page

Create a new page called blog-preview with the Page Type of Content set to BlogPost. Design this page to look exactly like your public blog post page — same layout, fonts, image sizing, and spacing. Display the BlogPost's title in a large heading, the content in a rich text display element, the featured image, the author's name, and the current date. Add a banner or badge at the top that says Preview — This post is not yet published to clearly distinguish it from the live version. Add two buttons: Edit (navigates back to the editor) and Publish (triggers the publish workflow).

> Pro tip: Copy the design from your public blog post page to ensure the preview is pixel-perfect. Any differences between preview and published view will confuse authors.

**Expected result:** A preview page renders the blog post exactly as it will appear when published, with clear preview indicators.

### 4. Restrict preview access with Privacy Rules

Go to Data tab → Privacy. On the BlogPost data type, create a Privacy Rule called Author can view drafts. Set the condition to This BlogPost's author is Current User. Grant permissions: Find this in searches = yes, View all fields = yes. Create another rule called Public can view published. Set the condition to This BlogPost's status is Published. Grant the same permissions. This means draft and preview posts are only visible to their author, while published posts are visible to everyone.

**Expected result:** Only the author can access the preview page for their unpublished posts. Published posts are visible to all users.

### 5. Create the publish workflow

On the preview page, create a workflow for When Button Publish is clicked. Add the action Make changes to Current Page's BlogPost. Set status to Published and published_date to Current date/time. Optionally add a confirmation popup before publishing (Show popup → Confirm Publish with a final Publish button inside). After publishing, navigate the user to the live blog post page: Go to page blog-post with data = Current Page's BlogPost. The post is now visible to all users based on the Privacy Rule you set up.

**Expected result:** Clicking Publish changes the post status to Published, sets the publish date, and redirects to the live post.

### 6. Add an unpublish and revert to draft option

On the live blog post page (visible only to the author via a conditional), add an Unpublish button. Create a workflow: Make changes to Current Page's BlogPost → set status to Draft. This removes the post from public search results immediately (due to Privacy Rules). On the blog editor page, add a dropdown or radio buttons that let the author switch between Draft and Preview statuses manually. This gives authors full control over the post lifecycle.

**Expected result:** Authors can unpublish a live post or revert it to draft status at any time.

## Complete code example

File: `Workflow summary`

```text
BLOG POST PREVIEW WORKFLOW SUMMARY
====================================

DATA TYPES:
  BlogPost
    - title (text)
    - content (text)
    - author (User)
    - status (Option Set PostStatus: Draft / Preview / Published)
    - slug (text)
    - featured_image (image)
    - published_date (date)
    - excerpt (text)

PRIVACY RULES (BlogPost):
  Rule 1: Author Access
    Condition: This BlogPost's author is Current User
    Permissions: Find in searches, View all fields
  Rule 2: Public Published
    Condition: This BlogPost's status is Published
    Permissions: Find in searches, View all fields

PAGE: blog-editor
  Elements: Title input, Rich Text Editor, Image uploader,
            Excerpt input, Save Draft button, Preview button
  
  Workflow 1: Save Draft
    Event: Button Save Draft clicked
    Action: Make changes to BlogPost
      title, content, excerpt, featured_image = form values
      status = Draft
  
  Workflow 2: Preview
    Event: Button Preview clicked
    Action 1: Make changes to BlogPost (save current edits)
      status = Preview
    Action 2: Go to page blog-preview
      Data: Current Page's BlogPost

PAGE: blog-preview (Type: BlogPost)
  Elements: Preview banner, title, content, image,
            author, date, Edit button, Publish button
  
  Workflow 3: Publish
    Event: Button Publish clicked
    Action 1: Make changes to Current Page's BlogPost
      status = Published
      published_date = Current date/time
    Action 2: Go to page blog-post
      Data: Current Page's BlogPost
  
  Workflow 4: Back to Edit
    Event: Button Edit clicked
    Action: Go to page blog-editor
      Data: Current Page's BlogPost

PAGE: blog-post (Type: BlogPost, public)
  Conditional: Show Unpublish button when
    Current Page's BlogPost's author is Current User
  
  Workflow 5: Unpublish
    Event: Button Unpublish clicked
    Action: Make changes to Current Page's BlogPost
      status = Draft
```

## Common mistakes

- **Using the same page for preview and published views without access control** — Without Privacy Rules, anyone with the URL could view unpublished drafts, potentially exposing unfinished content Fix: Set Privacy Rules so only the author can see posts with Draft or Preview status. Public users only see Published posts.
- **Not saving the post before navigating to preview** — If the author clicks Preview without saving, the preview shows stale content that does not reflect recent edits Fix: Always include a Make changes action before the Go to page action in the Preview workflow.
- **Designing the preview page differently from the public post page** — If the layouts differ, authors cannot accurately judge how their post will look when published Fix: Copy the exact design from your public blog post page to the preview page. Maintain both pages when making design changes.

## Best practices

- Use an Option Set for post statuses to prevent typos and ensure consistency
- Design the preview page to be pixel-identical to the published post page
- Always save content before navigating to the preview page
- Add a clear visual indicator (banner or badge) on the preview page so authors know it is not live
- Set Privacy Rules that restrict draft and preview posts to the author only
- Include a confirmation dialog before publishing to prevent accidental publishes
- Store the published_date separately from the created date so you can display accurate publish times

## Frequently asked questions

### Can I schedule a post to publish at a future date?

Yes. Add a scheduled_date field to your BlogPost type. Create a backend workflow that checks for posts where scheduled_date has passed and status is Scheduled, then changes their status to Published.

### How do I share a preview link with a collaborator?

Create a preview_token field on BlogPost with a unique random string. Build a preview URL that includes this token as a parameter. Add a Privacy Rule that allows access when the URL parameter matches the token.

### Can I have multiple draft versions of the same post?

Bubble does not have built-in version control. To support this, create a PostVersion data type linked to BlogPost and save each edit as a new version. The preview always shows the latest version.

### Will the preview show the same formatting as the published post?

Yes, as long as both pages use the same Rich Text display element with the same styling. Copy the layout exactly from your public post page to the preview page.

### How do I add SEO metadata to published posts?

Use Bubble's SEO settings on the blog post page. Set the Page title to Current Page BlogPost's title, and the meta description to the excerpt. These only apply to Published posts since drafts are not indexable.

### Can RapidDev help build a more advanced CMS?

Yes. RapidDev can help build full content management systems with features like collaborative editing, revision history, content approval workflows, and scheduled publishing.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/implement-a-blog-post-preview-feature-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/implement-a-blog-post-preview-feature-in-bubble