Framer to code. From your toolbar.

• Google Chrome

  Available
  1. Open the Chrome Web Store listing.
  2. Click Add to Chrome, then Add extension.
  3. Open the puzzle-piece menu in the toolbar and pin Deframer.

• Microsoft Edge

  Available
  1. Open the Microsoft Edge Add-ons listing in Edge.
  2. Click Get, then Add extension.
  3. Open the Extensions menu (the puzzle piece) and turn on Show in toolbar for Deframer.

• Brave

  Available
  1. Open the Chrome Web Store listing in Brave.
  2. Click Add to Brave, then Add extension.
  3. Pin Deframer from the extensions menu. Brave Shields don't affect it.

• Opera

  Available
  1. Install Opera's Install Chrome Extensions add-on once.
  2. Open the Chrome Web Store listing and click Add to Opera.
  3. Confirm on Opera's extensions page, then pin Deframer from the cube menu.

• Arc and Vivaldi

  Available
  1. Open the Chrome Web Store listing.
  2. Click Add to Chrome, then Add extension. Both browsers use Chrome's store as their own.
  3. In Arc, find it under the extensions icon in the sidebar; in Vivaldi, in the toolbar's extensions menu.

• Firefox and Safari

  Coming later
  1. Not listed yet. A Firefox version is on its way to Firefox Add-ons; Safari comes after it.
  2. Meanwhile, convert from any browser on deframer.co: paste the site's address and you get the same result.

1. 01

   Connect your account

   Open a published Framer site and click the Deframer icon. Choose Connect account. You need a free Deframer account; signing in happens on deframer.co, never in the popup.

   

2. 02

   Approve the code on deframer.co

   The popup shows a short code and opens an approval page. Check that both show the same code and choose Allow. You can close the popup: Deframer finishes signing in on its own, and the icon shows a check when it's done.

   

3. 03

   Pick a framework and convert

   On a Framer site the popup shows the site, whether it's verified for your account, and your choices: Next.js, TanStack Start, Astro, React Router or Vite, and whether images, fonts and videos stay on Framer's CDN or go into the project. Click Convert. Converting is free.

   

4. 04

   Follow it, then preview and download

   The popup follows each step. Close it if you like: the icon shows a check when the project is ready. Then choose Preview & download on Deframer to compare it side by side with your site and download the code on deframer.co.

   

activeTab

Read the tab you clicked Deframer on, and only that tab, only then.

scripting

Look for Framer's markers in that tab (its generator tag and Framer script addresses). It changes nothing on the page.

storage

Keep you signed in, remember conversions in progress and your last framework and assets choice.

alarms

Finish a sign-in or a conversion in the background after you close the popup.

Site access (optional)

Only if you choose Allow on “Recognise Framer sites as you browse”: the icon then lights up on Framer sites by itself. The check runs on the device; nothing is sent until you open Deframer.

Full details: the privacy policy. Revoke the extension any time in Dashboard → Connected apps.

• “Not a Framer site” on a Framer siteReload the tab once it has finished loading and click again. Sites behind a proxy can hide Framer's markers: paste the address on deframer.co instead.
• The icon isn't in the toolbarOpen the extensions menu (the puzzle piece) and pin Deframer. In Edge, turn on Show in toolbar.
• Signing in doesn't finishMake sure you chose Allow on deframer.co with the same code. Codes expire after 10 minutes: click Connect account again for a new one.
• Edge or Opera won't install itIn Edge, install from Edge Add-ons. In Opera, add its Install Chrome Extensions add-on first (see Install above).
• A conversion failedThe icon shows !. Open the popup to see why, then convert again. If it keeps failing, contact us with the site's address.
• A password-protected siteConvert it on deframer.co, where you can enter the site's password.