How can I preview draft blogs in Webflow and see the same styling that will be displayed on the client's website once published?
TL;DR
- Use the Webflow Editor to preview draft posts with accurate live styling by accessing them through the CMS section and opening the draft preview.
- Alternatively, temporarily schedule the draft or create a custom filtered preview page, though only the Editor ensures true draft previews with full styling.
To preview draft blog posts in Webflow with the same styling as when published, you need to use Webflow Editor or set up a filtered Collection Page. Here's how to do it.
1. Use Webflow Editor to Preview Drafts
- Open Webflow Editor from the Webflow Dashboard by selecting the site and clicking Editor.
- In the Editor, navigate to the CMS Collection (e.g., Blog Posts).
- Locate the draft post and click Open Preview or select View Draft.
- The layout and design will match what’s defined in the Webflow Designer, using live site styles.
Note: Only site collaborators with Editor access can use this method. You can't preview drafts from within the Designer.
2. Temporarily Set Post to Scheduled or Published (If Safe)
If you don’t use the Editor and need a quick Designer preview:
- Change the draft to Scheduled for a future date/time.
- Visit the slug URL of the post on the live or staging domain.
- Webflow will render the fully styled version using actual page layout and styles.
Set the item back to draft if you’re not ready to publish.
3. Alternative: Use a Custom Filtered Preview Page (Advanced)
- Create a new static page (e.g.,
/preview-blog) and add a Collection List bound to your blog posts. - Filter the Collection List to show the specific draft post by a unique identifier (e.g., slug or custom Preview Boolean switch).
- This method allows in-Designer preview, but does not support true draft states, since Webflow doesn’t render draft items in the Designer or live Collections.
4. Styling Note
- All posts, drafts or published, use the same class styles from your CMS Template Page.
- As long as your CMS Template is styled correctly, the preview will match the published version.
Summary
To preview draft blogs in Webflow with accurate styling, use the Webflow Editor—it renders draft content with live site styles. If that's not possible, temporarily schedule the post or use a filtered Collection List on a custom page, but only Editor access guarantees the most accurate preview.