Agent-readable docs index: /llms.txt. Full docs in one file: /llms-full.txt. Download /docs.zip to grep all markdown files locally.

Export a full Framer website to React

This tutorial walks you through exporting an entire Framer website (multiple pages, navigation, footer) as a standalone React app you can deploy anywhere. The key trick is using Framer's built-in AI agent to automatically create a component for each section of your page, so the export is clean and ordered.
This guide assumes you have a Framer project with at least one page. If you are just getting started, read the Quickstart first.

Overview

┌──────────────────────────────────────────────────────────────────────────────┐
│                           Your Framer Project                                │
│                                                                              │
│  Page with layers (not yet components)                                       │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐            │
│  │  Navbar  │ │   Hero   │ │ Features │ │ Pricing  │ │  Footer  │            │
│  └──────────┘ └──────────┘ └──────────┘ └──────────┘ └──────────┘            │
└──────────────────────────────────┬───────────────────────────────────────────┘
                                   │
                       Framer Agent creates components
                                   │
                                   v
┌──────────────────────────────────────────────────────────────────────────────┐
│  Components panel                                                            │
│  ┌──────────────────────┐  ┌──────────────────────┐  ┌────────────────────┐  │
│  │ Section 1 Navbar     │  │ Section 2 Hero       │  │ Section 3 Features │  │
│  └──────────────────────┘  └──────────────────────┘  └────────────────────┘  │
│  ┌──────────────────────┐  ┌──────────────────────┐                          │
│  │ Section 4 Pricing    │  │ Section 5 Footer     │                          │
│  └──────────────────────┘  └──────────────────────┘                          │
└──────────────────────────────────┬───────────────────────────────────────────┘
                                   │
                        React Export Plugin (select Section components)
                                   │
                                   v
┌──────────────────────────────────────────────────────────────────────────────┐
│  npx unframer {projectId} --outDir ./src/framer                              │
│                                                                              │
│  src/framer/                                                                 │
│  ├── section-1-navbar.jsx                                                    │
│  ├── section-2-hero.jsx                                                      │
│  ├── section-3-features.jsx                                                  │
│  ├── section-4-pricing.jsx                                                   │
│  ├── section-5-footer.jsx                                                    │
│  ├── chunks/*.js            (shared bundled chunks)                          │
│  └── styles.css             (fonts, color variables, base styles)            │
└──────────────────────────────────┬───────────────────────────────────────────┘
                                   │
                          Assemble in your React app
                                   │
                                   v
┌──────────────────────────────────────────────────────────────────────────────┐
│                     Deployed on Vercel / Cloudflare / Netlify                │ 
└──────────────────────────────────────────────────────────────────────────────┘

1. Turn page sections into components with Framer Agent

Framer 3.0 ships with an AI agent built right into the editor. Instead of manually right-clicking each layer and converting it to a component, you can ask the agent to do it all at once.
Open the Agent panel on the right side of the Framer editor and type this prompt:
Create a component for each top level layer in the current page.
Prefix the component with "Section N" where N is the count
of the section in the current page order.
The agent reads your page structure and creates one component per top-level section, naming them Section 1 Navbar, Section 2 Hero, Section 3 Features, and so on. The numbering preserves the visual order of your page, which makes reassembling in React straightforward.
Here is the official Framer 3.0 launch video showing agents in action on the canvas:
For multi-page sites, repeat this prompt on each page. The agent works in the context of whatever page is currently selected. You can prefix differently per page, for example "Home Section N" and "About Section N".

2. Export only your section components

Now that every page section is a named component, open the React Export plugin (Cmd+K → "React Export").
You will see a list of all components in your project. Instead of clicking "Select All", use the checkboxes to select only the Section components you just created. This keeps the export clean. You do not want to export internal sub-components, icons, or small reusable pieces that are already included inside your section components.
After selecting them, click Export.
The numbered prefix ("Section 1", "Section 2") makes it easy to spot your page sections in the component list and select them quickly.

3. Create your React project

Start with a fresh Vite + React project:
npm create vite@latest my-website -- --template react-ts
cd my-website
npm install unframer react@19 react-dom@19

4. Download your components

npx unframer {projectId} --outDir ./src/framer
Replace {projectId} with the short ID shown in the React Export plugin. This creates a src/framer/ directory with all your section components.
Your project should now look like this:
my-website/
├── src/
│   ├── framer/
│   │   ├── section-1-navbar.jsx
│   │   ├── section-2-hero.jsx
│   │   ├── section-3-features.jsx
│   │   ├── section-4-pricing.jsx
│   │   ├── section-5-footer.jsx
│   │   └── styles.css
│   ├── App.tsx
│   └── main.tsx
├── package.json
└── vite.config.ts

5. Assemble the page in order

Import styles.css once at the top of your app, then compose your page from the exported components in the same order as your Framer page:
// src/App.tsx
import './framer/styles.css'
import Section1Navbar from './framer/section-1-navbar'
import Section2Hero from './framer/section-2-hero'
import Section3Features from './framer/section-3-features'
import Section4Pricing from './framer/section-4-pricing'
import Section5Footer from './framer/section-5-footer'

export default function App() {
    return (
        <div>
            <Section1Navbar />
            <Section2Hero.Responsive />
            <Section3Features.Responsive />
            <Section4Pricing.Responsive />
            <Section5Footer />
        </div>
    )
}
Use .Responsive for any component that has breakpoint variants (desktop/tablet/mobile). Components without variants can be used directly. The numbered naming makes the ordering obvious at a glance.
Disable React Strict Mode in main.tsx. Remove the <StrictMode> wrapper or Framer animations may break.

6. Add routing for multiple pages

If your Framer site has multiple pages (About, Pricing, Contact), set up react-router:
npm install react-router react-router-dom
// src/main.tsx
import { createRoot } from 'react-dom/client'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import './framer/styles.css'
import Home from './pages/Home'
import About from './pages/About'
import Contact from './pages/Contact'

createRoot(document.getElementById('root')!).render(
    <BrowserRouter>
        <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/contact" element={<Contact />} />
        </Routes>
    </BrowserRouter>
)
Each page file imports the relevant Framer section components:
// src/pages/Home.tsx
import Section1Navbar from '../framer/section-1-navbar'
import Section2Hero from '../framer/section-2-hero'
import Section5Footer from '../framer/section-5-footer'

export default function Home() {
    return (
        <div>
            <Section1Navbar />
            <Section2Hero.Responsive />
            <Section5Footer />
        </div>
    )
}

7. Enable client navigation

Framer components contain internal links. To make them use client-side routing instead of full page reloads, wrap your app with UnframerProvider:
// src/main.tsx
import { useNavigate } from 'react-router-dom'
import { UnframerProvider } from 'unframer'

function Providers({ children }: { children: React.ReactNode }) {
    const navigate = useNavigate()
    return (
        <UnframerProvider navigate={navigate}>
            {children}
        </UnframerProvider>
    )
}

8. Add dark mode (optional)

If your Framer project has dark mode color styles, toggle it by adding the dark class to a parent element:
<div className={isDarkMode ? 'dark' : ''}>
    <Section1Navbar />
    <Section2Hero.Responsive />
    <Section5Footer />
</div>
The exported styles.css already contains both light and dark values for all your --unframer-* CSS variables.

9. Deploy

Your site is now a standard React app. Deploy it anywhere:
Vercel:
npm install -g vercel
vercel
Cloudflare Pages:
npm run build
npx wrangler pages deploy dist
Netlify:
npm run build
npx netlify deploy --dir=dist --prod

10. Keep it updated

When you make changes in Framer:
  1. Publish your Framer site (click the Publish button)
  2. Re-run the CLI: npx unframer {projectId} --outDir ./src/framer
  3. Rebuild and redeploy your app
For continuous updates, use the --watch flag during development:
npx unframer {projectId} --outDir ./src/framer --watch

What's next

Powered byHolocron