Webflow sync, pageviews & more.
NEW

How can I preview draft blogs in Webflow Designer mode?

TL;DR
  • Open Webflow Designer, select the draft blog post from the CMS panel, then use Preview mode (eye icon) to view it.
  • Remove any filters that hide non-published items to ensure the draft appears in Collection Lists; drafts can't be previewed via live or shareable URLs.

To preview draft blog posts in Webflow, you need to use the Designer’s preview mode with a little setup, since Webflow doesn’t show draft CMS items on the live site or in published previews by default.

1. Understand What "Draft" Means in Webflow

  • Draft CMS items are not published and won't display on the live site or in read-only “View Site” previews.
  • The Webflow Designer view shows all items, including drafts, allowing you to design and preview them before publishing.

2. Use Designer to Preview Drafts

  • Go to Webflow Designer.
  • Navigate to the CMS Collection Page for your blog posts.
  • On the left CMS panel, select your blog post collection.
  • Locate the draft blog post—it will be marked with a “Draft” tag.
  • Click on the draft item, and Webflow will load that post into the Designer for preview.
  • Use the eye icon (Preview mode) in the top toolbar to simulate how the post will look live.

3. Adjust Conditional Visibility if Needed

  • If you’ve added filter conditions on collection lists to only show Published items, the draft won’t show.
  • Temporarily remove or adjust filters so drafts are visible in the Designer if using Collection Lists (e.g., on a Blog Index page layout).

4. Access by Direct URL in Designer (Not Live)

  • Unlike published items, draft blog posts do not have a public URL, and you cannot preview them using a share link or staging domain until they are published.
  • All previewing of draft posts must be done inside the Designer only.

Summary

You can preview draft blog posts directly inside Webflow Designer by selecting the post from the CMS panel and using Preview mode. Drafts are not accessible via live or shareable URLs until published.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Has there been an update or change of keys in Webflow to move a heading and image into the same grid box using the Ctrl + drag on Windows method mentioned in the Cards video of the Webflow 101 course?
Is it possible to add and edit the style of an element from CMS content in Webflow, such as aligning headers differently on blog posts compared to other pages?
How can I create a membership portal within Webflow using Authpro integration?
How can I add jQuery scripts like a slider or toggle navigation to Webflow and preview the effect?
How can I fix the padding and font color on a Webflow select dropdown?
Is it better to style for mobile-first in Webflow if most of my users are viewing my website on mobile devices, or is it easier to design on desktop and create responsive layouts for mobile? What are people's thoughts on this?
How can I resize an image in Webflow?
Can animated text be created in Webflow?
How do I use the "Fill" - "Cover" option in Webflow to fit an image within a div block without resorting to a background image?
How can I fix the misalignment issue with the arrow on the first collection item on the projects page in Webflow?
What are some basic tips for using Webflow?
How can I create a portfolio in Webflow where users can click on an image within a project template page to view a larger version? Additionally, how can I apply a dark shadow to the entire screen when the image is clicked, focusing only on the image?
How can I remove the background color from the dropdown link in Webflow and make it transparent while still keeping the text visible?
What is the main reason you started using Airtable in combination with Webflow, and what specific issues or problems does it help you solve?
Is there a reference or page that lists these .svg icons in Webflow? Is a membership required to access them? Is there anyone who can share icons like the example provided?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?
How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?
How can I fix the issue with the scroll not being smooth on my mobile device (iPhone + Safari) in Webflow?
How can I prevent scroll when my nav is open in Webflow using code? The scroll is disabled correctly when I change the class name of the second 'menu', but it does not get activated when the menu is closed. It doesn't work at all if both class names are the same. Can anyone provide assistance with this issue?
How can I add date filtering to my current list of filters in Webflow using Finsweet CMS Filtering?
How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?
How can I configure Webflow forms to exclude empty or unchecked checkboxes when sending emails? Additionally, is it possible to customize the email text for checked checkboxes, such as using "réservé" instead of "true"?
How can I dynamically redirect to a CMS created after form submission in Webflow?
How can I make the menu close when a link is clicked in Webflow?
How can I hide the "no items found" empty field in Webflow for a second multi-image gallery on certain pages?
How can I implement swipe functionality between tab panes on mobile using custom code in Webflow?
How can I disable right-clicking on images to prevent downloading on my Webflow portfolio website?
Is there a way to fix the issue of values from Textareas with multiple lines not getting parsed correctly in Webflow Logic when posting to an external API?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!