@clepit/react
@clepit/react 包为 Clepit 编辑器提供 React 组件：在服务器上输出成品 HTML 的 ClepitContent，以及仅在客户端运行、掌管 Editor.create 生命周期的 ClepitEditor。
npm: @clepit/react · npm: @clepit/core
安装
Shell
bun add @clepit/core @clepit/reactClepitContent
ClepitContent 通过 renderBlocks 把文档渲染成成品 HTML，因此可用于 Server Components、SSR 期间以及浏览器中。标记就在首次响应里：爬虫能读到，挂载时不会重绘。核心样式表作为由 React 去重的 标签随行。
TypeScript
import { ClepitContent } from '@clepit/react';
export const Article = ({ document }) => <ClepitContent data={document} />;交互式块在挂载后通过 @clepit/core 的 activateBlocks 激活：代码变体标签页、语言同步与复制按钮、openapi 响应标签页、表格 CSV 下载，全部在服务器渲染的标记上工作；只有交互式块的数据会传到浏览器。
可选属性：
| 字段 | 类型 | 必填 | 描述 |
|---|---|---|---|
| theme | 'auto' | 'light' | 'dark' | 否 | 'auto' |
| themeOverrides | { light?, dark? } | 否 | ThemeTokens |
| context | { docHref?, mapsEmbedKey?, activeVariant? } | 否 | |
| transformHtml | (html: string) => string | 否 | |
| className | string | 否 | |
| testId | string | 否 |
ClepitEditor
ClepitEditor 仅在客户端运行，且位于独立的子路径上，因此导入内容展示组件绝不会把编辑代码拉进服务器包。该组件掌管 Editor.create 的生命周期：effect 时机与 StrictMode 安全的销毁。
TypeScript
'use client';
import { ClepitEditor } from '@clepit/react/editor';
export const Compose = ({ initialData, onSave }) => (
<ClepitEditor
initialData={initialData}
onChange={data => onSave(data)}
placeholder='Start writing'
/>
);Props 是来自 @clepit/core 的 EditorConfig 去掉 containerId（组件渲染自己的容器），外加 id、className、testId 和 onApi，后者接收 Editor.create 返回的 EditorAPI。编辑器是非受控的：值字段仅在挂载时读取一次，回调始终看到最新一次渲染的 props，卸载会销毁实例。