幻彩（CHAM）

面向 React 应用的可视化页面编辑与低代码渲染引擎。

简体中文 | English

• 基于 Schema 的可视化页面编辑
• 响应式布局和样式编辑
• 可扩展的组件物料系统
• 基于插件的编辑器工作台
• 设计态与运行态渲染
• 完整的 TypeScript 类型支持

Chameleon 提供编辑器工作台、组件物料、属性面板、响应式布局、页面 Schema 以及设计态和运行态渲染能力。业务应用可以接入自己的组件、资源、页面数据和渲染策略。

快速开始

资源	地址
项目文档	Chameleon Docs
主编辑器 Demo	打开编辑器
布局调试 Demo	打开 Layout Debug
完整示例项目	chameleon-demo
GitHub 仓库	hlerenow/chameleon
npm 包	@chamn/engine

包结构

包	版本	说明
@chamn/engine	0.11.1	编辑器工作台、插件、面板和设计态交互
@chamn/model	0.11.1	页面 Schema、节点模型和物料类型
@chamn/render	0.11.1	运行态和设计态 React 渲染
@chamn/layout	0.11.1	画布布局、拖拽、选中和尺寸调整

更多版本信息请查看包变更记录 和 npm organization。

截图

安装

npm install @chamn/engine react react-dom

或使用 pnpm：

pnpm add @chamn/engine react react-dom

仓库开发环境要求 Node.js 22+ 和 pnpm 9+。

使用

Engine 需要页面 Schema 和插件列表。业务项目通常还需要传入自己的组件物料。

import React from 'react';
import { createRoot } from 'react-dom/client';
import '@chamn/engine/dist/style.css';
import { Engine, plugins } from '@chamn/engine';
import { EmptyPage } from '@chamn/model';

const App = () => (
  <Engine
    plugins={plugins.DEFAULT_PLUGIN_LIST}
    schema={EmptyPage}
    material={[]}
    onReady={({ engine }) => {
      console.log('Chameleon 已就绪', engine);
    }}
  />
);

createRoot(document.getElementById('root')!).render(<App />);

完整的自定义物料、iframe 渲染、第三方资源和页面持久化示例，请查看 chameleon-demo。

响应式断点

默认断点如下：

Key	名称	宽度
MODERN_PC	Modern PC	1920px
PC	PC	1200px
IPAD	Tablet	768px
MOBILE	Mobile	350px

可以通过 responsiveSizes 自定义断点：

<Engine
  plugins={plugins.DEFAULT_PLUGIN_LIST}
  schema={schema}
  responsiveSizes={[
    { key: 'LARGE', label: 'Large', width: 1440 },
    { key: 'PC', label: 'PC', width: 1200 },
    { key: 'TABLET', label: 'Tablet', width: 768 },
    { key: 'MOBILE', label: 'Mobile', width: 375 },
  ]}
/>

建议按照从大到小的顺序传入断点，以保证 max-width media 样式的覆盖顺序正确。

国际化

内置界面支持 zh_CN 和 en_US：

<Engine locale="en_US" {...engineProps} />;

engine.getI18n().changeLanguage('zh_CN');

加载 UI

编辑器加载期间可通过 loadingUI 传入自定义内容；未传入时不渲染任何内容。

<App loadingUI={<CustomLoading />} />

本地开发

pnpm install
pnpm run lint
pnpm run build
pnpm run run-tests

常用的 engine 命令：

pnpm --filter @chamn/engine build
pnpm --filter @chamn/engine lint
pnpm --filter @chamn/engine storybook

参与贡献

欢迎提交 Issue 和 Pull Request：

1. 提交新 Issue 前先搜索已有问题。
2. 保持改动范围清晰，并说明变更原因。
3. 行为变化时补充或更新测试。
4. 提交前运行 lint 和相关包的构建命令。

• Issue 列表
• 变更记录

许可证

Chameleon 使用 Apache License 2.0 开源。