webflow-code-components

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Webflow Code Components

Webflow代码组件

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.

通过DevLink构建、定义并将React代码组件导入Webflow。代码组件允许你在代码库中开发高级交互式React组件，并将其作为共享库部署到Webflow，以便在画布上进行可视化组合。

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.tsx
```
file with
```
declareComponent
```
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.

前提条件： Webflow工作区需为Freelancer、Core、Growth、Agency或Enterprise方案（或站点为CMS、Business或Enterprise方案）。需安装Node.js 20+和npm 10+。

设置项目 — 安装CLI及依赖项
创建React组件 — 构建标准React组件
定义代码组件 — 创建包含
```
declareComponent
```
的
```
.webflow.tsx
```
文件
导入至Webflow — 运行
```
npx webflow library share
```
在画布中使用 — 在站点上安装该库，然后拖放组件

查看

references/quick-start.md

获取完整的端到端教程。

Key Concepts

核心概念

Shadow DOM isolation — Styles and DOM are sandboxed per component
Separate React roots — No shared React Context or state between components. Use URL params, browser storage, Nano Stores, or custom events
SSR by default — Server-rendered HTML is hydrated on the client. Disable with
```
ssr: false
```
for browser-only components
declareComponent
— Defines how your React component appears in Webflow. See
```
references/hooks.md
```
for the full API

Prop types — 11 types available (

Text

Rich Text

Text Node

Link

Image

Number

Boolean

Variant

Visibility

Slot

ID

)

Bundling — Webpack bundles your library (50MB max)

Shadow DOM隔离 — 样式和DOM按组件进行沙箱隔离
独立React根实例 — 组件之间不共享React Context或状态。可使用URL参数、浏览器存储、Nano Stores或自定义事件
默认启用SSR — 服务端渲染的HTML会在客户端进行水合。对于仅浏览器端组件，可通过
```
ssr: false
```
禁用SSR
declareComponent
— 定义React组件在Webflow中的展示方式。查看
```
references/hooks.md
```
获取完整API
属性类型 — 支持11种类型（
```
Text
```
、
```
Rich Text
```
、
```
Text Node
```
、
```
Link
```
、
```
Image
```
、
```
Number
```
、
```
Boolean
```
、
```
Variant
```
、
```
Visibility
```
、
```
Slot
```
、
```
ID
```
）
打包 — 使用Webpack打包你的库（最大50MB）

Important Notes

重要说明

File names are unique identifiers. Renaming a
```
.webflow.tsx
```
file creates a new component and removes the old one — existing instances on sites will break.
React Server Components are not supported. Use standard React components only.
Components can fetch data client-side, but APIs must support CORS and you must never embed API keys in component code.

文件名是唯一标识符。重命名
```
.webflow.tsx
```
文件会创建新组件并移除旧组件 — 站点上的现有组件实例将失效。
不支持React Server Components。仅可使用标准React组件。
组件可在客户端获取数据，但API必须支持CORS，且绝对不能在组件代码中嵌入API密钥。

Reference Documentation

参考文档

Each reference file includes YAML frontmatter with

name

description

, and

tags

for searchability. Use the search script in

scripts/search_references.py

to find relevant references.

每个参考文件都包含带有

name

、

description

和

tags

的YAML前置元数据，以便于搜索。使用

scripts/search_references.py

中的搜索脚本查找相关参考内容。

Getting Started

入门指南

references/introduction.md: Overview of DevLink and code components
references/quick-start.md: End-to-end tutorial from setup to canvas
references/installation.md: CLI installation,
```
webflow.json
```
config, authentication

references/introduction.md：DevLink和代码组件概述
references/quick-start.md：从设置到画布使用的端到端教程
references/installation.md：CLI安装、
```
webflow.json
```
配置、身份验证

Building Components

组件构建

references/define-code-component.md:
```
declareComponent
```
, props, decorators, options
references/hooks.md:
```
declareComponent
```
and
```
useWebflowContext
```
hook reference
references/component-architecture.md: Shadow DOM, SSR, state patterns, data fetching
references/styling-components.md: CSS in Shadow DOM, site variables, tag selectors
references/frameworks-and-libraries.md: Tailwind, styled-components, Emotion, Material UI, Shadcn/UI, Sass, Less

references/define-code-component.md：
```
declareComponent
```
、属性、装饰器、选项
references/hooks.md：
```
declareComponent
```
和
```
useWebflowContext
```
钩子参考
references/component-architecture.md：Shadow DOM、SSR、状态模式、数据获取
references/styling-components.md：Shadow DOM中的CSS、站点变量、标签选择器
references/frameworks-and-libraries.md：Tailwind、styled-components、Emotion、Material UI、Shadcn/UI、Sass、Less

Prop Types

属性类型

references/prop-types.md: All prop types with usage, return values, and examples
references/prop-types/text.md: Text — single-line text input
references/prop-types/rich-text.md: Rich Text — formatted HTML content
references/prop-types/text-node.md: Text Node — on-canvas editable text
references/prop-types/link.md: Link — URL with target and preload
references/prop-types/image.md: Image — asset library image selection
references/prop-types/number.md: Number — numeric input with range controls
references/prop-types/boolean.md: Boolean — true/false toggle
references/prop-types/variant.md: Variant — predefined option dropdown
references/prop-types/visibility.md: Visibility — show/hide toggle
references/prop-types/slot.md: Slot — child component insertion
references/prop-types/id.md: ID — HTML element identifier

references/prop-types.md：所有属性类型的用法、返回值及示例
references/prop-types/text.md：Text — 单行文本输入
references/prop-types/rich-text.md：Rich Text — 格式化HTML内容
references/prop-types/text-node.md：Text Node — 画布上可编辑的文本
references/prop-types/link.md：Link — 带目标和预加载设置的URL
references/prop-types/image.md：Image — 资产库图片选择
references/prop-types/number.md：Number — 带范围控制的数值输入
references/prop-types/boolean.md：Boolean — 真假切换开关
references/prop-types/variant.md：Variant — 预定义选项下拉菜单
references/prop-types/visibility.md：Visibility — 显示/隐藏切换
references/prop-types/slot.md：Slot — 子组件插入位
references/prop-types/id.md：ID — HTML元素标识符

Bundling & CLI

打包与CLI

references/cli.md: Webflow CLI commands, flags, CI/CD usage, troubleshooting
references/bundling-and-import.md: Webpack bundling, CLI import, CI/CD, debugging

references/cli.md：Webflow CLI命令、标志、CI/CD用法、故障排查
references/bundling-and-import.md：Webpack打包、CLI导入、CI/CD、调试

Help

帮助

references/faq.md: Frequently asked questions — setup, styling, imports, troubleshooting, performance

references/faq.md：常见问题 — 设置、样式、导入、故障排查、性能

Searching References

搜索参考文档

bash

undefined

bash

undefined

List all references with metadata

列出所有带元数据的参考文档

python scripts/search_references.py --list

Search by tag (exact match)

按标签搜索（精确匹配）

python scripts/search_references.py --tag <tag>

Search by keyword (across name, description, tags, and content)

按关键词搜索（覆盖名称、描述、标签和内容）

python scripts/search_references.py --search <query>

Search only prop type references

仅搜索属性类型相关参考文档

python scripts/search_references.py --prop-types python scripts/search_references.py --prop-types --tag <tag> python scripts/search_references.py --prop-types --search <query>

undefined

python scripts/search_references.py --prop-types python scripts/search_references.py --prop-types --tag <tag> python scripts/search_references.py --prop-types --search <query>

undefined

Scripts

脚本

scripts/search_references.py
: Search reference files by tag, keyword, or list all with metadata

scripts/search_references.py
：按标签、关键词搜索参考文档，或列出所有带元数据的参考文档