Getting Started

create-ydesign is a canvas-editor project scaffold, built specifically for spinning up @ydesign/react-editor-based editor projects fast.

It ships several vertical-scenario templates (full design editor / minimal editor / photo editor). Each scenario is planned to be available in both React and Vue, in either JavaScript or TypeScript.

🚧 Only the React flow is wired up for now. The Vue version is still under development — picking it will print a notice and exit. Stay tuned.

Prerequisites

Node.js 20.19+ / 22.12+ (same as Vite 7's requirement)
A package manager: npm / pnpm / yarn

Scaffolding your first Ydesign project

Run the command below and follow the prompts:

npm
pnpm
Yarn

npm create ydesign@latest

pnpm create ydesign

yarn create ydesign

The CLI then launches an interactive wizard that asks, in order:

Project name — defaults to ydesign-project, used as the directory name
Overwrite? (only when the target directory is non-empty) — "Remove existing files and continue / Ignore files and continue / Cancel"
Package name — asked only when the project name isn't a valid npm package name; auto-converted by default
Select a framework — React / Vue (under development)
Select a variant — TypeScript / JavaScript
Select a template — see Available templates below
Install with <pm> and start now? — pick Yes to automatically run install + dev; pick No to just generate the project and print the next commands

Here's the full flow (React + TypeScript + editor as an example):

✔ Project name:        my-editor
✔ Select a framework:  React
✔ Select a variant:    TypeScript
✔ Select a template:   editor
✔ Install with npm and start now?  Yes

Scaffolding project in /Users/you/my-editor...
Installing dependencies with npm...
Starting dev server...

  VITE  ready in 284 ms
  ➜  Local:   http://localhost:5173/

If you pick Vue at the framework step, the CLI prints a notice and exits:

🚧 The Vue version is still under development. Stay tuned!
   Currently available: React (JavaScript / TypeScript)

Specifying the project name and template directly

If you already know the project name and template, you can skip the prompts with command-line arguments:

npm
pnpm
Yarn

# note: npm needs an extra -- to forward args to the scaffold
npm create ydesign@latest my-editor -- --template react-editor-ts

pnpm create ydesign my-editor --template react-minimal

yarn create ydesign my-editor --template react-photo-ts

⚠️ About that -- with npm: npm create consumes its own arguments first; everything after -- is passed through to create-ydesign. So with npm you must put -- before --template, while pnpm / yarn don't need it.

--template (short: -t) follows the <framework>-<scenario>[-ts] naming. JavaScript versions have no suffix; TypeScript versions end with -ts (matching create-vite's convention):

react-editor-ts / react-editor
react-minimal-ts / react-minimal
react-photo-ts / react-photo

Available templates

Each scenario template ships in both TypeScript and JavaScript:

Scenario	Description	TypeScript	JavaScript
`editor`	Full design editor: topbar + side panel + toolbar + canvas + i18n + theme switching	`react-editor-ts`	`react-editor`
`minimal`	Minimal runnable editor: toolbar + canvas + zoom buttons only	`react-minimal-ts`	`react-minimal`
`photo`	Photo editor mode: upload / photos / masks / filters	`react-photo-ts`	`react-photo`

Every template is a standard Vite + React 18 project that includes:

@ydesign/react-editor and the required peer dependencies (antd, mobx, styled-components, etc.) preconfigured
The editor stylesheet import: import '@ydesign/react-editor/style.css'
A ready-to-run src/App.tsx (or src/App.jsx) example

🚧 Vue templates (vue-editor-ts / vue-editor, etc.) are under development and will ship alongside @ydesign/vue-editor.

CLI options

Option	Description
`-t, --template <name>`	Pick a template (skips the framework/variant/template prompts), e.g. `react-editor-ts`
`--overwrite`	Clear the target directory and continue if it's non-empty
`--install`	Automatically install dependencies and start the dev server after scaffolding
`--no-install`	Skip auto-install; just scaffold the project and print the next commands
`-h, --help`	Show help

ℹ️ Auto-install uses your current package manager: npm create ydesign runs npm install + npm run dev; yarn create ydesign runs yarn + yarn dev; pnpm create ydesign runs pnpm install + pnpm dev.

Running the project

If you answered Yes to "Install and start now?", the scaffold installs dependencies and starts the dev server for you — nothing else to do.

If you picked No, follow the printed commands:

cd my-editor
npm install
npm run dev

Open the browser to see the editor. The generated project structure looks roughly like this (using react-minimal-ts as an example):

my-editor/
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── src/
    ├── main.tsx          # App entry
    ├── App.tsx           # Editor example (create store + render components)
    └── vite-env.d.ts

The JavaScript variant (react-minimal) ships without tsconfig.* or vite-env.d.ts, with .jsx source files:

my-editor/
├── index.html
├── package.json
├── vite.config.js
└── src/
    ├── main.jsx
    └── App.jsx

src/App.tsx (or App.jsx) creates the editor's data source via createStore:

import createStore from '@ydesign/react-editor/model/store';
import '@ydesign/react-editor/style.css';

const store = createStore({
  key: 'YOUR_LICENSE_KEY', // 👈 replace with your YDesign License Key
});

🔑 The key in the templates is a placeholder. During local development you can keep the placeholder to get the UI running; replace it with your YDesign License Key for production use.

Don't want the scaffold?

The scaffold just saves you a few lines of config. To add the editor to an existing project, just install the package — no scaffold needed:

npm install @ydesign/react-editor

See Overview · Quick start for the integration code (one-line app / composition / headless).

Next steps

👉 Editor configuration — canvas size, units, init options
👉 Customizations — replace / extend UI components
👉 Side panel overview — using the 10 built-in panels
👉 Store API — read/write canvas state, import/export
👉 Theme & UI styling — dark mode and style customization

Have a question or a feature request? Open an issue on GitHub Issues.

Prerequisites​

Scaffolding your first Ydesign project​

Specifying the project name and template directly​

Available templates​

CLI options​

Running the project​

Don't want the scaffold?​

Next steps​