跳转到内容
Chameleon

Chameleon Engine

Schema-driven React editor

CHAMELEON / REACT VISUAL EDITOR

页面协议
变成可编辑的界面

Chameleon 是面向 React 应用的可视化页面编辑与低代码渲染引擎。用 Schema 保存页面，用 Material 描述业务组件，再由 Engine、Plugin 与 Render 串起编辑、预览和发布。

在线体验编辑器 ↗快速开始 →
Schema 驱动插件化工作台TypeScript 类型支持
ChameleonENGINE
MODEL
RENDER
PLUGIN
Schema页面协议是唯一数据源
Material业务组件即编辑器物料
Plugin工作台和交互可按需扩展
Render同一协议完成独立预览

Workbench

Chameleon Engine 工作台：大纲树、画布和属性面板
ENGINE WORKBENCHOutline → Canvas → Inspector

大纲树、画布和属性面板共同连接页面模型。一次导出 Schema，即可交由 Render 在任意场景中消费。

在线体验与示例

LIVE / EDITOR

主编辑器 Demo ↗

直接在浏览器中拖拽组件、编辑属性和样式，查看页面 Schema 的实时变化。

可视化编辑 · 组件物料 · 页面大纲LIVE / LAYOUT

Layout Debug ↗

验证画布布局、选中态、尺寸调整与响应式断点行为。

布局调试 · 拖拽交互 · 响应式SOURCE / DEMO

仓库 Demo 页面 ↗

查看仓库内的页面 Schema、物料和编辑器集成实现。

工作区源码 · Schema 示例 · 编辑器集成

Entry points

从最贴近当前任务的入口开始。
接入 Engine

用 Schema、物料和插件挂载最小编辑器。

理解架构

梳理 Engine、Model、Layout 与 Render 的职责。

构建预览

让保存后的页面在编辑器之外独立运行。

Runtime map

EngineWorkbench entry point; wires model, materials and plugins.API →
ModelOwns the node tree, selection, history and schema I/O.Schema →
LayoutHosts the canvas, panels, docking and drag surfaces.Source →
MaterialDefines componentName, props, setters, events and assets.Materials →
PluginAdds Designer, panels, shortcuts and custom workbench behavior.Plugins →
RenderMaps page and components into a design or production React tree.Render →

System flow

01EditMutate nodes, props and styles through the workbench.
02ExportPersist a portable page schema from pageModel.
03RenderResolve page, components and adapter into React.
04ShipLoad assets and publish an independent runtime page.

Quickstart

  1. 安装核心包
Terminal window
pnpm add @chamn/engine @chamn/model @chamn/render react react-dom

  1. 准备渲染器：Vite 项目直接导入 @chamn/render 的 UMD 地址，供编辑器 iframe 加载。

  2. 挂载 Engine：plugins 与 schema 是必填项；material 描述可编辑组件，assetPackagesList 提供组件运行资源。

import React from 'react';
import ReactDOM from 'react-dom';
import ReactDOMClient from 'react-dom/client';
import { Engine, InnerComponentMeta, plugins } from '@chamn/engine';
import renderJSUrl from '@chamn/render/dist/index.umd.js?url';
import '@chamn/engine/dist/style.css';


const win = window as any;
win.React = React;
win.ReactDOM = ReactDOM;
win.ReactDOMClient = ReactDOMClient;


const { DEFAULT_PLUGIN_LIST } = plugins;


export function Editor({ pageSchema, materials, assetPackagesList = [] }) {
  return (
    <Engine
      plugins={DEFAULT_PLUGIN_LIST}
      schema={pageSchema}
      material={[...InnerComponentMeta, ...materials]}
      assetPackagesList={assetPackagesList}
      renderJSUrl={renderJSUrl}
      onReady={({ engine }) => {
        console.log(engine.pageModel.export());
      }}
    />
  );
}