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

.webp)

**TLDR:**

Webflow lets you preview your website before publishing using the built-in Designer Preview mode or shareable Staging links. For dynamic content, custom code, and CMS logic, Gapflow helps you test advanced features without needing to publish live.

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**](/content/about/index.html) 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 Case                                     | Native Preview | Gapflow Enhancement                     |
|---------------------------------------------|----------------|----------------------------------------|
| Test custom JS filters                       | Limited        | ✅ Works in staging & preview          |
| Inject CMS-aware interactions                 | No             | ✅ Yes                                 |
| Add debug output or console logs            | No             | ✅ Developer tools support             |
| Try reusable logic before publishing         | No             | ✅ 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.