Getting Started with DevLink

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

Devlink is in beta

Devlink is in beta. Visit webflow.com/cloud to get access with Webflow Cloud.

Time estimate: 15 minutes

Prerequisites:

A Webflow account and Webflow site with components to export
Node.js v20.0.0 or higher
A package manager of your choice (npm, yarn, or pnpm)
Basic familiarity with React

Setting up a Webflow project

If you don’t have a Webflow project yet, use a DevLink template from the Webflow marketplace. DevLink templates are pre-configured with components and styles optimized for React.

Getting started

1. Create your React project

Install the Webflow CLI

In your React project, install the Webflow CLI:

$ npm install -g @webflow/webflow-cli

The Webflow CLI enables you to sync your Webflow styles, variables, and components to your React project any time you make changes to your Webflow design system.

Create a React project

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

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

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

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. Configure DevLink in your app

Create a Webflow Site API token

DevLink requires access to your site to export your design system. To grant access, you’ll need to get your Site ID and create an API token with the sites:read permission. Then configure DevLink with the required information to connect your Webflow site to your React project.

Get your Webflow Site ID
In your Webflow dashboard, select your site, and navigate to the Settings panel to get your Site ID.
Generate a Webflow API token
- In your Webflow Dashboard, go to Site Settings > Integrations > API Access
- Create a new token with the sites:read permission
- Copy your new token

Add your environment variables

Create a .env.local file in the root of your project to securely store your token and site ID:

.env.local

$ WEBFLOW_SITE_ID=your-site-id-here
> WEBFLOW_SITE_API_TOKEN=your-api-token-here

Configure DevLink settings config

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   }
7 }

4. Sync and use your components

Sync 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 }