CANVAS2D · FRAMEWORK AGNOSTIC

A tree view built for living data.

Explore large hierarchies, inspect nested models and edit values in a compact canvas interface. Start with a complete DOM view or bring your own host.

Try the live views Get started

01 Virtual rows 02 Live updates 03 Typed API

operations / 2,400 nodes● LIVE DATA

Use the filter bar on 2,400 rows, expand a branch or sort a column. Values update in place.

INTERACTIVE DOCUMENTATION

The component is the demo.

These are live instances of virtual-tree-canvas. Change values, move rows and explore the hierarchy here.

01 · MODEL INSPECTOR · setModel

Edit the object itself.

Filter properties, expand arrays and use the native editors created from model metadata.

02 · VALUES · HEADER FILTER

Units stay with the value.

Filter properties in the first column header, then edit a numeric field. Display precision does not change the stored value.

03 · INTERACTION

Move rows in place.

Drag a row handle or use Alt + ↑/↓ while values keep updating.

04 · REAL DATA

Markets that actually move.

Streaming cryptocurrency prices, approximately 15 seconds delayed. Sort the columns or pause the stream; the table updates without rebuilding its rows.

Feed connects when the table is visible.Source: crypto-ai.dev · multi-exchange USD prices · ~15s delay

05 · ASSETS

One icon language.

The same SVG symbols used by the live views adapt to light and dark surfaces.

Browse all 95 icons

06 · MULTI-SELECTION

Move whole branches.

Hold Shift and drag to select a range. Then drag a selected row into either tree.

Projects

Drop here

A tree in a few lines.

Install the package, give the host a height and pass in rows. The view creates the canvas and manages rendering.

Read the full guide

JavaScript · ES modulesvirtual-tree-canvas

// npm install virtual-tree-canvas
import { TreeView } from 'virtual-tree-canvas';

const view = new TreeView(host, {
  initialExpandDepth: 2
});

view.setData([
  { id: 'fleet', label: 'Fleet' },
  { id: 'radar', parentId: 'fleet', label: 'Radar' }
]);