Client-only · ES modules · Framework-agnostic

Alpha release

A canvas for intent and information.

Elenweave is a client-only canvas engine for building interactive workspaces— graphs, navigation, HTML nodes, theming, events, and portable export.

Gallery Quick Start Components

Workspace · Graph · View · Navigator Intent-driven interaction DOM-backed HTML nodes Export PNG · JSON

Gallery preview

Live samples

Core primitives

Elenweave is built around four primitives: a multi-board workspace, a low-level graph model, a renderer/controller view, and a navigator for camera + selection.

ElenweaveWorkspace multi-graph

Creates, renames, switches, and exports boards. Handles moving nodes across graphs.

Create / rename / delete boards
Active graph navigation layer
Import/export workspace JSON

createGraph() setActiveGraph() exportWorkspace()

ElenweaveGraph nodes + edges

Low-level board model with ordering helpers, edges, serialization, and placement nudges.

Add/update/remove nodes + edges
Ordering helpers (before/after/index)
Hydrate/serialize for persistence

addNode() addEdge() serialize()

ElenweaveView render + input

Canvas renderer and interaction controller: selection, link mode, context menu.

Drag, resize, link, edit text
DOM-backed HTML nodes
Export Graph/Workspace + PNG

setLinkMode() registerComponent()

ElenweaveNavigator camera + selection

Two-tier navigation: zoom/pan + selection traversal with keyboard bindings and optional UI.

Directional selection (neighbors first)
Fit / focus / center actions
Optional skeuomorphic nav UI

fitToNodes() selectNext() bindKeyboard()

Quick Start

Copy, paste, and you have a workspace, a view, and a graph with nodes and an edge.

Install

npm or CDN

npm npm i elenweave

cdn https://cdn.jsdelivr.net/npm/elenweave@0.1.0/dist/elenweave.iife.min.js

ES modules · client-only

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

const workspace = new ElenweaveWorkspace();
const view = new ElenweaveView({
  canvas: document.querySelector('#bp'),
  workspace
});

const boardId = workspace.createGraph('Board 01');
workspace.setActiveGraph(boardId);

const a = view.addNode({ text: 'Start', x: 120, y: 120 });
const b = view.addNode({ text: 'Next', x: 420, y: 200 });
view.addEdge(a, b);

Install via npm i elenweave or use the CDN build ·

Workspace Active Graph View (Canvas) Navigator

Workspace manages multiple boards and the active board. Graph is the board model. View renders and controls a canvas. Navigator adds camera + selection traversal.

Guides

Browse the surface by focus area: primitives, capabilities, themes, components, and events.

Core primitives Workspace · Graph · View · Navigator

Foundations for data, rendering, interaction, and navigation across boards.

Key capability workspace + export

Multi-board workspaces, context menus, HTML overlays, and portable export.

Themes blueprint / light / dark

Preset themes and token overrides for both canvas and HTML overlays.

Components HTML nodes

DOM-backed nodes for custom UI, charts, and data-rich widgets.

Events workspace.on / view.on

Subscribe to graph lifecycle, selection, input, and context actions.

Themes & interaction defaults

Presets: blueprint, light, dark. Override individual tokens when you need. Interaction defaults are tuned for drag, resize, link, edit, and navigation.

Theme selection themeName

Pick a preset and override specific values (bg, nodeStroke, edge, selection).

This homepage mock is showing the site UI theme. In your library, themes apply to the view: options.themeName and options.theme.

Theme override

options.theme

const view = new ElenweaveView({
  canvas,
  workspace,
  options: {
    themeName: 'dark',
    theme: {
      bg: '#061526',
      nodeStroke: '#6fe7ff',
      edge: '#78dbff',
      selection: '#41ffb4'
    }
  }
});

Linking Shift+drag

Shift+drag to link, or toggle Link Mode. Edges can have color, label, and pulse.

Navigation keyboard

Arrow keys for directional selection, Tab for cycle, plus zoom/fit/focus actions.

Editing html-text

Double-click built-in HTML text nodes to edit. Changes persist to node.text.

HTML components inside nodes

HTML nodes render in a DOM overlay so they can receive clicks and input. Use data attributes to control dragging, selection targets, and link anchors.

Component registration loader()

data-ew-drag: constrain dragging to a handle
data-ew-select: element that selects node on pointer down
data-ew-link: start linking from a specific anchor

HTML nodes

DOM overlay

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

view.addNode({
  type: 'html',
  component: 'OptionPicker',
  x: 200, y: 140, w: 320, h: 160,
  props: { title: 'Route', options: ['A', 'B'] },
  data: { choice: 'A' }
});

Input controls forms

OptionPicker, MultiChoice, TextInput, SliderInput, DateTimeInput.

Charts SVG

LineChart, AreaChart, BarChart, ScatterChart, HeatmapChart, RadarChart, SparklineChart.

Media viewers audio + video

ImageViewer, VideoPlayer, AudioPlayer, MediaBatchInspector.

Data diagnostics monitoring

DatasetProfiler, FeatureDriftMonitor, AudioForensics.

System intelligence graph

CodeDependencyExplorer, DataLineageGraph, PipelineOrchestrator, GitLogHistory.

Events, notifications, and export

Elenweave is event-driven. Integrate with external state by subscribing to changes, and persist using Graph/Workspace exports (plus PNG snapshots).

Workspace events workspace.on

Track board lifecycle and movement across graphs.

graph:created, graph:active, graph:deleted
node:moved across boards

View events instrument

Listen for selection, input changes, and context menu actions.

selection, edge:selection
node:input, contextmenu:action

Export PNG + JSON

Persist via exportGraph/exportWorkspace.

GraphJson and WorkspaceJson shapes
PNG export returns a data URL