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.
If you set devlink-export.ts to false in webflow.json, DevLink emits .jsx files instead of .tsx.
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:
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:
DEVLINK_SCOPE_CLASS wrapper using CSS @scope.Block, Link, Image, etc.).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 for the cssScopes default and other export defaults.
DevLink auto-generates exported components. Any manual edits will be overwritten during the next export and your changes will be lost.
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.
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.
DevLinkProviderDevLinkProvider 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:
ix3-interactions.tsxThe 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.
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.
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.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.
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.
DevLink renames exported components, props, and custom attributes to ensure that the generated React code has valid, collision-free identifiers.
DevLink converts component names to PascalCase and sanitizes them to ensure that they are valid JavaScript identifiers. It uses these rules:
UnknownComponentUnknownComponentIf these rules create an empty name or the component needs a prefix, DevLink uses UnknownComponent.
Examples:
DevLink converts prop names to camelCase and sanitizes them to ensure that they are valid JavaScript identifiers. It uses these rules:
unknownPropProp suffixdata-* and aria-* attributes are preserved as-is for HTML elementsIf these rules create an empty name or the prop needs a prefix, DevLink uses unknownProp.
Examples:
DevLink changes the names of custom attributes or filters them out when the current name is not valid in React. It uses these rules:
tabindex and maxlength are capitalized according to React standards, in this example tabIndex and maxLengthclass and for, are converted to the React equivalent, in this example className and htmlForonClick and onMouseOver are filtered out, regardless of casedata- and aria- are filtered outmy-😀-attr, are filtered outDevLink 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:
For more information about valid custom attribute names in React, see Props in the React documentation.
Learn how to style components for reliable export
Learn how to use the components you’ve exported
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.
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 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.