VectoJS Core Runtime

Use this skill to build canvas-native VectoJS scenes that remain accessible, automatable, and cleanly disposable.

Core workflow

1. Confirm installed package versions and inspect local source/docs when exact API behavior matters.
2. Start from @vectojs/core primitives: one Scene per canvas, Entity subclasses for custom drawing, and the built-in Rect/Circle/Group shape primitives (1.9.0+) for plain boxes, dots, and transform containers — no subclass needed.
3. Develop with @vectojs/devtools attached. Add the dep and gate attachDevtools(scene, …) behind a ?debug query flag so it never ships; the headless layer (pickInScene, inspectEntity, auditScene, auditSceneSelection, diagnoseDirty, inspectText) is the fast path for verifying geometry/state in tests and agent loops without the panel. One devtools instance per inspected Scene; detach on unmount.
4. Use world/local coordinate conversion in hit tests. Do not subtract only this.x once nested transforms, scale, or rotation are possible.
5. Expose semantics for interactive entities with getA11yAttributes().
6. Prefer scene.renderMode = 'onDemand' for static or event-driven UI; call scene.markDirty() after external mutations.
7. Always call scene.destroy() when the host framework unmounts.

For copyable examples, read references/scene-recipes.md.

Package layout

@vectojs/core owns the Scene/Entity runtime, renderers (Canvas/SVG/WebGL/WebGPU), a11y projection, and the Entity-based text renderers (MSDFTextEntity, SVGEntity, TextEntity/GridTextEntity). The lower-level engines are now standalone packages: @vectojs/text (BiDi, Arabic shaping, typography, MSDF fonts, prepared content grids), @vectojs/layout (LayoutEngine, LayoutWorkerManager, measurement), @vectojs/math (SpatialHashGrid, SpringPhysics), and @vectojs/animation (Easing, TweenDriver, SpringDriver). @vectojs/core depends on and re-exports all four, so import { LayoutEngine, SpringPhysics, … } from '@vectojs/core' and the @vectojs/core/{text,layout,renderer} subpaths keep working unchanged — prefer importing from the standalone packages only when you want a smaller dependency surface.