webflow-code-components
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+.
- Set up your project — Install the CLI and dependencies
- Create a React component — Build your standard React component
- Define the code component — Create a
.webflow.tsxfile withdeclareComponent - Import to Webflow — Run
npx webflow library share - 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
More from 224-industries/webflow-skills
webflow-designer-api
Work with the Webflow Designer API — either by building Designer Extensions (iframes inside the Webflow Designer) or by generating code snippets for the Designer API Playground. Covers element manipulation, styles, components, pages, variables, assets, error handling, CLI usage, and UI design patterns. Use when creating, debugging, or modifying Designer Extensions, OR when the user wants to run Designer API code in the Playground app.
149webflow-webhooks
Receive and verify Webflow webhooks. Use when setting up Webflow webhook handlers, debugging signature verification, or handling Webflow events like form_submission, site_publish, ecomm_new_order, or collection item changes.
42webflow-browser-api
Control Webflow Analyze and Optimize from JavaScript via the Browser API. Use when managing tracking consent, integrating CMPs (OneTrust, TrustArc), tracking experiment variations, setting custom visitor attributes, or personalizing user experiences.
39webflow-enterprise-api
Webflow Enterprise API endpoints for workspace management, audit logs, site activity, 301 redirects, robots.txt, and well-known files. Use when working with Enterprise-only Webflow API endpoints that require an Enterprise workspace.
38memberstack-cli
Use the Memberstack CLI to manage Memberstack accounts from the terminal. Covers authentication, apps, members, plans, custom fields, data tables, and records. Trigger this skill whenever the user wants to interact with Memberstack — including managing members, plans, custom fields, data tables/records, or authenticating with Memberstack. Also trigger when the user mentions "memberstack", "memberstack-cli", membership management, or member data operations via CLI.
6webflow-designer-extension
Build Webflow Designer Extensions that run inside the Webflow Designer. Use when creating, debugging, or modifying Designer Extensions (iframes that interact with Webflow's Designer API). Covers CLI usage, element manipulation, styles, components, pages, variables, assets, error handling, and UI design patterns for Webflow's design system.
6