Quickstarts

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.

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:

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:

  1. Select an element or group of elements.
  2. Right-click the elements and then click Create Component.
  3. Give the component a clear, descriptive name.
Creating a Component in Webflow

2. Set up your React project

1

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.

2

Install the Webflow CLI

Install the Webflow CLI as a dev dependency in your project. This pins the version, plays nicely with CI, and lets npx find the local binary first:

$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

1

Run the export

From the root of your React project, run:

$npx 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.

2

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

1

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.

2

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

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

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:

$npx 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:

$npx webflow devlink export --no-input

Common issues and solutions

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:

    $npx webflow auth login --force

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 element is properly set up — it loads Google and Adobe fonts at runtime
  • Check for CSS conflicts with other styles in your project

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.