Run an editor in five minutes

Start with Node.js 22 or newer and a small TypeScript project:

Copynpm create vite@latest kjdraw-five-minute -- --template vanilla-ts
cd kjdraw-five-minute
npm install
npm view @kanjieteam/kjdraw dist-tags
npm install @kanjieteam/kjdraw

These instructions use the stable latest channel. Check the actual registry tags above; a checkout version is not a publication claim. If a mirror is stale, use the official registry or the source checkout steps. Pin the exact published version for reproducible builds.

Replace src/main.ts with the complete example below. The workbench injects its own component styles; the host element only needs an explicit height.

Copyimport { createKJDrawEditor } from '@kanjieteam/kjdraw'

document.querySelector<HTMLDivElement>('#app')!.innerHTML = '<div id="cad"></div>'
const host = document.querySelector<HTMLElement>('#cad')!
host.style.cssText = 'width:100%;height:720px'

const editor = createKJDrawEditor('#cad', {
  document: 'sample',
  locale: 'en',
  theme: 'dark',
  onSelectionChange: ({ ids }) => console.log(ids),
})

await editor.ready
await editor.execute('CREATE', {
  type: 'CIRCLE',
  payload: { center: [20, 20, 0], radius: 5 },
})
editor.fit()

Run npm run dev, open the printed local URL, and confirm that the sample drawing and the new 5 mm-radius circle are visible. Use editor.open(file) for KJD or DXF input and editor.save() to download the current drawing. This closes the first editable create–inspect–save loop without a model or API key. The Editor API lists every option, method and event.

Verify the headless SDK

Prefer a complete checked-in project? Copy the maintained Vanilla browser starter, or compare every supported starter project.

The installed package also ships a deterministic Node example. It creates and moves a line, writes KJD, reopens it and prints the verified entity:

Copynode node_modules/@kanjieteam/kjdraw/examples/quickstart.mjs

Use this check first when a browser integration fails: it separates SDK and package problems from bundler or layout problems.

Open an industry sample

Copyimport { createKJDrawEditor, createKJDrawSDK } from '@kanjieteam/kjdraw'
import {
  INDUSTRY_SAMPLES,
  createIndustrySample,
} from '@kanjieteam/kjdraw/samples'

const sdk = createKJDrawSDK()
console.table(INDUSTRY_SAMPLES)

const drawing = await createIndustrySample(sdk, 'sample-architecture')
const editor = createKJDrawEditor('#cad', { sdk, document: drawing })
await editor.ready

The sample catalogue also includes a site plan, road profile and mechanical manufacturing drawing. Each result is a normal editable KJDocument, so the same file, command and plugin APIs apply.

Use multiple editors

Pass the same sdk to share plugins and commands, and give each editor its own container with a height. Use editor.execute() to target a specific editor, or pass an explicit document when calling the SDK directly. See Commands and transactions for background editing examples.

Blank and sample drawings created by an editor are released after their last editor view closes. A drawing supplied through document remains owned by your application. Two views can display the same drawing; replacing it by reopening a file with the same ID is rejected while another view still uses it, so that view keeps its drawing and selection.

Continue to React or Vue for framework components, Files for KJD/KJP/DXF, or Commands for programmatic editing.