50:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/3z6ke99nzr4_e.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/1fkcqskfw4hol.js","/creators-assets/_next/static/immutable/chunks/3ixl4aqv6ylo7.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/2di2v55rtz-8i.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/00owjoob9gqs9.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js"],"S"] 51:T886,

Stop rebuilding your Framer designs by hand

You spent days perfecting a component in Framer. Now it has to live in your React app, and someone gets to build the whole thing again by hand.

Framer Code kills that second build. Select any component in your Framer project and export it as real React code running on the actual Framer runtime. Animations, hover states, and breakpoint variants survive because nothing gets approximated.

What you get

- Typed React components that drop into Next.js, Remix, or any modern React project

- Animations, variants, and interactions preserved

- Responsive variants that switch automatically at breakpoints

- Full site exports reconstructed as routes, with working links and page backgrounds intact

- A complete runnable project in every zip: Vite, React, and Tailwind configured for you

- Live preview in StackBlitz before you download anything

How it works

1. Open Framer Code plugin inside Framer

2. Sign in with your email. We send a code, so there is no password to forget

3. Select a component or your whole site

4. Export

5. Preview the result live in StackBlitz, or download the zip

6. Install the framercode runtime, drop the code into your project, and ship

npm install framercode react react-dom

Built for developers who design

Framer Code is for people who like designing visually in Framer but want full ownership of the final application code. Agencies handing work to client dev teams. Solo builders shipping their own products. Anyone who has watched a finished design turn into a week of rebuilding.

Plans

- Free: 5 exports per month

- Pro ($19/mo): 200 exports per month

- Team ($99/mo): unlimited exports, commercial use, unlimited developers

Start with the free plan. Preview any export in StackBlitz first, so you always know exactly what you are getting before it touches your codebase.

52:T886,

Stop rebuilding your Framer designs by hand

You spent days perfecting a component in Framer. Now it has to live in your React app, and someone gets to build the whole thing again by hand.

What you get

- Typed React components that drop into Next.js, Remix, or any modern React project

- Animations, variants, and interactions preserved

- Responsive variants that switch automatically at breakpoints

- Full site exports reconstructed as routes, with working links and page backgrounds intact

- A complete runnable project in every zip: Vite, React, and Tailwind configured for you

- Live preview in StackBlitz before you download anything

How it works

1. Open Framer Code plugin inside Framer

2. Sign in with your email. We send a code, so there is no password to forget

3. Select a component or your whole site

4. Export

5. Preview the result live in StackBlitz, or download the zip

6. Install the framercode runtime, drop the code into your project, and ship

npm install framercode react react-dom

Built for developers who design

Plans

- Free: 5 exports per month

- Pro ($19/mo): 200 exports per month

- Team ($99/mo): unlimited exports, commercial use, unlimited developers

Start with the free plan. Preview any export in StackBlitz first, so you always know exactly what you are getting before it touches your codebase.

4f:["$","$L50",null,{"value":{"fallback":{"$inf$activity-creator-407febbd-f8f7-4ca9-bdca-9bdcdafdf749-all:/unified/creator/407febbd-f8f7-4ca9-bdca-9bdcdafdf749/activity/":[{"data":[{"id":"01a0860b-685b-7685-8c69-e314ea80d93b","type":"plugin.created","target":{"type":"plugin","id":"1573","preview":"Framer Code","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/407febbd-f8f7-4ca9-bdca-9bdcdafdf749/01a09a16-ca2a-70ba-8ee8-36a3c0dd16c4.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"407febbd-f8f7-4ca9-bdca-9bdcdafdf749","name":"Stringhost","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/407febbd-f8f7-4ca9-bdca-9bdcdafdf749/2z94zy65","slug":"stringhost","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"plugin","visibility":"public","startedAt":"2026-09-09T12:01:29.691Z","latestAt":"2026-09-09T12:01:29.691Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:407febbd-f8f7-4ca9-bdca-9bdcdafdf749:/unified/posts/?creator=407febbd-f8f7-4ca9-bdca-9bdcdafdf749&with=reposts":[{"data":[{"id":"01a0860b-6638-744e-bd46-32102771eba1","title":null,"body":"$51","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Stop rebuilding your Framer designs by hand","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"You spent days perfecting a component in Framer. Now it has to live in your React app, and someone gets to build the whole thing again by hand."}]},{"type":"paragraph","content":[{"type":"text","text":"Framer Code kills that second build. Select any component in your Framer project and export it as real React code running on the actual Framer runtime. Animations, hover states, and breakpoint variants survive because nothing gets approximated."}]},{"type":"paragraph","content":[{"type":"text","text":"What you get","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"- Typed React components that drop into Next.js, Remix, or any modern React project"}]},{"type":"paragraph","content":[{"type":"text","text":"- Animations, variants, and interactions preserved"}]},{"type":"paragraph","content":[{"type":"text","text":"- Responsive variants that switch automatically at breakpoints"}]},{"type":"paragraph","content":[{"type":"text","text":"- Full site exports reconstructed as routes, with working links and page backgrounds intact"}]},{"type":"paragraph","content":[{"type":"text","text":"- A complete runnable project in every zip: Vite, React, and Tailwind configured for you"}]},{"type":"paragraph","content":[{"type":"text","text":"- Live preview in StackBlitz before you download anything"}]},{"type":"paragraph","content":[{"type":"text","text":"How it works","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"1. Open "},{"type":"text","text":"Framer Code","marks":[{"type":"bold"}]},{"type":"text","text":" plugin inside Framer"}]},{"type":"paragraph","content":[{"type":"text","text":"2. Sign in with your email. We send a code, so there is no password to forget"}]},{"type":"paragraph","content":[{"type":"text","text":"3. Select a component or your whole site"}]},{"type":"paragraph","content":[{"type":"text","text":"4. Export"}]},{"type":"paragraph","content":[{"type":"text","text":"5. Preview the result live in StackBlitz, or download the zip"}]},{"type":"paragraph","content":[{"type":"text","text":"6. Install the "},{"type":"text","text":"framercode","marks":[{"type":"code"}]},{"type":"text","text":" runtime, drop the code into your project, and ship"}]},{"type":"paragraph","content":[{"type":"text","text":"npm install framercode react react-dom","marks":[{"type":"code"}]}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Built for developers who design","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Framer Code is for people who like designing visually in Framer but want full ownership of the final application code. Agencies handing work to client dev teams. Solo builders shipping their own products. Anyone who has watched a finished design turn into a week of rebuilding."}]},{"type":"paragraph","content":[{"type":"text","text":"Plans","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Free:","marks":[{"type":"bold"}]},{"type":"text","text":" 5 exports per month"}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Pro ($19/mo):","marks":[{"type":"bold"}]},{"type":"text","text":" 200 exports per month"}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Team ($99/mo):","marks":[{"type":"bold"}]},{"type":"text","text":" unlimited exports, commercial use, unlimited developers"}]},{"type":"paragraph","content":[{"type":"text","text":"Start with the free plan. Preview any export in StackBlitz first, so you always know exactly what you are getting before it touches your codebase."}]}]},"author":{"framerUserId":"407febbd-f8f7-4ca9-bdca-9bdcdafdf749","name":"Stringhost","slug":"stringhost","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/407febbd-f8f7-4ca9-bdca-9bdcdafdf749/2z94zy65","followed":false,"followsYou":false},"media":[],"resources":[{"id":"1573","resolved":true,"title":"Framer Code","body":"$52","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Stop rebuilding your Framer designs by hand","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"You spent days perfecting a component in Framer. Now it has to live in your React app, and someone gets to build the whole thing again by hand."}]},{"type":"paragraph","content":[{"type":"text","text":"Framer Code kills that second build. Select any component in your Framer project and export it as real React code running on the actual Framer runtime. Animations, hover states, and breakpoint variants survive because nothing gets approximated."}]},{"type":"paragraph","content":[{"type":"text","text":"What you get","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"- Typed React components that drop into Next.js, Remix, or any modern React project"}]},{"type":"paragraph","content":[{"type":"text","text":"- Animations, variants, and interactions preserved"}]},{"type":"paragraph","content":[{"type":"text","text":"- Responsive variants that switch automatically at breakpoints"}]},{"type":"paragraph","content":[{"type":"text","text":"- Full site exports reconstructed as routes, with working links and page backgrounds intact"}]},{"type":"paragraph","content":[{"type":"text","text":"- A complete runnable project in every zip: Vite, React, and Tailwind configured for you"}]},{"type":"paragraph","content":[{"type":"text","text":"- Live preview in StackBlitz before you download anything"}]},{"type":"paragraph","content":[{"type":"text","text":"How it works","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"1. Open "},{"type":"text","text":"Framer Code","marks":[{"type":"bold"}]},{"type":"text","text":" plugin inside Framer"}]},{"type":"paragraph","content":[{"type":"text","text":"2. Sign in with your email. We send a code, so there is no password to forget"}]},{"type":"paragraph","content":[{"type":"text","text":"3. Select a component or your whole site"}]},{"type":"paragraph","content":[{"type":"text","text":"4. Export"}]},{"type":"paragraph","content":[{"type":"text","text":"5. Preview the result live in StackBlitz, or download the zip"}]},{"type":"paragraph","content":[{"type":"text","text":"6. Install the "},{"type":"text","text":"framercode","marks":[{"type":"code"}]},{"type":"text","text":" runtime, drop the code into your project, and ship"}]},{"type":"paragraph","content":[{"type":"text","text":"npm install framercode react react-dom","marks":[{"type":"code"}]}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Built for developers who design","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Framer Code is for people who like designing visually in Framer but want full ownership of the final application code. Agencies handing work to client dev teams. Solo builders shipping their own products. Anyone who has watched a finished design turn into a week of rebuilding."}]},{"type":"paragraph","content":[{"type":"text","text":"Plans","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Free:","marks":[{"type":"bold"}]},{"type":"text","text":" 5 exports per month"}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Pro ($19/mo):","marks":[{"type":"bold"}]},{"type":"text","text":" 200 exports per month"}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Team ($99/mo):","marks":[{"type":"bold"}]},{"type":"text","text":" unlimited exports, commercial use, unlimited developers"}]},{"type":"paragraph","content":[{"type":"text","text":"Start with the free plan. Preview any export in StackBlitz first, so you always know exactly what you are getting before it touches your codebase."}]}]},"introduction":"Export Framer to React Code","slug":"framer-code","author":{"framerUserId":"407febbd-f8f7-4ca9-bdca-9bdcdafdf749","name":"Stringhost","slug":"stringhost","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/407febbd-f8f7-4ca9-bdca-9bdcdafdf749/2z94zy65","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/407febbd-f8f7-4ca9-bdca-9bdcdafdf749/01a09a16-ca2a-70ba-8ee8-36a3c0dd16c4.png","metadata":{"tint":{"h":0,"s":0,"l":9},"width":3200,"height":2400}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/407febbd-f8f7-4ca9-bdca-9bdcdafdf749/01a09a28-f6a2-75bb-a88d-47478e408efe.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":3200,"height":2400}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/407febbd-f8f7-4ca9-bdca-9bdcdafdf749/01a0b846-986b-738d-9adf-eca9c3619ee1.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":3200,"height":2400}}],"post":null,"createdAt":"2026-09-09T12:01:28.594Z","updatedAt":"2026-09-19T06:07:35.362Z","publishedAt":"2026-09-19T06:07:35.352Z","featuredAt":null,"approvedAt":null,"type":"plugin","attributes":{"framerPluginId":"5j5jnikbr73un2ytpc5wc1zek","paid":true,"categories":[{"id":"d42b39e6-e921-4d46-be20-263eb61efbf9","name":"Code","slug":"code"}],"tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":2,"edited":true,"editedAt":"2026-09-13T10:08:43.863Z","createdAt":"2026-09-09T12:01:29.144Z","updatedAt":"2026-09-13T10:08:43.863Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L53"}]