> This page is for DevLink.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server.

# What's exported

> A detailed breakdown of the files and configurations exported by DevLink for use in React projects.

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 (Classic + GSAP Interactions)
├── ix3-interactions.tsx           ← React provider and hook for Interactions with GSAP
├── 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                 ← Classic Interactions (IX2) engine (minified)
    ├── devlink.d.ts               ← Type definitions for the IX2 engine
    ├── interactions.tsx           ← React wrapper for the IX2 engine
    ├── devlink-ix3.js             ← Interactions with GSAP runtime (minified)
    ├── devlink-ix3.d.ts           ← Type definitions for the IX3 runtime
    ├── devlink-gsap.js            ← Per-export GSAP bundle (only the plugins this site uses)
    ├── 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.

> **Tip**
>
> What you design in Webflow is translated into React code, with flexibility for developers to integrate, extend, and style as needed.

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](/devlink/docs/component-export/installation#configuration-options) for the `cssScopes` default and other export defaults.

> **Do not manually edit exported components**
>
> DevLink auto-generates exported components. Any manual edits will be overwritten during the next export and your changes will be lost.

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

> **Note**
>
> Import the `css/global.css` stylesheet once at your app's root. With `cssScopes` enabled, the generated CSS rules are scoped to the `DEVLINK_SCOPE_CLASS` wrapper, which keeps Webflow styles from leaking into the rest of your application.

### `DevLinkProvider`

`DevLinkProvider` is a React context provider that wires exported components into your app's runtime.
It handles both Classic Interactions (IX2) and Interactions with GSAP (IX3); you do not need to compose a separate provider for the GSAP engine.

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

**`layout.tsx`**

```tsx title="layout.tsx"
import { DevLinkProvider } from 'webflow/DevLinkProvider';
import 'webflow/css/global.css';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <DevLinkProvider>
          {children}
        </DevLinkProvider>
      </body>
    </html>
  );
}
```

### `ix3-interactions.tsx`

The `ix3-interactions.tsx` file provides the `useIX3Interactions` hook and the `IX3Provider` context that exported components use to register their Interactions-with-GSAP animations.
You don't need to import this file directly.
`DevLinkProvider` nests `IX3Provider` automatically.
This file ships at the project root so individual exported components can reference it without a deep relative path.

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

#### Classic Interactions (IX2)

* `devlink.js` — Minified IX2 Interactions engine (page load, scroll, hover, and click animations).
* `devlink.d.ts` — Type definitions for the IX2 engine.
* `interactions.tsx` — React wrapper that mounts IX2 inside `DevLinkProvider`.

#### Interactions with GSAP (IX3)

* `devlink-ix3.js` — Minified runtime for Interactions with GSAP.
  Initializes GSAP, registers timelines, and runs animations defined in the new Webflow Designer Interactions panel.
* `devlink-ix3.d.ts` — Type definitions for `createIX3Engine`.
* `devlink-gsap.js` — A per-export GSAP bundle that contains only the GSAP plugins your site needs, such as `ScrollTrigger`, `SplitText`, and `CustomEase`.
  Bundle composition is determined automatically from the Interactions on your site — no configuration is required.
  Plugin dependencies are resolved transitively: `CustomBounce` pulls in `CustomEase`, `ScrollSmoother` pulls in `ScrollTrigger`, and so on.

The `devlink-ix3.js` and `devlink-gsap.js` files are dynamically imported by `ix3-interactions.tsx` only when a component that uses Interactions with GSAP renders.
Sites that don't use Interactions with GSAP — and pages that don't render an animated component — never fetch or execute these bundles.

Lightweight stub versions of both files are still emitted for sites without Interactions with GSAP.
The stubs satisfy bundler resolution for `import('./webflow_modules/devlink-ix3')` so production builds succeed in Webpack, Vite, Rollup, and esbuild without a "Cannot find module" error.

#### Shared modules

* `types.ts` — Type definitions.
* `utils.ts` — Helper functions and types that simplify class management and other common patterns in the generated code.
  Most notably, the `cx()` function combines class names safely, which 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:

| Component in Webflow                    | Exported component                            |
| --------------------------------------- | --------------------------------------------- |
| `My Component`                          | `MyComponent`                                 |
| `my component`                          | `MyComponent`                                 |
| `my-component`                          | `MyComponent`                                 |
| `My 😀 Component`                       | `MyComponent`                                 |
| `😀`                                    | `UnknownComponent`                            |
| `123`                                   | `UnknownComponent123`                         |
| `1Component`                            | `UnknownComponent1Component`                  |
| `class`                                 | `UnknownComponentClass`                       |
| `""` or `" "`                           | `UnknownComponent`                            |
| Multiple components named `MyComponent` | `MyComponent`, `MyComponent2`, `MyComponent3` |

### 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:

| Prop in Webflow | Exported prop    |
| --------------- | ---------------- |
| `MyProp`        | `myProp`         |
| `my-prop`       | `myProp`         |
| `my 🎉 prop`    | `myProp`         |
| `123 prop`      | `unknownProp123` |
| `123`           | `unknownProp123` |
| `class`         | `classProp`      |
| `key`           | `keyProp`        |
| `ref`           | `refProp`        |
| `class`         | `classProp`      |
| `for`           | `forProp`        |
| `""` or `" "`   | `unknownProp`    |
| `data-myprop`   | `data-myprop`    |

### Variant names

By default, DevLink exports Style Variant names as the `variant` prop's value exactly as you named them in Webflow. Turn on the [`camelCaseVariantNames`](/devlink/docs/component-export/installation#configuration-options) option to convert them to **camelCase** instead.
It uses these rules:

* Spaces and dashes are removed and the resulting merged words are capitalized into camelCase
* Emojis and special characters are removed
* Reserved words are made unique with the `Variant` suffix
* Duplicate names are given numeric suffixes

If these rules create an empty name, or the name starts with a number, DevLink uses `unknownVariant`.

Examples with `camelCaseVariantNames` turned on:

| Variant name in Webflow                    | Exported value      |
| ------------------------------------------ | ------------------- |
| `Papaya With Whip`                         | `papayaWithWhip`    |
| `My-variant`                               | `myVariant`         |
| `class`                                    | `classVariant`      |
| `1`                                        | `unknownVariant`    |
| `😊`                                       | `unknownVariant`    |
| Two variants named `Foo-Bar` and `Foo Bar` | `fooBar`, `fooBar2` |

### 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:

```tsx
/**
 * ComponentWithInvalidAttributes
 *
 * @warning
 * The component could not be fully exported:
 * - Invalid attribute: \`onClick\`
 */
export function ComponentWithInvalidAttributes() {
  return <Block tag="div" data-testid="my-block" aria-label="My Block" />;
}
```

For more information about valid custom attribute names in React, see [Props](https://react.dev/reference/react-dom/components/common#common-props) in the React documentation.

## Next steps

#### [Styling Components](/devlink/usage/styling-and-theming-overrides)

Learn how to style components for reliable export

#### [Using Components](/devlink/docs/component-export/usage)

Learn how to use the components you've exported

## FAQs

#### Can I adjust the exported components?

You can adjust the exported components by modifying the Webflow component in the Designer and re-exporting them. Any manual changes to the exported components will be overwritten when you re-export them.

#### Can I export React components as JSX?

By default, DevLink exports components as `.tsx` files. To emit `.jsx` files instead, set `devlink-export.ts` to `false` in your [DevLink configuration file](/devlink/docs/component-export/installation#configuration-options).

#### Does DevLink Export Custom Code?

DevLink exports any **Code Embed** elements inside a component. However, it doesn't export custom code from the page or site.

To include custom code with a DevLink component, add it using a Code Embed element placed inside the component.