KJDrawKJDRAW / STARTER PROJECTS
Starter projects
Copy and run maintained Node, MCP, Vanilla, React and Vue consumers of the public package.
Choose a starter
Every starter is a small independent project under examples/starters. They use the same public package entries documented by the API reference and are compiled or executed by the repository test suite.
| Project | Result | First command |
|---|---|---|
| Node + TypeScript | Writes and reopens editable KJD and DXF | npm run start |
| MCP stdio client | Produces a host-bounded review candidate | npm run start |
| Vanilla browser | Mounts the complete editor with Vite | npm run dev |
| React browser | Mounts the supported React component | npm run dev |
| Vue browser | Mounts the supported Vue component | npm run dev |
Copy one directory, run npm install, then run the listed command. Node.js 22 or newer is required. Pin an exact KJDraw version instead of next when your application needs reproducible builds.
Expected results
The Node starter prints a JSON receipt and writes circle.kjd plus circle.dxf. The MCP starter writes a new KJD/DXF/SVG/HTML candidate set under its host-selected workspace without changing the source drawing. Each browser starter shows the complete editor and a button or startup action that creates a native 5 mm-radius circle.
These are runnable integration projects, not screenshots. The automated consumer regression bundles all three browser entries, reopens both Node outputs, and performs the MCP initialize–list–call exchange against the packaged server.
Troubleshoot
- A blank browser page: give the editor host a non-zero height and inspect the browser console.
- Package resolution fails: remove the starter's
node_modules, confirm Node.js 22+, and runnpm installagain. - MCP exits before initialization: run the package's
kjdraw-mcp --check-tool-schemas, then verify every configured path is absolute or inside the selected workspace as required by the MCP guide. - A drawing does not reopen: retain the generated file and complete terminal error; do not replace it with a screenshot.
Continue with the Editor API, complete TypeScript reference, or MCP integration.