Webflow Code Components

Build, define, and import React code components into Webflow using DevLink. Code components let you develop advanced, interactive React components in your codebase and deploy them to Webflow as shared libraries for visual composition on the canvas.

Quick Start

Prerequisite: Webflow Workspace on Freelancer, Core, Growth, Agency, or Enterprise plan (or a site on CMS, Business, or Enterprise). Node.js 20+ and npm 10+.

1. Set up your project — Install the CLI and dependencies
2. Create a React component — Build your standard React component
3. Define the code component — Create a .webflow.tsx file with declareComponent
4. Import to Webflow — Run npx webflow library share
5. Use on canvas — Install the library on a site, then drag and drop components

See references/quick-start.md for a full end-to-end tutorial.

Key Concepts