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

HTML Components

HTML nodes render in a DOM overlay so they can receive clicks and input.

1) ESM/CJS build (recommended) for components

JavaScript
import { ElenweaveWorkspace, ElenweaveView } from 'elenweave';
import { OptionPicker } from 'elenweave/components';
import 'elenweave/styles.css';

const workspace = new ElenweaveWorkspace();
const view = new ElenweaveView({ canvas, workspace });

view.registerComponent('OptionPicker', { render: OptionPicker });
view.addNode({
  type: 'html',
  component: 'OptionPicker',
  x: 200, y: 120, w: 320, h: 160
});

Register a component

JavaScript
view.registerComponent('OptionPicker', { loader: () => import('./components/option-picker.js') });

Add a node

JavaScript
view.addNode({
  type: 'html',
  component: 'OptionPicker',
  x: 200, y: 140, w: 320, h: 160,
  props: { title: 'Route', options: ['A', 'B'] },
  data: { choice: 'A' }
});
Components receive { node, api } where api.setData() writes back user input and api.emit() can emit node:input.

Dragging and selection hooks:
  • Add data-ew-drag to constrain dragging to a handle.
  • Add data-ew-select to elements that should select the node on pointer down.
  • Add data-ew-link to start linking from an element (even when Link Mode is off).
  • Resize handles appear on selected HTML nodes automatically; HTML nodes can be linked like canvas nodes.

Chart Components

The dev app ships with SVG-based chart components built on the HTML node system.

  • LineChart, AreaChart, BarChart, ScatterChart, HeatmapChart, RadarChart, SparklineChart
  • Charts read from node.data or node.props.

Common fields

  • title: header title
  • series: arrays of { name, color?, values? | points? }
  • labels: x-axis labels (line/area/bar)
  • axes: radar axis labels
  • matrix: heatmap 2D array
  • palette: series colors
  • minX/maxX/minY/maxY: axis overrides
  • legend: set false to hide

Example

JavaScript
view.addNode({
  type: 'html',
  component: 'LineChart',
  x: 200, y: 160, w: 380, h: 240,
  props: { title: 'Signal Trend', labels: ['Mon', 'Tue', 'Wed', 'Thu'] },
  data: {
    series: [
      { name: 'Alpha', values: [4, 6, 5, 8] },
      { name: 'Beta', values: [2, 4, 3, 5] }
    ]
  }
});