Installation

This reference covers the configuration required to export Webflow components into a React project using DevLink.

Install the Webflow CLI

Install the CLI as a development dependency to your React project to bundle and publish your component library:

$
npm i --save-dev @webflow/webflow-cli

Create a configuration file

DevLink looks for a webflow.json file in the root of your project, which defines settings for DevLink setup and sync.

1
{
2
  "devlink": {
3
    "rootDir": "./devlink",
4
    "cssModules": true,
5
    "fileExtensions": {
6
      "js": "jsx"
7
    }
8
}

Configuration options

While DevLink will try to assume reasonable defaults for most of the settings, you can specify certain options to customize the behavior of DevLink management and setup.

skipTagSelectors

When true, DevLink filters out global CSS rules with certain selectors, producing a smaller global.css file. Specifically, it removes:

• Tag selectors (e.g., div, p, h1)
• ID selectors (e.g., #myId)
• Attribute selectors (e.g., [type="text"])
• Pseudo-class selectors (e.g., :hover, :focus) - except for :root

This is useful when you only want class-based styles from Webflow and prefer to exclude global tag defaults. Empty rules are dropped entirely.

relativeHrefRoot

Controls how relative href values are rewritten in exported Link and Image components.

Example:

• With "/":

  • Page link to “About” → href="/about"
  • Section link → href="#contact-section"
  • CMS page link → href="/blog/my-blog-post"

• With "https://my-site.com":

  • Page link to “About” → href="https://my-site.com/about"
  • Section link → href="https://my-site.com#contact-section"
  • CMS page link → href="https://my-site.com/blog/my-blog-post"

envVariables

Inject environment variables into components. Useful for APIs like Maps or Recaptcha.

1
{
2
  "devlink": {
3
    "envVariables": {
4
      "GOOGLE_MAPS_API_KEY": process.env.MY_GOOGLE_MAPS_API_KEY,
5
      "GOOGLE_RECAPTCHA_API_KEY": "MY_GOOGLE_RECAPTCHA_API_KEY"
6
    }
7
  }
8
}

fileExtensions

Customize the extensions used for exported component files.

1
{
2
  "devlink": {
3
    "fileExtensions": {
4
      "js": ".jsx",
5
      "css": ".less"
6
    }

Next steps