Elenweave logo
Elenweave Canvas For Intent And Information
Try The App Read the Docs
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
Elenweave canvas sample 1
Elenweave canvas sample 2
Elenweave canvas sample 3
Elenweave canvas sample 4

The AI Canvas

Tell the canvas the intent, and it weaves a linked graph back in structured steps.

gpt-5-mini gemini-3-flash-preview ew-actions/v1 BYO keys Multimodal uploads Gemini Live audio
Weave Now Link to GitHub Repo
Structured plans ew-actions/v1

JSON-only responses add or update nodes + edges, with auto-placement (no x/y) to keep the canvas tidy.

nodes + edges add / update auto-place
Context-aware intent selection-first

Board snapshots and the last four turns are included only when nothing is selected. Multi-select nodes to steer the AI.

board snapshot last 4 turns per-board history
Component fluent HTML + charts

Understands built-in inputs, media viewers, charts, and MarkdownBlock for formatted responses.

OptionPicker Media players MarkdownBlock
Multimodal intake images / audio / files

One upload control handles images, audio, and text/code files. Audio is transcribed with Whisper (OpenAI) or read inline for Gemini, and file content is safely truncated.

Follow-up questions Run mode

AI can request details via TextInput or OptionPicker nodes. Selecting them switches Send to Run for fast follow-ups.

Realtime audio Gemini Live

Streamed voice sessions with live states plus tool calls for pan, zoom, fit, focus, and center. Audio is saved back on the canvas.

Applied responses auto-link

Parsed output links context and attachment nodes to a primary response, focuses the camera, and drops a notification.

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/[email protected]/dist/elenweave.iife.min.js 
Loading quick-start.html...
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()

Register a component by name. Then spawn nodes with type: "html" and component.

  • 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