DevLink

Build components visually in Webflow and use them in React projects

DevLink is the bridge between design and code for teams working in Webflow. With DevLink, design components visually in Webflow and export them for use in React applications, including Webflow Cloud apps.

Design visually

Create components using Webflow’s visual editor with no code required.

Export to React

Transform Webflow components into React components with a single command.

Preserve design systems

Preserve styles, variables, components and interactions from your Webflow design.

Stay in sync

Update your design system in Webflow, then sync changes to your codebase.

Get started

Ready to use DevLink with your project?

Sync your design system

Get up and running with DevLink in minutes.

Get started with DevLink →

Use DevLink with Webflow Cloud

Learn how to use DevLink with Webflow Cloud.

Get started with Webflow Cloud →

Devlink is in beta

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

DevLink translates your Webflow components into React components through a simple workflow:

1

Design in Webflow

Create styles, variables, and components in Webflow’s best-in-class visual editor.

2

Configure DevLink

Set up the connection between your Webflow project and your React application.

3

Sync your design system

Use the Webflow CLI to export and sync styles, variables, and components to your project.

4

Use your design system in your React app

Import the global styles and generated React components into your application code.

5

Add functionality

Enhance the components with custom logic, state, and interactivity.

Supported elements

DevLink supports many Webflow elements, including:

1// Layout elements
2- Container
3- Div Block
4- Section
5- Grid
6- Columns
7- List / List item
8- Map
9- Navbar
10- Slider
11- Tabs
12
13// Interactive elements
14- Button
15- Link Block
16- Form elements
17- Dropdown
18- Search

DevLink users must agree to the Webflow Labs Terms of Service.

Built with