> Agent-readable docs index: /llms.txt. Full docs in one file: /llms-full.txt. Download /docs.zip to grep all markdown files locally.
---
title: Export a Full Framer Website to React
sidebarTitle: Export Full Website
description: Use Framer's AI agent to turn page sections into components, export them to React, and deploy as a standalone app.
icon: lucide:globe
---
# 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.
## Overview
## 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:
## 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**.
## 3. Create your React project
Start with a fresh Vite + React project:
```bash
npm create vite@latest my-website -- --template react-ts
cd my-website
npm install unframer react@19 react-dom@19
```
## 4. Download your components
```bash
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:
```tsx
// 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 (
)
}
```
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.
## 6. Add routing for multiple pages
If your Framer site has multiple pages (About, Pricing, Contact), set up **react-router**:
```bash
npm install react-router react-router-dom
```
```tsx
// 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(
} />
} />
} />
)
```
Each page file imports the relevant Framer section components:
```tsx
// 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 (
)
}
```
## 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`:
```tsx
// src/main.tsx
import { useNavigate } from 'react-router-dom'
import { UnframerProvider } from 'unframer'
function Providers({ children }: { children: React.ReactNode }) {
const navigate = useNavigate()
return (
{children}
)
}
```
## 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:
```tsx
```
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:**
```bash
npm install -g vercel
vercel
```
**Cloudflare Pages:**
```bash
npm run build
npx wrangler pages deploy dist
```
**Netlify:**
```bash
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:
```bash
npx unframer {projectId} --outDir ./src/framer --watch
```
## What's next
* [Styling & dark mode](/styling) — customize sizes, colors, and responsive behavior
* [Troubleshooting](/troubleshooting) — fix common export issues
* [Connect Framer MCP](/mcp/connect) — let AI assistants modify your Framer project