完整编辑器

这是 Ydesign 最常见的落地形态：一个开箱即用的完整设计编辑器，包含画布工作区、顶部工具栏、左侧业务面板（模板 / 文字 / 图片 / 形状 / 上传 / 背景 / 图层 / 尺寸 / 证件照 / AI 消除笔）、缩放控件等全部 UI。

对于大多数"快速接入"的场景，这是最推荐的起点。

最简 10 行代码

一行 createDesignEditorApp 就能搞定：

import { createDesignEditorApp } from '@ydesign/react-editor';
import '@ydesign/react-editor/style.css';

createDesignEditorApp({
  container: document.getElementById('root')!,
  key: 'YOUR_API_KEY',
});

打开页面就是一个完整的 Canva 风格编辑器，画布尺寸默认 1080 × 1080，所有功能已就绪。

按需裁剪面板

并不是每个业务都需要全部 10 个内置面板。用 sections 参数挑你需要的：

import { createDesignEditorApp } from '@ydesign/react-editor';

createDesignEditorApp({
  container: document.getElementById('root')!,
  key: 'YOUR_API_KEY',
  sections: ['templates', 'text', 'photos', 'shapes', 'background', 'layers'],
});

面板名完整列表：见 侧边面板总览。

组合式（完全自定义布局）

想把工具栏 / 侧边栏 / 画布按自己的方式排？用 createStore + 基础组件自由拼装：

import { createStore, DesignEditorContainer, SidePanelWrap, WorkspaceWrap, SidePanel } from '@ydesign/react-editor';
import Workspace from '@ydesign/react-editor/canvas/workspace';
import Toolbar from '@ydesign/react-editor/toolbar';
import ZoomButtons from '@ydesign/react-editor/toolbar/zoom-buttons';
import '@ydesign/react-editor/style.css';

const store = createStore({ key: 'YOUR_API_KEY' });

export default function App() {
  return (
    <DesignEditorContainer style={{ width: '100vw', height: '100vh' }}>
      <SidePanelWrap>
        <SidePanel store={store} />
      </SidePanelWrap>
      <WorkspaceWrap>
        <Toolbar store={store} />
        <Workspace store={store} />
        <ZoomButtons store={store} />
      </WorkspaceWrap>
    </DesignEditorContainer>
  );
}

深入阅读

• 👉 概览 · 快速上手 —— 完整的架构解析
• 👉 定制化 —— 如何替换 / 删减 / 扩展 UI
• 👉 侧边面板总览 —— 10 个内置面板的用途
• 👉 集成方式总览 —— 不用 React 也能嵌入