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"

camelCaseVariantNames

By default, the variant prop on an exported component accepts Style Variant names exactly as you named them in Webflow, for example "Papaya With Whip". Turn on camelCaseVariantNames to convert each variant name into a camelCase value instead, so it reads more naturally in your React code. Variant names that produce the same camelCase value get a numeric suffix so they stay unique.

Names that would produce an invalid value — like one that’s just a number, or a JavaScript reserved word such as class — fall back to a safe placeholder instead.

Example:

With camelCaseVariantNames set to false (default):

1
<Card variant="Papaya With Whip" />

With camelCaseVariantNames set to true:

1
<Card variant="papayaWithWhip" />

Variant names Foo-Bar and Foo Bar both normalize to fooBar, so the second one exports as fooBar2.

Next steps