← Back to blogFramer Tips

Framer Staging and Preview Links: A Complete Guide

Framer staging preview

Framer staging refers to sharing your work-in-progress site through preview links before you publish it live. Every Framer project has a built-in preview URL that updates in real time, plus the option to publish to a staging subdomain for client review. This lets stakeholders see changes safely, without touching your production domain.

What Framer Staging Actually Means

Unlike traditional platforms where a staging environment is a separate server you provision and sync, Framer handles staging differently. There are two distinct ways to show unpublished or pre-release work, and confusing them causes most of the friction teams run into.

The first is the preview link, which reflects the exact state of your canvas, including unpublished edits. The second is a staging publish to a free .framer.app or .framer.website subdomain, which behaves like a real published site but lives on a non-production URL. Knowing which one to send, and when, is the core skill here.

Open any project in Framer and click the Preview button in the top toolbar. This opens an interactive preview in a new tab that mirrors your canvas state. Animations run, breakpoints respond, CMS content loads, and forms behave as they will in production. The key detail is that this preview reflects unpublished changes the moment you make them.

You can share this preview by copying the URL, but be careful. The preview link is tied to your editing session and works best for quick internal checks. For external review where the recipient should not see half-finished edits, a staging publish is the safer choice.

Staging Publishes: A Stable Snapshot for Review

When you click Publish in Framer, you choose a destination. Before you attach a custom domain, your site publishes to a free Framer subdomain like your-project.framer.app. Treat this as your staging environment. It only updates when you click Publish again, so reviewers always see an intentional snapshot rather than a live edit stream.

This separation matters for client work. You can keep designing on the canvas while the staging URL stays frozen on the last approved version. When the client signs off, you publish to the custom domain and the production site goes live.

How to Set Up a Staging Workflow in Framer

A clean staging workflow keeps clients confident and protects your live site. Here is a practical setup that works for solo designers and agencies alike.

  1. Publish to the free subdomain first. Before connecting any custom domain, publish to your-project.framer.app. This becomes your stable review URL.
  2. Password-protect the staging site. In Site Settings, enable a password so the staging URL is not crawlable or publicly browsable while in review.
  3. Share the staging link, not the preview link. Send clients the published subdomain so they review a deliberate snapshot, not your active canvas.
  4. Collect feedback, then republish. Make edits on the canvas, click Publish again, and the staging URL refreshes with the new version.
  5. Promote to production. Once approved, connect the custom domain and publish. The same project now serves the live site.

Using Password Protection on Staging

Framer lets you password-protect an entire published site from Site Settings. For staging, this is the closest thing to a private environment. Set a simple shared password, send it alongside the link, and search engines will not index the page. When you move to production, remove the password so the live site is accessible and crawlable.

One caution: password protection applies at the site level on a given publish target. If you are using the free subdomain as staging and a custom domain as production from the same project, plan your publish flow so you do not accidentally lock the live site.

Both tools exist for a reason. Use this quick guide to pick the right one.

  • Internal design check: Preview link. Fast, reflects your latest unpublished edits, no publish step needed.
  • Testing animations and interactions: Preview link. It runs the real interactive build.
  • Client review: Staging publish to the free subdomain. Stable, password-protected, and intentional.
  • Stakeholder sign-off before launch: Staging publish. Everyone reviews the same frozen version.
  • QA across devices: Staging publish, because it tests the actual served output including performance.

Testing Before You Publish: A Checklist

Staging is only useful if you actually test the right things. Before promoting a staging build to production, run through this list inside the preview and on the staging URL.

  • Responsive breakpoints: Check desktop, tablet, and phone layouts. Framer breakpoints can hide elements that need attention, so review each one. See our Framer breakpoints guide for setup details.
  • Forms: Submit a real test entry and confirm it lands where it should.
  • CMS content: Verify collection pages render, slugs resolve, and empty states look right.
  • Links: Click every navigation item and CTA. Broken internal links are the most common staging miss.
  • Animations and scroll effects: Confirm they fire at the right scroll positions and do not cause layout shift.
  • Page speed: Run the staging URL through a speed test. Heavy images are the usual culprit, so review our Framer mobile optimization guide before launch.
  • SEO basics: Confirm meta titles, descriptions, and favicons are set per page.

Common Staging Mistakes to Avoid

A few patterns trip up teams new to Framer staging. Watch for these.

The preview link updates as you edit. If you send it to a client and then start reworking a section, they may refresh and see a broken layout. Always send the published staging URL for external review.

Forgetting to Password-Protect Staging

An unprotected staging subdomain can be indexed by search engines, which creates duplicate-content confusion once your real site launches. Add a password during review and remove it only on the production domain.

Skipping a Final Production Pass

Staging and production can differ in subtle ways once a custom domain and analytics are attached. After you go live, do one more pass on the production URL to confirm tracking fires, the SSL certificate is active, and the domain redirects correctly.

Staging for Multi-Page and CMS-Heavy Sites

Simple marketing sites are easy to stage, but larger projects need more discipline. When your site pulls dozens or hundreds of pages from a CMS collection, a quick visual glance is not enough. You need a structured way to confirm that every dynamically generated page renders correctly before the whole set goes live.

Start by reviewing the collection template page in preview, because every CMS item inherits from it. If the template is solid, individual items usually follow. Then spot-check a sample of real entries on the staging URL: pick the longest piece of content, the shortest, one with an image, and one without. These edge cases reveal layout problems that the average entry hides. Empty fields are the classic trap, so confirm that a missing image or absent subtitle does not break the layout.

For sites with filtered or paginated collection lists, test the filtering and pagination on the staging publish rather than only in preview, since these features depend on the served build behaving correctly. A staging environment that mirrors production closely is the only honest way to catch these issues before customers do.

Coordinating Staging Across a Team

When several people touch a project, staging needs clear ownership. Decide who has authority to publish to staging and who can promote staging to production. Without that rule, two collaborators can publish conflicting states minutes apart and confuse the client reviewing the link.

A workable model assigns one person as the publisher for each review cycle. Everyone else edits the canvas, the publisher pushes a deliberate staging snapshot, and the client reviews that single version. Once feedback lands, the same publisher applies changes and republishes. This keeps the staging URL meaningful instead of a moving target. Pair this with a shared note of what changed in each staging push, so reviewers know exactly what to look at rather than re-checking the entire site every cycle.

Where Framer Staging Fits in a Professional Build

At Framer Websites, staging is a structured step in every project, not an afterthought. We publish to a password-protected staging subdomain, walk clients through it on a review call, and only promote to production once the work is signed off. This keeps the live site stable while design and revisions happen safely in the background.

If you are managing a complex build with a team, combine staging with Framer’s collaboration features so multiple people can edit while a single staging URL stays the source of truth for reviewers. If you would rather hand the whole process off, our team builds, stages, and launches sites end to end. You can see examples on our work page or talk through your project on a quick call.

Frequently Asked Questions

Does Framer have a true staging environment?

Framer does not use a separate staging server like traditional hosting. Instead, you stage by publishing to a free Framer subdomain and password-protecting it, which gives you a stable review URL that updates only when you publish. The preview link covers live, in-progress checking.

Preview links are not strongly access-controlled and reflect your live canvas, so they are best for internal use. For private external review, publish to a staging subdomain and enable password protection in Site Settings so the page is not indexed or browsable without the password.

Can I keep editing while a client reviews a staging site?

Yes. A staging publish freezes the site at the moment you publish, so you can continue editing the canvas without changing what the client sees. The staging URL only updates the next time you click Publish, which makes client review predictable.

Ready to build your Framer website?

Book a free strategy call to discuss your project.