Setup

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 install -D @webflow/webflow-cli@latest

Create a configuration file

DevLink looks for a webflow.json file in the root of your project, which defines settings for DevLink setup and export. You can generate this file with the webflow devlink export command as described in Quickstart: DevLink Export, or you can write your own.

Here is an example webflow.json file for DevLink Export:

1
{
2
  "siteId": "69d8ea201293ab4c87c1a2e3",
3
  "devlink-export": {
4
    "rootDir": "./webflow",
5
    "components": ".*",
6
    "componentGroups": ".*",
7
    "ts": true,
8
    "cssScopes": true,
9
    "relativeHrefRoot": "/"
10
  }
11
}

Configuration options

siteId sits at the top of webflow.json; every other option below lives under the devlink-export object.

Details for some of these options are covered in sections below.

relativeHrefRoot

Controls how exported Link components rewrite href values for internal page links, section anchors, and CMS-page links. External URLs, mailto:, tel:, and asset links are exported as-is regardless of this setting.

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"

Next steps