deframer
⌘K
HomeLog inSign Up

Use deframer

Export a site

deframer create turns a published Framer site into a running Next.js app.

deframer create https://your-site.framer.website ./my-site

The first argument is the address of the published site. The second is a new folder for the app; deframer creates it.

What happens

  1. deframer checks your account can use deframer.
  2. It downloads the pages of the published site and writes a Next.js app to the folder.
  3. It installs the app's packages, checks the types and makes a production build.
  4. It starts the app with next start at http://127.0.0.1:3000. The app keeps running after the command ends.
  5. It opens your app and the published site side by side and compares them.

Read the result

The command ends with ✔ deframer: done, or ✘ deframer: and the step that failed. Then it prints:

LineMeaning
running atWhere the app is running, and its process ID so you can stop it.
appThe folder and how many pages it has.
checksErrors found in your app: hydration, console, failed requests, and requests still sent to Framer.
parityHow closely your app matches the published site, compared in tiles. Lower is closer.
reportThe full report, with the details of every check.
kept your changesOn a re-export into an existing app: the files you edited or added, which deframer left as they are. See Make it yours.

Options

OptionWhat it does
--port <port>Port to run the app on. Default 3000.
--no-startStop after the production build. Nothing is left running.
--no-verifyStart the app without comparing it with the published site.
--allow-host <host>Also download site code from this host. Repeat for more hosts.
--colors <file>A JSON file with the site's Framer color styles, for readable color names in the code.
--jsonPrint the result as JSON, for scripts.

Sites that load code from other hosts

Some sites load code from a host besides Framer's, such as cdn.jsdelivr.net. deframer only downloads from hosts you allow, so name that host:

deframer create https://your-site.framer.website ./my-site --allow-host cdn.jsdelivr.net

Run the app later

The folder is a normal Next.js app. From inside it:

npx next start

Change it

Every file in the app is yours to edit: texts, images, sections, colors and pages. See Make it yours.

Your plan decides whether you may use the exported site commercially. See Plans and billing.