Installation | Webflow Developer Documentation

This reference describes the configuration requirements to setup DevLink in a React project for component imports.

Setup requirements

Webflow CLI

Install the Webflow CLI and the necessary dependencies to import React components into Webflow:

npm i --save-dev @webflow/webflow-cli @webflow/data-types @webflow/react

What you get:

@webflow/webflow-cli - CLI used to publish components to Webflow
@webflow/data-types - TypeScript definitions for Webflow props
@webflow/react - React utilities for code components

See the CLI reference for publishing commands.

React and React DOM

Your components need react and react-dom installed in your project. Webflow doesn’t require a specific React version, so your library can ship the version it was built with. Follow these rules so your components render in the Webflow Designer:

Match the versions. On React 18, react and react-dom must have the same major version. From React 19, they must be exactly the same version, for example both 19.1.0.
Use one copy of React. The CLI resolves every react and react-dom import, including imports from your dependencies, from the folder that contains your manifest file, so a dependency’s own copy is ignored. Install both packages there, or let your package manager hoist them.

If the bundler still finds more than one copy, or the versions don’t match, the build fails. See multiple copies of React to fix it.

`webflow.json`

The webflow.json file is used to configure DevLink for component imports. Use this file to define the name of your library and the components that should be included in the library. Additionally, you can specify a custom webpack configuration file to use for bundling your components.

Create or update webflow.json in the root of your project with the following configuration:

webflow.json

{
    "library": {
        "name": "<Your Library Name>",
        "components": ["./src/**/*.webflow.@(js|jsx|mjs|ts|tsx)"],
        "bundleConfig": "./webpack.webflow.js",
        "globals": "./src/globals.webflow.ts"
    }
}

Field	Description	Required
`library.name`	The name of your component library as it appears in Webflow	Yes
`library.components`	Glob pattern matching your component files	Yes
`library.bundleConfig`	Path to a custom webpack configuration file	No
`library.globals`	Path to a Component Decorators file	No
`library.ssrDefault`	Default server-side rendering setting for components that don’t set their own `ssr` option. Defaults to `true`.	No

Authentication

When importing your component library to Webflow using the webflow devlink import command, the Webflow CLI prompts you to authenticate with Webflow. Once authenticated, DevLink will save the token to your .env file.

Manual authentication

To authenticate manually with Webflow, run the webflow devlink import command with the --api-token option and include a Workspace API token in the command. Authenticating in this way is useful when sharing your component library to a different workspace.

webflow devlink import --api-token <your-api-token>

Workspace API token

DevLink publishes your component library to a Webflow workspace. To publish to the correct workspace, you must provide a workspace API token for authentication.

Workspace admin required

You must be a Workspace Admin to create a Workspace token.

To get your workspace API token:

Open your workspace and navigate to Apps & Integrations.
In the left sidebar. Click Manage
Scroll to the bottom section labeled Workspace API Access
Click Generate API Token and copy the token.
Add the token to your .env file.

Security best practices

Never commit your .env file to version control. Be sure to add .env to your .gitignore file.

Next steps

After configuration, you can: