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.
Prerequisites
- 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
Set up the BlogPost data type with status management
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.
Build the post editor with a preview button
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.
Create the preview page
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.
Restrict preview access with Privacy Rules
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.
Create the publish workflow
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.
Add an unpublish and revert to draft option
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 working example
1BLOG POST PREVIEW WORKFLOW SUMMARY2====================================34DATA TYPES:5 BlogPost6 - title (text)7 - content (text)8 - author (User)9 - status (Option Set PostStatus: Draft / Preview / Published)10 - slug (text)11 - featured_image (image)12 - published_date (date)13 - excerpt (text)1415PRIVACY RULES (BlogPost):16 Rule 1: Author Access17 Condition: This BlogPost's author is Current User18 Permissions: Find in searches, View all fields19 Rule 2: Public Published20 Condition: This BlogPost's status is Published21 Permissions: Find in searches, View all fields2223PAGE: blog-editor24 Elements: Title input, Rich Text Editor, Image uploader,25 Excerpt input, Save Draft button, Preview button26 27 Workflow 1: Save Draft28 Event: Button Save Draft clicked29 Action: Make changes to BlogPost30 title, content, excerpt, featured_image = form values31 status = Draft32 33 Workflow 2: Preview34 Event: Button Preview clicked35 Action 1: Make changes to BlogPost (save current edits)36 status = Preview37 Action 2: Go to page blog-preview38 Data: Current Page's BlogPost3940PAGE: blog-preview (Type: BlogPost)41 Elements: Preview banner, title, content, image,42 author, date, Edit button, Publish button43 44 Workflow 3: Publish45 Event: Button Publish clicked46 Action 1: Make changes to Current Page's BlogPost47 status = Published48 published_date = Current date/time49 Action 2: Go to page blog-post50 Data: Current Page's BlogPost51 52 Workflow 4: Back to Edit53 Event: Button Edit clicked54 Action: Go to page blog-editor55 Data: Current Page's BlogPost5657PAGE: blog-post (Type: BlogPost, public)58 Conditional: Show Unpublish button when59 Current Page's BlogPost's author is Current User60 61 Workflow 5: Unpublish62 Event: Button Unpublish clicked63 Action: Make changes to Current Page's BlogPost64 status = DraftCommon mistakes when building a blog post preview in Bubble
Why it's a problem: Using the same page for preview and published views without access control
How to avoid: Set Privacy Rules so only the author can see posts with Draft or Preview status. Public users only see Published posts.
Why it's a problem: Not saving the post before navigating to preview
How to avoid: Always include a Make changes action before the Go to page action in the Preview workflow.
Why it's a problem: Designing the preview page differently from the public post page
How to avoid: 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
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I am building a blog in Bubble.io and need a post preview feature. I want authors to write drafts, preview how they look, and publish when ready. Only the author should see unpublished posts. Can you outline the data type, privacy rules, and workflows needed?
Add a blog post preview feature to my app. I need a BlogPost data type with status management (Draft, Preview, Published), a preview page that shows the post as it will appear when published, and privacy rules so only the author can see unpublished posts.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation