Integrations Overview

ydesign is designed to embed a canvas editor into any stack. The ecosystem is split into small, composable packages so you only install what you need.

Ecosystem

@ydesign/core        →  Canvas rendering core (pure TS, UI-free)
      │
      ├─────────────────────────┬─────────────────────────┐
      ▼                         ▼                         ▼
@ydesign/react-editor           @ydesign/vue-editor              (your own UI)
React UI layer         Vue UI layer (planned)

• @ydesign/core — canvas rendering core based on fabric.js v6. Every capability is exposed as a Handler. UI-framework agnostic.
• @ydesign/react-editor — the official React UI (currently published as @ydesign/react-editor), built on React 18 + Ant Design v6 + MobX + MST.
• @ydesign/vue-editor — the official Vue 3 UI. Planned — will be released after core and React versions stabilize.
• Your own UI — if you don't use React or Vue, you can build your own interface directly on top of @ydesign/core.

💡 You don't have to install everything. Pick the pieces you need.

Which integration should I choose?

Your case	Recommended approach	Doc
React project, full editor UI	Install @ydesign/react-editor directly	Overview
Vue project, full editor UI	@ydesign/vue-editor (coming soon)	Vue integration
Static HTML page, no bundler	Load UMD bundle via <script>	Frameworkless
Angular / Svelte / Solid / vanilla JS	Bundle the editor as a standalone module and expose a global factory	Non-React integration
Just a "open editor" button on your site	Embed via Ydesign Button iframe popup	Ydesign Button
Headless — bring your own UI	Depend on @ydesign/core only	Overview · headless

Decision map

╭────────────────────────────────────────────────────────────────╮
│  ① Lightest — Ydesign Button (a single <script>, iframe popup) │
│     Best for: marketing pages, blogs, product detail pages     │
│                                                                │
│  ② Light — Frameworkless (CDN <script>, global API)            │
│     Best for: no bundler, embed into existing HTML             │
│                                                                │
│  ③ Native — @ydesign/react-editor / @ydesign/vue-editor                      │
│     Best for: the whole app IS the editor                      │
│                                                                │
│  ④ Cross-framework — Non-React Integration                     │
│     Best for: host is Vue / Angular, but you want React UI     │
│                                                                │
│  ⑤ Headless — @ydesign/core only                               │
│     Best for: fully custom UI, reuse canvas capabilities       │
╰────────────────────────────────────────────────────────────────╯

Follow the links above for per-integration guides.