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:T926,

Reframe

Turn Framer components into production-ready React code without rebuilding them by hand.

Reframe lets you select a component in Framer, publish it, then pull it directly into your React project with the Reframe CLI.

What Reframe does

Exports Framer components into reusable React code
Preserves styling, assets, fonts, responsive behavior, and component structure
Gives every published component a simple CLI install command
Supports updating and re-exporting components as your Framer design changes
Keeps your exported components private to your Reframe account
Works with both JavaScript and TypeScript projects

How it works

Open Reframe inside Framer
Sign in to your Reframe account
Select the component you want to export
Publish it
Copy the generated CLI command
Run it inside your React project

Example:

pnpx @reframejs/cli add <component-id>

Reframe handles the rest.

Built for developers using Framer

Reframe is designed for people who like designing visually in Framer but still want full control over the final application code.

Instead of recreating your Framer components manually in React, Reframe helps bridge the gap between design and development so you can move faster while keeping your own codebase.

Plans

Starter

10 exports per billing cycle
1 linked Framer project

Pro

Unlimited exports
Unlimited Framer projects

Lifetime Pro

Unlimited exports
Unlimited projects
One-time purchase

Previously exported components remain available through the CLI even if your subscription later expires.

Requirements

A Reframe account
A supported React project
The Reframe CLI

Learn more, manage your account, and view your exports from the Reframe web app.

4f:["$","$L50",null,{"value":{"fallback":{"$inf$activity-creator-9a53faa2-61c4-4168-97d9-cbe0a535c559-all:/unified/creator/9a53faa2-61c4-4168-97d9-cbe0a535c559/activity/":[{"data":[{"id":"01a09be0-132d-75ed-93a7-1a62a2240639","type":"creator.followed","target":{"type":"creator","id":"785ad904-ac68-42f6-bef3-ebf1d7ae6084","preview":"Stratego","previewJson":null,"thumbnail":null,"slug":"lise-hoseth","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"9a53faa2-61c4-4168-97d9-cbe0a535c559","name":"Steve Nzioka","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/9a53faa2-61c4-4168-97d9-cbe0a535c559/3kq9vi65","slug":"steve-nzioka","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-13T17:45:48.583Z","latestAt":"2026-09-13T17:45:48.583Z"},{"id":"01a09be0-10d0-737d-b27a-666c593a794d","type":"creator.followed","target":{"type":"creator","id":"1e63400b-9237-4c5c-a463-e5627b50d148","preview":"Matty Hall","previewJson":null,"thumbnail":null,"slug":"matty-hall","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"9a53faa2-61c4-4168-97d9-cbe0a535c559","name":"Steve Nzioka","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/9a53faa2-61c4-4168-97d9-cbe0a535c559/3kq9vi65","slug":"steve-nzioka","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-13T17:45:47.981Z","latestAt":"2026-09-13T17:45:47.981Z"},{"id":"01a09be0-0dee-74a6-960e-6e2746ba5bfb","type":"creator.followed","target":{"type":"creator","id":"562f0d82-82a5-4035-b474-8dc7a7a788dd","preview":"Cormac Fee","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/562f0d82-82a5-4035-b474-8dc7a7a788dd/vm507in4","slug":"cormac-fee-design","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"9a53faa2-61c4-4168-97d9-cbe0a535c559","name":"Steve Nzioka","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/9a53faa2-61c4-4168-97d9-cbe0a535c559/3kq9vi65","slug":"steve-nzioka","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-13T17:45:47.243Z","latestAt":"2026-09-13T17:45:47.243Z"},{"id":"01a09be0-0ada-70f5-999f-556977400218","type":"creator.followed","target":{"type":"creator","id":"93720b32-d17e-4ef8-9cf7-6fea4f1e4c1d","preview":"Revive Juken","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2767111/2d0e7866659af4401bf2d8645c852415-Yc3EbnmGhajZiRBQvSFaf3bhEqfVOM","slug":"revive-juken","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"9a53faa2-61c4-4168-97d9-cbe0a535c559","name":"Steve Nzioka","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/9a53faa2-61c4-4168-97d9-cbe0a535c559/3kq9vi65","slug":"steve-nzioka","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-13T17:45:46.455Z","latestAt":"2026-09-13T17:45:46.455Z"},{"id":"01a09be0-0844-721c-8002-d33fabbef986","type":"creator.followed","target":{"type":"creator","id":"731e8c0f-a75c-4961-add9-e7a59a1b6409","preview":"Siddhesh Thadeshwar","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/731e8c0f-a75c-4961-add9-e7a59a1b6409/d50bzu2i","slug":"stx","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"9a53faa2-61c4-4168-97d9-cbe0a535c559","name":"Steve Nzioka","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/9a53faa2-61c4-4168-97d9-cbe0a535c559/3kq9vi65","slug":"steve-nzioka","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-13T17:45:45.793Z","latestAt":"2026-09-13T17:45:45.793Z"},{"id":"01a097a6-ce12-768b-9d0e-b4a82a068ac0","type":"plugin.created","target":{"type":"plugin","id":"1598","preview":"Reframe","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/9a53faa2-61c4-4168-97d9-cbe0a535c559/01a097a5-4634-75da-8840-9122270c46b5.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"9a53faa2-61c4-4168-97d9-cbe0a535c559","name":"Steve Nzioka","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/9a53faa2-61c4-4168-97d9-cbe0a535c559/3kq9vi65","slug":"steve-nzioka","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"plugin","visibility":"public","startedAt":"2026-09-12T22:04:46.482Z","latestAt":"2026-09-12T22:04:46.482Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:9a53faa2-61c4-4168-97d9-cbe0a535c559:/unified/posts/?creator=9a53faa2-61c4-4168-97d9-cbe0a535c559&with=reposts":[{"data":[{"id":"01a097a6-cbcb-778b-ac76-8769e18f91d5","title":null,"body":"

Framer → React, without the rebuild.

I just shipped Reframe 🚀

Publish your Framer components and bring them straight into your React projects with a single CLI command.

Built for people who love designing in Framer, but want to own the final code.

Give it a try and let me know what you think 💜

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Framer → React, without the rebuild.","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"I just shipped "},{"type":"text","text":"Reframe","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"emoji","attrs":{"name":"rocket","emoji":"🚀"}}]},{"type":"paragraph","content":[{"type":"text","text":"Publish your Framer components and bring them straight into your React projects with a single CLI command."}]},{"type":"paragraph","content":[{"type":"text","text":"Built for people who love designing in Framer, but want to own the final code."}]},{"type":"paragraph","content":[{"type":"text","text":"Give it a try and let me know what you think "},{"type":"emoji","attrs":{"name":"purple_heart","emoji":"💜"}}]}]},"author":{"framerUserId":"9a53faa2-61c4-4168-97d9-cbe0a535c559","name":"Steve Nzioka","slug":"steve-nzioka","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/9a53faa2-61c4-4168-97d9-cbe0a535c559/3kq9vi65","followed":false,"followsYou":false},"media":[],"resources":[{"id":"1598","resolved":true,"title":"Reframe","body":"$51","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"Reframe"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Turn Framer components into production-ready React code without rebuilding them by hand."}]},{"type":"paragraph","content":[{"type":"text","text":"Reframe lets you select a component in Framer, publish it, then pull it directly into your React project with the Reframe CLI."}]},{"type":"customHeading","content":[{"type":"text","text":"What Reframe does"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Exports Framer components into reusable React code"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Preserves styling, assets, fonts, responsive behavior, and component structure"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Gives every published component a simple CLI install command"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Supports updating and re-exporting components as your Framer design changes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Keeps your exported components private to your Reframe account"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Works with both JavaScript and TypeScript projects"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"How it works"}],"attrs":{"level":2}},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Open Reframe inside Framer"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Sign in to your Reframe account"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Select the component you want to export"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Publish it"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Copy the generated CLI command"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Run it inside your React project"}]}]}],"attrs":{"type":null,"start":1}},{"type":"paragraph","content":[{"type":"text","text":"Example:"}]},{"type":"paragraph","content":[{"type":"text","text":"pnpx @reframejs/cli add ","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Reframe handles the rest."}]},{"type":"customHeading","content":[{"type":"text","text":"Built for developers using Framer"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Reframe is designed for people who like designing visually in Framer but still want full control over the final application code."}]},{"type":"paragraph","content":[{"type":"text","text":"Instead of recreating your Framer components manually in React, Reframe helps bridge the gap between design and development so you can move faster while keeping your own codebase."}]},{"type":"customHeading","content":[{"type":"text","text":"Plans"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Starter","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"10 exports per billing cycle"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"1 linked Framer project"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Pro","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Unlimited exports"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Unlimited Framer projects"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Lifetime Pro","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Unlimited exports"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Unlimited projects"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"One-time purchase"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Previously exported components remain available through the CLI even if your subscription later expires."}]},{"type":"customHeading","content":[{"type":"text","text":"Requirements"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"A Reframe account"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"A supported React project"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"The Reframe CLI"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Learn more, manage your account, and view your exports from the"},{"type":"text","text":" Reframe web app.","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://reframe.elxr.studio/docs","target":"_blank"}}]}]}]},"introduction":"Reframe (Framer to React code)","slug":"reframe","author":{"framerUserId":"9a53faa2-61c4-4168-97d9-cbe0a535c559","name":"Steve Nzioka","slug":"steve-nzioka","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/9a53faa2-61c4-4168-97d9-cbe0a535c559/3kq9vi65","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/9a53faa2-61c4-4168-97d9-cbe0a535c559/01a097a5-4634-75da-8840-9122270c46b5.png","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1448,"height":1086}}],"post":null,"createdAt":"2026-09-12T22:04:45.260Z","updatedAt":"2026-09-13T14:51:49.328Z","publishedAt":"2026-09-13T14:51:49.322Z","featuredAt":null,"approvedAt":null,"type":"plugin","attributes":{"framerPluginId":"82ex4us7px94xaoaqsh5mrehf","paid":true,"categories":[{"id":"d42b39e6-e921-4d46-be20-263eb61efbf9","name":"Code","slug":"code"}],"tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-12T22:04:45.900Z","updatedAt":"2026-09-12T22:04:45.900Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L52"}]