How to Preview Your Webflow Site Before Publishing (with Gapflow for Advanced Testing)

Before hitting the “Publish” button, it’s essential to preview your Webflow site to ensure everything looks and works perfectly—from layout and animations to CMS content and custom code.

In this guide, you’ll learn:

• The 3 ways to preview in Webflow
• How to share staging previews with clients or teammates
• How Gapflow helps test advanced logic, custom code, and CMS features before you publish to the live site

👁️ Why Previewing Matters in Webflow

Previewing lets you:

• Catch layout issues or responsive bugs
• Test animations, interactions, and link logic
• View CMS content dynamically in real context
• Safely debug custom scripts (JS, CSS, HTML)
• Share your progress with collaborators

Luckily, Webflow makes previewing easy—even before going live.

🔍 Option 1: Preview in Designer (Quick Preview)

The Designer Preview Mode is the fastest way to check your layout and interactions:

How to Use:

• In the Webflow Designer, click the eye icon in the top-left corner.
• This activates Preview Mode, letting you:
  • Click links
  • Hover on elements
  • See scroll behavior
  • Test animations

✅ Pros:

• Instant feedback
• Fast for layout and interactions
• No need to publish

❌ Cons:

• Can’t test on real URLs or different devices
• Doesn't show true hosting environment

🌐 Option 2: Publish to Webflow Staging Domain

For a live environment preview (without affecting your main site), publish to Webflow’s free staging domain.

How to Use:

1. Click Publish in the top-right
2. Select your webflow.io subdomain (e.g., your-site.webflow.io)
3. Hit Publish

Now, you can view your site in a real browser environment and share the URL with others.

✅ Pros:

• Test on real devices
• Share with clients or teammates
• Includes CMS and custom code

❌ Cons:

• Still technically live (visible to anyone with the link)
• Not password protected unless set manually

📱 Bonus: Responsive Previews in Designer

Click the screen-size icons at the top of the Designer to preview your site at:

• Desktop
• Tablet
• Mobile Landscape
• Mobile Portrait

This helps you test how your layout adapts across breakpoints—before publishing.

🧪 What If You’re Using Custom Code or Complex CMS Logic?

This is where things get tricky. If your Webflow project includes:

• JavaScript logic (e.g., filters, sliders, conditionals)
• Custom CMS behavior (like dynamic sorting)
• Third-party script integrations
• User-based conditions

The basic preview may not be enough. You’ll want a way to test everything before it hits production.

🚀 Introducing Gapflow: Advanced Preview & Logic Testing for Webflow

Gapflow is a Webflow App that allows developers and power users to write, inject, and test custom code—inside the Webflow Designer—without relying on third-party embeds or hacks.

How Gapflow Helps You Preview Smarter:

Use CaseNative PreviewGapflow EnhancementTest custom JS filtersLimited✅ Works in staging & previewInject CMS-aware interactionsNo✅ YesAdd debug output or console logsNo✅ Developer tools supportTry reusable logic before publishingNo✅ Safe sandbox previewing

🔐 Want to Share a Preview But Keep It Private?

You can password-protect your staging site via:

• Project Settings → Password Protection
• Enable protection on the staging domain (your-site.webflow.io)
• Share credentials with your team or clients

It’s a great way to preview work privately.

🧠 Best Practices for Previewing in Webflow

• ✅ Test on multiple breakpoints (especially mobile!)
• ✅ Use Webflow’s staging link for real-world behavior
• ✅ Enable password protection for private reviews
• ✅ Use Gapflow to test advanced logic before launch
• ✅ Ask non-technical users to preview and give feedback

🎯 Final Thoughts

Webflow gives you powerful ways to preview before publishing, but if your project includes advanced interactivity, custom code, or dynamic CMS logic, you’ll need more than just the built-in preview tools.

Gapflow bridges that gap—letting you test real logic, scripts, and behaviors inside your Webflow project safely, before going live.

‍