Getting Started with Exported Components | Webflow Developer Documentation

In this guide, you’ll learn how to configure DevLink and export components to a React project. While this guide uses Next.js, Code Export works with any React-based framework.

Before you start

Before running this quickstart, make sure you have:

A Webflow account and Webflow site with components to export. Or, use a Code Export template from the Webflow marketplace. DevLink templates are pre-configured with components and styles optimized for React.
Node.js v20.0.0 or higher and npm installed
Basic familiarity with React

1. Configure DevLink in your app

Create a Next.js project

To start with a fresh Next.js project, run the following command in your terminal:

$ npx create-next-app@latest my-devlink-app
> cd my-devlink-app

Follow the prompts to configure your project with your preferred options.

Install the Webflow CLI

In your React project, install the Webflow CLI as a development dependency:

$ npm install -D @webflow/webflow-cli

Authenticate with Webflow

DevLink requires API access to your site to export your design system. To grant access, run the following command in your terminal to start an authentication workflow:

$ webflow auth login

This command will open an authentication screen in your browser. Follow the prompts to authenticate with Webflow. Once authenticated, the CLI will create a .env file in the root of your project with your Site ID and API token.

Existing .env file

If you already have a .env file in your project, the CLI will require you to add a --force flag to make changes.

Configure DevLink settings

Create a webflow.json file in the root of your project and paste the following configuration:

webflow.json

1 {
2   "devlink":{
3     "host": "https://api.webflow.com",
4     "rootDir": "./devlink",
5     "cssModules": true,
6     "relativeHrefRoot": "/"
7   }
8 }

This configuration file tells DevLink where to export your components and how to handle CSS modules. Learn more about the configuration file in the configuration file reference.

2. Prepare your Webflow components

In your Webflow project, prepare any components you want to export to your React project by:

Selecting an element or group of elements
Right-clicking and selecting “Create Component”
Naming your component (use clear, descriptive names)

Only elements that have been converted to Components can be exported via DevLink.

3. Export and use your components

Export your components

Run the DevLink sync command to export your Webflow components to your React project:

$  webflow devlink sync

This will create a devlink directory in your project containing:

React components for each of your Webflow components
CSS modules for component-specific styling
A global CSS file for shared styles
A DevLinkProvider component for handling interactions

Add the global DevLink styles

Many of the code snippets import from the DevLink directory with the @/devlink alias. See the troubleshooting guide for more information on how to set this up in your project.

In your app/layout.tsx file, import the global CSS file generated by DevLink to ensure all Webflow components have access to necessary styles and Webflow style resets. Additionally, if your Webflow components have interactions set on elements, wrap your application in the DevLinkProvider component to enable those interactions at runtime:

app/layout.tsx

1 import './globals.css';
2 import "@/devlink/global.css";
3 import { DevLinkProvider } from '@/devlink/DevLinkProvider';
4 
5 export default function RootLayout({ children }) {
6   return (
7     <html lang="en">
8       <body>
9         <DevLinkProvider>{children}</DevLinkProvider>
10       </body>
11     </html>
12   );
13 }

Use your components

Now you can import and use your Webflow components in your application. In this particular example, it uses three components exported from Webflow via DevLink: Hero, Card, and Button. You can use them in your application like so:

app/page.tsx

1 import { Button } from '@/devlink/Button';
2 import { Card } from '@/devlink/Card';
3 import { Hero } from '@/devlink/Hero';
4 
5 export default function Home() {
6   return (
7     <main>
8       <Hero
9         heading="Welcome to My App"
10         subheading="Built with Webflow and DevLink"
11       />
12       <Card
13         title="DevLink Card"
14         description="This card was designed in Webflow"
15       >
16         <Button>Get Started</Button>
17       </Card>
18     </main>
19   );
20 }