Skip to content
sdlc

JSON Canvas board rendering and editing

State: open/verified · Kind: module · Audience: system

Summary

Section titled “Summary”
  • Vue 3 component (@augment/json-canvas-vue) rendering and editing JSON Canvas board files (Obsidian’s .canvas format) — pan/zoom, node drag/resize with snap guides, edge creation, in-place text editing, undo/redo — over @augment/json-canvas-core’s framework-agnostic model and operation engine.
  • Host-embeddable: nodeComponents let a host swap in live previews per node type, a canvasContent/change prop contract round-trips the document without loops, and readonly disables all mutation.

Statement

Section titled “Statement”

The ability to render an interactive JSON Canvas board (Obsidian .canvas files) and edit it in place — panning, node placement, resizing, edge drawing, text editing, alignment, undo/redo — as a Vue 3 component any host page can embed. It builds directly on the sibling @augment/json-canvas-core package (spec types, validation, the immutable operation engine, view-model math); core and vue ship together and together realize one board-editing ability, split along the framework boundary (core is framework-agnostic, vue is the Vue 3 renderer/editor). They are siblings, not parent and child.

What it provides

Section titled “What it provides”
  • Canvas component: rendering, editing, selection, keyboard shortcuts, an edit panel for colors/edge styling.
  • Pluggable MarkdownRenderer seam for text-node content (registerMarkdownRenderer/setActiveRenderer), sanitized via DOMPurify unless the renderer opts out.
  • Theming via a --vjc-* CSS variable contract plus a built-in dark palette.
  • Reference host: solutions/determined’s Notes experience (NotesCanvasView.vue); a standalone Vite demo with a Playwright suite and committed screenshots.

Underlying implementation

Section titled “Underlying implementation”
  • packages/ts/json-canvas-vue/src/components/Canvas, CanvasNode, EditPanel, ContextMenu
  • packages/ts/json-canvas-vue/src/composables/useCanvasOperations.ts, useCanvasViewModel.ts
  • packages/ts/json-canvas-vue/demo (Playwright-verified reference host)

Locations

Section titled “Locations”
  • packages/ts/json-canvas-vue/
  • packages/ts/json-canvas-vue/src/components/Canvas/index.vue

← Back to Capabilities