Quickstart: DevLink Export

Export your [Webflow components](https://help.webflow.com/hc/en-us/articles/33961303934611-Components-overview) to [React](https://react.dev/) with DevLink Export.

Quickstart: DevLink Export

Export your Webflow components to React with DevLink Export.

Export your [Webflow components](https://help.webflow.com/hc/en-us/articles/33961303934611-Components-overview) to [React](https://react.dev/) with DevLink Export.

In this guide, you’ll learn how to configure DevLink and export Webflow components to a React project. This guide uses Next.js, but you can export and use components in any React-based framework.

Prerequisites Before running this quickstart, make sure you have:

A Webflow account and Webflow site with components to export. You can also clone a DevLink template from the Webflow marketplace — these templates include components and styles already configured for export.
A paid Workspace plan or a CMS, Business, or Ecommerce Site plan.
Node.js v22 or higher and npm installed.
@webflow/webflow-cli v1.19.0 or later (installed in step 2).
Basic familiarity with React.

1. Prepare your Webflow components

DevLink exports Components only, not every element on the canvas. If the elements you want to export aren’t components yet, convert them first:

Select an element or group of elements.
Right-click the elements and then click Create Component.
Give the component a clear, descriptive name.

2. Set up your React project

Create or open a React project

If you don’t have a React-based application, run the following command in your terminal to start with a simple application:

$ 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

Install the Webflow CLI as a dev dependency in your project:

$ npm install -D @webflow/webflow-cli@latest

Or, to make webflow available outside any single project, install it globally:

$ npm install -g @webflow/webflow-cli@latest

3. Export your components

Run the export

From the root of your React project, run:

$ webflow devlink export

The first time you run it, the CLI authenticates you in your browser and walks you through a short setup. Accept the defaults to export every component into a ./webflow folder with style isolation enabled, or follow the prompts to filter by component name or group. Your answers are saved to webflow.json so future runs don’t prompt again — see Configuration options to tune them later.

The CLI populates the webflow/ folder with your React components, the generated stylesheets, a DevLinkProvider for runtime wiring, and the supporting modules they depend on. See What’s exported for the full breakdown.

Verify the exported code

Look for @warning tags that indicate that DevLink was not able to export an identifier, as described in Name changes.

4. Use the exported components

Configure import aliases

Add a webflow/* alias to the paths section of your tsconfig.json so you can import the exported components by name instead of using long relative paths:

tsconfig.json

1 {
2   "compilerOptions": {
3     "paths": {
4       "webflow/*": ["./webflow/*"]
5     }
6   }
7 }

With the alias in place, import { Button } from 'webflow/Button' resolves to your local ./webflow/Button file from anywhere in the app.

Add the global styles and provider

In your app/layout.tsx file, import the global CSS file generated by DevLink so all components have the styles and resets they expect. If your Webflow components have interactions, also wrap your app in the DevLinkProvider to enable them at runtime:

app/layout.tsx

1 import './globals.css';
2 import "webflow/css/global.css";
3 import { DevLinkProvider } from 'webflow/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 }

Add font tags

Import the DevLinkFontTags component and place it in the <head> element of your root layout.tsx file. This component loads external fonts server-side, which prevents a fallback font from appearing briefly before the correct fonts load:

app/layout.tsx

1 import './globals.css';
2 import "webflow/css/global.css";
3 import { DevLinkProvider } from 'webflow/DevLinkProvider';
4 import { DevLinkFontTags } from "../../../../webflow/webflow_modules/DevLinkFontTags";
5 
6 export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
7   return (
8     <html lang="en">
9       <head>
10         <DevLinkFontTags />
11       </head>
12       <body>
13         <DevLinkProvider>{children}</DevLinkProvider>
14       </body>
15     </html>
16   );
17 }

If your Webflow site uses no external fonts, the DevLinkFontTags component returns null with no performance cost. Without the DevLinkFontTags component, fonts still load via client-side injection, but a brief flash of a fallback font may appear before the correct font renders.

Use a component

Now you can import and use your Webflow components in your application. This particular example uses three components exported from Webflow via DevLink: Hero, Card, and Button:

app/page.tsx

1 import { Button } from 'webflow/Button';
2 import { Card } from 'webflow/Card';
3 import { Hero } from 'webflow/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 }

The props set on these React components depend on the design and properties set up on the Webflow components.

Start your development server

Run your application to see your Webflow components in action:

$ npm run dev

Visit http://localhost:3000 in your browser to see your application with the Webflow components.

Updating your components

When you make changes to your components in Webflow, run the export again to refresh them in your React project:

$ webflow devlink export

The command refreshes the files in webflow/. Your own application code outside that folder is untouched.

You can also run the export in CI by setting WEBFLOW_API_TOKEN in your CI environment and adding the --no-input flag:

$ webflow devlink export --no-input

Common issues and solutions

Authentication Error

If you encounter authentication issues:

Verify that your API token has the correct permissions
Verify that the token has access to the site whose ID is set in webflow.json (a Site API token only authorizes that one site; a Workspace API token authorizes every site in the workspace)
Ensure that your environment variables are properly loaded
Check that the webflow.json file is in the root directory of the React application

If all else fails, force a fresh login to clear any stale credentials:

$ webflow auth login --force

Missing Styles

If your components don’t look the same as in Webflow:

Ensure that you’ve imported css/global.css in your application
Verify that the DevLinkProvider and DevLinkFontTags tags are properly set up
Check for CSS conflicts with other styles in your project

Component Not Found

If a component isn’t available after exporting:

Make sure it’s properly created as a component in Webflow
Make sure that the rules in the devlink-export object in the webflow.json file match it
Check that it uses only supported elements

Next steps

Deploy with Webflow Cloud

Learn how to deploy your React application with Webflow Cloud.

Design Guidelines

Learn how DevLink preserves styling and interactions.

Props

Learn how to use props to customize your components.

In this guide, you’ll learn how to configure DevLink and export Webflow components to a React project. This guide uses Next.js, but you can export and use components in any React-based framework.

Prerequisites Before running this quickstart, make sure you have:

A Webflow account and Webflow site with components to export. You can also clone a DevLink template from the Webflow marketplace — these templates include components and styles already configured for export.
A paid Workspace plan or a CMS, Business, or Ecommerce Site plan.
Node.js v22 or higher and npm installed.
@webflow/webflow-cli v1.19.0 or later (installed in step 2).
Basic familiarity with React.

1. Prepare your Webflow components

DevLink exports Components only, not every element on the canvas. If the elements you want to export aren’t components yet, convert them first:

Select an element or group of elements.
Right-click the elements and then click Create Component.
Give the component a clear, descriptive name.

2. Set up your React project

Create or open a React project

If you don’t have a React-based application, run the following command in your terminal to start with a simple application:

$ 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

Install the Webflow CLI as a dev dependency in your project:

$ npm install -D @webflow/webflow-cli@latest

Or, to make webflow available outside any single project, install it globally:

$ npm install -g @webflow/webflow-cli@latest

3. Export your components

Run the export

From the root of your React project, run:

$ webflow devlink export

Verify the exported code

Look for @warning tags that indicate that DevLink was not able to export an identifier, as described in Name changes.

4. Use the exported components

Configure import aliases

Add a webflow/* alias to the paths section of your tsconfig.json so you can import the exported components by name instead of using long relative paths:

tsconfig.json

1 {
2   "compilerOptions": {
3     "paths": {
4       "webflow/*": ["./webflow/*"]
5     }
6   }
7 }

With the alias in place, import { Button } from 'webflow/Button' resolves to your local ./webflow/Button file from anywhere in the app.

Add the global styles and provider

app/layout.tsx

1 import './globals.css';
2 import "webflow/css/global.css";
3 import { DevLinkProvider } from 'webflow/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 }

Add font tags

app/layout.tsx

1 import './globals.css';
2 import "webflow/css/global.css";
3 import { DevLinkProvider } from 'webflow/DevLinkProvider';
4 import { DevLinkFontTags } from "../../../../webflow/webflow_modules/DevLinkFontTags";
5 
6 export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
7   return (
8     <html lang="en">
9       <head>
10         <DevLinkFontTags />
11       </head>
12       <body>
13         <DevLinkProvider>{children}</DevLinkProvider>
14       </body>
15     </html>
16   );
17 }

Use a component

Now you can import and use your Webflow components in your application. This particular example uses three components exported from Webflow via DevLink: Hero, Card, and Button:

app/page.tsx

1 import { Button } from 'webflow/Button';
2 import { Card } from 'webflow/Card';
3 import { Hero } from 'webflow/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 }

The props set on these React components depend on the design and properties set up on the Webflow components.

Start your development server

Run your application to see your Webflow components in action:

$ npm run dev

Visit http://localhost:3000 in your browser to see your application with the Webflow components.

Updating your components

When you make changes to your components in Webflow, run the export again to refresh them in your React project:

$ webflow devlink export

The command refreshes the files in webflow/. Your own application code outside that folder is untouched.

You can also run the export in CI by setting WEBFLOW_API_TOKEN in your CI environment and adding the --no-input flag:

$ webflow devlink export --no-input

Common issues and solutions

Authentication Error

If you encounter authentication issues:

Verify that your API token has the correct permissions
Verify that the token has access to the site whose ID is set in webflow.json (a Site API token only authorizes that one site; a Workspace API token authorizes every site in the workspace)
Ensure that your environment variables are properly loaded
Check that the webflow.json file is in the root directory of the React application

If all else fails, force a fresh login to clear any stale credentials:

$ webflow auth login --force

Missing Styles

If your components don’t look the same as in Webflow:

Ensure that you’ve imported css/global.css in your application
Verify that the DevLinkProvider and DevLinkFontTags tags are properly set up
Check for CSS conflicts with other styles in your project

Component Not Found

If a component isn’t available after exporting:

Make sure it’s properly created as a component in Webflow
Make sure that the rules in the devlink-export object in the webflow.json file match it
Check that it uses only supported elements

Next steps

Deploy with Webflow Cloud

Learn how to deploy your React application with Webflow Cloud.

Design Guidelines

Learn how DevLink preserves styling and interactions.

Props

Learn how to use props to customize your components.

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

1	{
2	"compilerOptions": {
3	"paths": {
4	"webflow/": ["./webflow/"]
5	}
6	}
7	}

1	import './globals.css';
2	import "webflow/css/global.css";
3	import { DevLinkProvider } from 'webflow/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	}

1	import { Button } from 'webflow/Button';
2	import { Card } from 'webflow/Card';
3	import { Hero } from 'webflow/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	}