What DevLink Exports

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

The following file structure shows the files that the webflow devlink sync command creates and exports. More information about these files is in the sections below.

<rootDir>/                         ← Root folder defined in webflow.json; default is devlink
├── DevLinkProvider.js             ← React context provider implementation
├── DevLinkProvider.d.ts           ← TypeScript definitions for provider
├── css/
│   └── classes.module.css         ← Custom class styles as CSS modules
├── global.css                     ← Global styles and variables
│
├── <UserComponent>.js             ← User component implementation
├── <UserComponent>.d.ts           ← User component type definitions
├── ...                            ← Additional user-exported components
│
└── webflow_modules/               ← DevLink engine and component system
    ├── devlink.js                 ← IX2 interactions engine (minified)
    ├── devlink.d.ts               ← IX2 engine type definitions
    ├── interactions.js            ← React wrapper for IX2 engine
    ├── interactions.d.ts          ← IX2 wrapper type definitions
    ├── types.js                   ← Shared type utilities
    ├── types.d.ts                 ← Shared TypeScript types
    ├── utils.js                   ← Utility helper functions
    ├── utils.d.ts                 ← Utility function type definitions
    │
    └── <CategoryName>/            ← Categories (Basic, Boolean, Number, etc.)
        ├── components/            ← React components for category
        └── helpers/               ← Utility functions for category

React components

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.

These exports include:

• A JavaScript implementation that includes the React component itself, complete with built-in Webflow utilities and styles
• TypeScript definitions to provide type safety and autocompletion in modern editors

This means that you can drop the 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.

The generated React component contains:

• Props: including an as prop for overriding the top-level wrapper element.
• Scoped classes: Webflow classes mapped to CSS modules with a utility function (_utils.cx).
• 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.

Styles

When you export with DevLink, you also get a global stylesheet that makes your React app render Webflow components consistently with what you designed. This stylesheet normalizes browser defaults, provides Webflow’s core utility classes, and sets responsive breakpoints so exported components look and work like they do in Webflow.

If the cssModules option is enabled in the webflow.json file, Webflow creates a classes.module.css that contains the styles as CSS modules.

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.js

DevLinkProvider.js 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/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.

By default, these modules are generated to the webflow_modules folder inside the root folder of exported files. Here is a summary of the generated files in this folder:

Core files

• devlink.js and devlink.d.ts: Core functionality.
• types.js and types.d.ts: Type definitions.
• interactions.js and interactions.d.ts: Interactions engine.
• utils.js and utils.d.ts: 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 your scoped CSS module classes with Webflow class names safely. Using this function keeps class names predictable and collision-free.

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