Previewing in the browser

Note: This article refers to the Framer desktop app. Learn more about the differences between the Framer web and desktop app here.

Here’s a secret: the designs you make in Framer are actually websites. When you open a project in the Framer desktop app, the app spins up a local web server to host that website as your project’s preview.

While the app’s Preview Window runs a version of Safari, you can also view your preview outside of the app, using any browser you’d like.

All you’ll need to do is:

  1. Get your project's preview URL (see below)
  2. Visit that URL in your browser of choice

The preview you see in the other browser will be a mirror of the app’s Preview Window, meaning that it will stay in sync with the project as you work on your Framer desktop project and change as you select different frames on the canvas.

Getting your project's preview URL

Framer uses a standard URL scheme for preview URLs. It works like this:

  • If you have only one Framer desktop project open, then the project’s preview will be available at localhost:4567.
  • If you then open a second project, then that project will be available at localhost:4568, and so on.

If you’d like to skip the mental math, check out the What’s my preview URL? Package.

Why use a separate browser?

There are a few reasons why you might want (or need) to use a separate browser.

  • You’d like to inspect your project using a different browser's inspection tool
  • Your prototype requires access to secure browser features, such as a geolocation service
  • You’d like to use a certain browser's extensions or plugins with your project