What's exported

When you export components from Webflow with the webflow devlink export command, DevLink generates a set of files designed for integration into your React application. By default, it puts these files in a webflow folder within your project.

The following file structure shows the files that the webflow devlink export command creates and exports when the devlink-export.ts config option is true. More information about these files is in the sections below.

<rootDir>/                         ← Root folder defined in webflow.json; default is webflow
├── DevLinkProvider.tsx            ← React context provider implementation
├── devlinkScope.ts                ← DEVLINK_SCOPE_CLASS constant (when cssScopes is enabled)
├── css/
│   ├── global.css                 ← Main stylesheet that imports the files below
│   ├── normalize.css              ← Browser reset (layered)
│   ├── defaults.css               ← Webflow base element defaults (layered)
│   ├── variables.css              ← CSS custom properties (layered)
│   ├── tags.css                   ← Tag selector rules (layered)
│   ├── classes.css                ← Class selector rules (layered)
│   └── fonts.css                  ← @font-face rules for custom fonts
│
├── <UserComponent>.tsx            ← Top-level user component
├── <Group>/                       ← Component group folder
│   └── <UserComponent>.tsx        ← Component grouped under <Group> in Webflow
├── <Library>/                     ← Library folder (one per imported library)
│   ├── <UserComponent>.tsx        ← Library component
│   └── <Group>/                   ← Library + group nesting
│       └── <UserComponent>.tsx
├── ...                            ← Additional user-exported components
│
└── webflow_modules/               ← DevLink engine and component system
    ├── devlink.js                 ← IX2 interactions engine (minified)
    ├── devlink.d.ts               ← Type definitions for the IX2 interactions engine 
    ├── interactions.tsx           ← React wrapper for IX2 engine
    ├── types.ts                   ← Shared type utilities
    ├── utils.ts                   ← Utility helper functions
    ├── fonts.manifest.json        ← Manifest of Google Fonts and Adobe Fonts in use
    ├── useInjectFonts.ts          ← Hook to load Google Fonts and Adobe Fonts at runtime
    │
    └── <CategoryName>/            ← Categories (Basic, Boolean, Number, etc.)
        ├── components/            ← React components for category (when present)
        └── helpers/               ← Utility functions for category (when present)

If you set devlink-export.ts to false in webflow.json, DevLink emits .jsx files instead of .tsx.

Exported files

For each Webflow component that you export, DevLink generates a ready-to-use React component. It also generates React components for Webflow components that the exported components rely on. Here’s a breakdown of what the webflow devlink export command creates and exports:

React components

You can drop an exported component directly into your React project and use it like any other React component, all while keeping the structure, styles, and functionality defined in Webflow.

When devlink-export.ts is true (the default), each component is emitted as a single .tsx file. When ts is false, DevLink emits a .jsx file instead.

The generated React component contains:

• Props: grouped, sanitized and typed based on the props defined in Webflow.
• Scoped classes: Webflow classes that are automatically scoped to the DEVLINK_SCOPE_CLASS wrapper using CSS @scope.
• Nested elements: a JSX hierarchy that mirrors your Webflow design, built with Webflow’s primitives (Block, Link, Image, etc.).
• Assets and media: images, dimensions, alt text, and link attributes are carried over automatically.
• Text content: any static text from your Webflow design is included in the output.
• Conditional visibility: visibility conditions compile to React code supporting Boolean, Enum, Number, Text, and Style Variant types.

Setting cssScopes to true selects DevLink style isolation, the recommended default. With it on, the exported files include a devlinkScope.ts module that defines the DEVLINK_SCOPE_CLASS constant, and each exported component wraps its root element in a <div> with that class so the generated CSS @scope rules apply only to your DevLink components. See Configuration options for the cssScopes default and other export defaults.

Styles

When you export with DevLink, you also get a set of CSS files that make your React app render Webflow components consistently with what you designed. These stylesheets normalize browser defaults, provide Webflow’s core utility classes, and set responsive breakpoints so exported components look and work like they do in Webflow.

DevLink writes a main css/global.css file that uses CSS @import and @layer directives to pull in the per-category files (normalize.css, defaults.css, variables.css, tags.css, classes.css) plus fonts.css. Importing css/global.css once at your app root applies the entire stylesheet.

When the cssScopes option is enabled in the webflow.json file, the rules in those category files are wrapped in a CSS @scope (.wf-devlink-<hash>) block so they only target elements inside the DEVLINK_SCOPE_CLASS wrapper.

Here are some details about these styles:

• Normalize / reset Based on normalize.css to align default styles across browsers.

• Base element styles Opinionated defaults for html, body, headings, paragraphs, lists, images, blockquotes, figures, etc.

• Webflow core utility classes Single-purpose helpers you can apply anywhere in your React project. Each class is named with a w- prefix.

• Component frameworks Predefined class systems for interactive Webflow elements like sliders, tabs, nav, dropdowns, lightbox, background video, and more.

• Icon font & glyphs @font-face for webflow-icons and [class^="w-icon-"] selectors.

• Responsive breakpoints Defaults around 991px, 767px, and 479px for container widths and column classes.

• CSS variables & theme defaults Variables from your Webflow site, plus base typography and link styles.

DevLinkProvider

DevLinkProvider is a React context provider that wires exported components into your app’s runtime.

You must wrap your root layout with DevLinkProvider so that all exported components get the correct rendering context, as in this example:

1
import { DevLinkProvider } from 'webflow/DevLinkProvider';
2
import 'webflow/css/global.css';
3
4
export default function RootLayout({
5
  children,
6
}: {
7
  children: React.ReactNode;
8
}) {
9
  return (
10
    <html lang="en">
11
      <body>
12
        <DevLinkProvider>
13
          {children}
14
        </DevLinkProvider>
15
      </body>
16
    </html>
17
  );
18
}

Webflow modules

In addition to React components and global styles, DevLink exports foundational code that the exported React components need, such as runtime helpers and component primitives. These are the building blocks that your exported components rely on to render consistently inside your React app.

These modules are generated in the webflow_modules folder inside the root folder of exported files. Here is a summary of the generated files in this folder:

• devlink: Core functionality.
• types: Type definitions.
• interactions: Interactions engine.
• utils: Helper functions and types that simplify class management and other common patterns in the generated code. Most notably, the cx() function is used to combine class names safely. Using this function keeps class names predictable and collision-free.
• fonts.manifest.json: Manifest of Google Fonts and Adobe Fonts in use.
• useInjectFonts.ts: Hook to load Google Fonts and Adobe Fonts at runtime.

Each file is emitted as either .ts/.tsx or .js/.jsx based on the devlink-export.ts setting in webflow.json.

If your components need them, DevLink exports other folders with handlers for other primitives, such as Boolean value handlers, number value handlers, or slider components.

Name changes

DevLink renames exported components, props, and custom attributes to ensure that the generated React code has valid, collision-free identifiers.

Components

DevLink converts component names to PascalCase and sanitizes them to ensure that they are valid JavaScript identifiers. It uses these rules:

• Spaces are removed and the resulting merged words are capitalized into PascalCase
• Emojis and special characters including leading underscores are removed
• Leading numbers in names are prefixed with UnknownComponent
• Reserved words are prefixed with UnknownComponent
• Duplicate names are given numeric suffixes

If these rules create an empty name or the component needs a prefix, DevLink uses UnknownComponent.

Examples:

Props

DevLink converts prop names to camelCase and sanitizes them to ensure that they are valid JavaScript identifiers. It uses these rules:

• Dashes and spaces are removed and the resulting merged words are capitalized into camelCase
• Emojis and special characters including leading underscores are removed
• Leading numbers in names are prefixed with unknownProp
• Reserved words are made unique with the Prop suffix
• Duplicate names are given numeric suffixes
• data-* and aria-* attributes are preserved as-is for HTML elements

If these rules create an empty name or the prop needs a prefix, DevLink uses unknownProp.

Examples:

Custom attributes

DevLink changes the names of custom attributes or filters them out when the current name is not valid in React. It uses these rules:

• HTML5 standard names such as tabindex and maxlength are capitalized according to React standards, in this example tabIndex and maxLength
• Attributes that have a React equivalent, such as class and for, are converted to the React equivalent, in this example className and htmlFor
• Attributes that match event handler names such as onClick and onMouseOver are filtered out, regardless of case
• Attributes that start with numbers are filtered out
• Attributes that are incomplete, such as data- and aria- are filtered out
• Attributes named with an empty string are filtered out
• Attributes containing invalid characters, such as my-😀-attr, are filtered out
• Any other invalid HTML5 attributes are filtered out

DevLink prints a warning to your CLI console, and adds JSDoc Invalid Attribute comments, when it filters out attributes due to these rules, except when removing attributes with an empty string as their name. For example, this exported code shows a warning about a custom attribute that was filtered out:

1
/**
2
 * ComponentWithInvalidAttributes
3
 *
4
 * @warning
5
 * The component could not be fully exported:
6
 * - Invalid attribute: \`onClick\`
7
 */
8
export function ComponentWithInvalidAttributes() {
9
  return <Block tag="div" data-testid="my-block" aria-label="My Block" />;
10
}

For more information about valid custom attribute names in React, see Props in the React documentation.

Next steps

FAQs