Skip to main content

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 create ydesign@latest

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

  1. Project name — defaults to ydesign-project, used as the directory name
  2. Overwrite? (only when the target directory is non-empty) — "Remove existing files and continue / Ignore files and continue / Cancel"
  3. Package name — asked only when the project name isn't a valid npm package name; auto-converted by default
  4. Select a framework — React / Vue (under development)
  5. Select a variant — TypeScript / JavaScript
  6. Select a template — see Available templates below
  7. 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:

# note: npm needs an extra -- to forward args to the scaffold
npm create ydesign@latest my-editor -- --template react-editor-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:

ScenarioDescriptionTypeScriptJavaScript
editorFull design editor: topbar + side panel + toolbar + canvas + i18n + theme switchingreact-editor-tsreact-editor
minimalMinimal runnable editor: toolbar + canvas + zoom buttons onlyreact-minimal-tsreact-minimal
photoPhoto editor mode: upload / photos / masks / filtersreact-photo-tsreact-photo

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

  • @ydesign/react-editor and the required peer dependencies (react, mobx, mobx-react-lite, mobx-state-tree, 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​

OptionDescription
-t, --template <name>Pick a template (skips the framework/variant/template prompts), e.g. react-editor-ts
--overwriteClear the target directory and continue if it's non-empty
--installAutomatically install dependencies and start the dev server after scaffolding
--no-installSkip auto-install; just scaffold the project and print the next commands
-h, --helpShow 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​

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