How Unframer works

Unframer converts your Framer components into React component files (.jsx by default) that render as native React components. No iframe, no embed. The generated components run in your React app with the lightweight unframer runtime package.

┌────────────────────┐            ┌────────────────────────┐            ┌────────────────────┐
│   Framer Editor    │            │   Unframer Database    │            │   Your React App   │
│                    │   Plugin   │                        │    CLI     │                    │
│  Design your       ├────────────>Stores component        ├────────────>.jsx components│                                                                                                                                           
│  components        │   export   │JavaScript URLs         │   bundle   │chunks/*.js         │
│                    │            │and metadata            │            │styles.css          │
└────────────────────┘            └────────────────────────┘            └────────────────────┘

Ask AI about this page

The export pipeline

Step 1: Plugin collects metadata. When you click Export in the React Export plugin, it reads all selected components from the Framer SDK: their JavaScript URLs, property controls, breakpoints, color styles, and page structure. This data is sent to the Unframer API.

Step 2: CLI fetches and bundles. When you run npx unframer {projectId}, the CLI fetches each component's JavaScript URL from Framer's CDN. These URLs point to ES modules that Framer uses internally to render your site.

Step 3: esbuild bundles everything. The CLI uses esbuild to resolve all dependencies, inline Framer's internal modules, and produce .jsx entry files plus shared chunks/*.js files. Code splitting keeps shared code deduplicated. External npm packages used in your Framer code components are resolved and installed automatically.

Step 4: Types are generated. Unframer runs each component in Node.js and reads the propertyControls field. These controls (the inputs you see in Framer's right panel) are converted into JSDoc type comments injected directly into the .jsx files. Variants become union types, images become {src, srcSet, alt} objects, etc. Your editor picks up these types for autocomplete and type checking without separate declaration files.

Step 5: Styles are extracted. A styles.css file is generated containing Framer's base styles, the fonts used in your components, and your color styles as CSS variables (prefixed with --unframer-).

The exported files are generated code. Never edit them manually. Re-run the CLI after making changes in Framer.

What gets exported

Output	Description
`component-name.jsx`	React component entry file with JSDoc type comments
`chunks/*.js`	Shared bundled chunks imported by component files
`styles.css`	Base Framer styles, fonts, and color style CSS variables

When to re-run the plugin vs the CLI

The plugin saves component metadata to the Unframer database. The CLI downloads the latest component JavaScript from Framer's CDN.

Change in Framer	Action needed
Edit existing component content/layout	Re-run CLI only (after publishing)
Add a new component	Re-open plugin, select it, then re-run CLI
Change color styles	Re-open plugin, then re-run CLI
Add new pages	Re-open plugin, then re-run CLI
Add new locales	Re-open plugin, then re-run CLI
Change breakpoints	Re-open plugin, then re-run CLI

Publishing is required. Framer only updates the JavaScript modules behind component URLs when you click the Publish button. The CLI reads from these published URLs.

Server-side rendering

Unframer components support SSR out of the box. They render on the server just like any React component, giving you the same SEO and performance characteristics as a Framer-hosted site. The styles.css file ensures fonts and base styles load correctly during SSR.

Future compatibility

Framer occasionally updates their runtime. Unframer tracks these changes automatically via GitHub Actions, updating the internal framer.js runtime. An example app is deployed on every change, making regressions easy to catch and fix.

Supported component props

Unframer generates TypeScript definitions for all your Framer component variables:

variant — union type of all variant names
Functions — from event variables in Framer
Scalars — string, number, boolean, date
Image — string (URL) for basic image controls
Responsive image — { src: string, srcSet?: string, alt?: string }
Link — string URL
Color — CSS color string
Component slot — React.ReactNode (from component variables like Ticker)