Getting Started with DevLink

Export your Webflow components to a Next.js project in minutes 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:

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

1

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.

2

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.

1

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.

  1. Get your Webflow Site ID
    In your Webflow dashboard, select your site, and navigate to the Settings panel to get your Site ID.

  2. 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
2

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_AUTH_TOKEN=your-api-token-here
3

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

1

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
2

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
1import './globals.css';
2import "@/devlink/global.css";
3import { DevLinkProvider } from '@/devlink/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 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
1import { Button } from '@/devlink/Button';
2import { Card } from '@/devlink/Card';
3import { Hero } from '@/devlink/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, simply run the sync command again to update them in your React project:

$webflow devlink sync

This will update all your components while preserving any custom code or props you’ve added in your React application.

Common issues and solutions

If you encounter authentication issues:

  • Verify your API token has the correct permissions
  • Ensure your environment variables are properly loaded
  • Check that the webflow.json file is in the root directory

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

  • Ensure you’ve imported global.css in your application
  • Import any additional fonts used on your site to your layout file
  • Verify that the DevLinkProvider is properly set up
  • Check for CSS conflicts with other styles in your project

If a component isn’t available after syncing:

  • Make sure it’s properly created as a Component in Webflow
  • Check if it uses only supported elements

Next steps

Deploy with Webflow Cloud

Learn how to deploy your React application with Webflow Cloud.

Styling and Interactions

Learn how DevLink preserves styling and interactions.

Props

Learn how to use props to customize your components.

Built with