API › Canvas

Elenweave Canvas API

A client-only JavaScript library under canvas/lib/, framework-agnostic, shipped as ES modules. The surface is structured around Workspace, Graph, View, and Navigator.

Client-only ES modules Multi-board workspaces Export PNG + JSON HTML nodes (DOM overlay)

Structured interaction

Data Shapes

Core payloads: Node, Edge, GraphJson, WorkspaceJson, Notification.

Node

TypeScript

{
  id: string,
  type: 'text' | 'image' | 'audio' | 'html' | 'html-text' | 'svg',
  x: number, y: number, w: number, h: number,
  text?: string,
  svg?: string,
  svgUrl?: string,
  img?: string,
  audioUrl?: string,
  color?: string,
  pulse?: boolean,
  fixed?: boolean,
  trusted?: boolean,
  component?: string,
  render?: (ctx) => HTMLElement,
  loader?: () => Promise<{ render: (ctx) => HTMLElement }>,
  data?: Record<string, any>,
  props?: Record<string, any>,
  meta?: any
}

Node type notes
html-text renders a built-in HTML text node. Double-click enters edit mode; text persists in node.text and updates on input/blur.
svg renders SVG markup or a URL on the canvas. Provide node.svg (raw markup) or node.svgUrl (URL). External URLs may require CORS if you plan to export.
trusted marks whether a node's inline component is trusted. When allowUntrustedComponents is false, untrusted components are blocked.

Edge

TypeScript

{ id: string, from: string, to: string, color?: string, pulse?: boolean, label?: string }

GraphJson

TypeScript

{ id: string, name: string, nodeOrder?: string[], nodes: Node[], edges: Edge[], notifications?: Notification[] }

WorkspaceJson

TypeScript

{ version: string, activeGraphId: string | null, graphs: GraphJson[] }

Notification

TypeScript

{ id: string, nodeId: string, timestamp: number, read: boolean, label?: string }