LightDraw.js

Quick start

Create an app, add a shape, animate it.

const app = LightDraw.createApp('#app', {
  renderer: 'canvas',
  background: '#0d1322',
});

const dot = app.circle({ x: 80, y: 80, radius: 18, fill: '#3ecfcf' });
app.add(dot);
dot.animate({ x: 260, duration: 900, loop: true, reverse: true });

Open in playground Getting started guide

Theme packs

Put a theme pack on the scene root — one JSON styles UI, charts, and diagrams. Edit it in the JSON tab (no separate Theme tab).

app.loadJSON({
  type: 'group',
  theme: {
    preset: 'dark',
    primary: '#0ea5e9',
    text: '#f1f5f9',
    fontSize: '14px',
  },
  children: [ /* … */ ],
});

// Or at runtime:
app.applyTheme({ primary: 'pink', fontSize: '16px' });

Theme playground Theme guide

Scene JSON

Describe widgets as JSON — great for AI, configs, and the live JSON / API editors under every demo. Optional root theme styles the pack.

app.loadJSON({
  type: 'group',
  children: [
    { type: 'button', props: { label: 'Save', variant: 'primary', x: 16, y: 16 } },
    { type: 'gauge', props: { value: 72, size: 100, x: 16, y: 64 } },
  ],
});

Try UI demo AI + JSON guide

Component lab

Pick a family and component, see definition + where to use, then live-render only that component. Edit JSON or API below for an instant update. Families include UI (searchable tables), Dashboard (multi-series charts, dataTable), and Automotive telltales.

Open full lab UI schema Dashboard schema Automotive schema

UI components

Buttons, forms, searchable striped tables, dialogs — themed through the same pack.

app.loadJSON({
  type: 'group',
  theme: { preset: 'dark', primary: '#0ea5e9' },
  children: [
    { type: 'button', props: { label: 'Save', variant: 'primary', x: 16, y: 16 } },
    { type: 'table', props: {
      columns: ['Name', 'Status'], rows: [['Alpha', 'OK'], ['Beta', 'Warn']],
      showSearch: true, width: 260, x: 16, y: 64,
    }},
  ],
});

UI playground Component schema

Dashboard & charts

Gauges, meters, 85 chart types (multi-series lines/bars with auto colors), and searchable dataTable.

app.loadJSON({
  type: 'group',
  children: [
    { type: 'gauge', props: { value: 72, diameter: 120, x: 24, y: 24 } },
    { type: 'lineChart', props: { width: 280, height: 140, x: 180, y: 24,
      series: [
        { name: 'North', data: [12, 18, 15, 22, 28, 24] },
        { name: 'South', data: [8, 14, 20, 16, 22, 30] },
      ]}},
    { type: 'dataTable', props: {
      columns: ['Region', 'Sales'], rows: [['North', '120'], ['South', '86']],
      showSearch: true, width: 280, x: 24, y: 190,
    }},
  ],
});

// Pulse a live value:
LightDraw.animateLiveValue(gaugeNode, 'value', 82, 400);

Dashboard playground Widget schema

Automotive cluster

Instrument clusters (classic / sport / digital), individual telltales (MIL, beams, pedestrian), and an Individual dash demo tab.

app.loadJSON({
  type: 'group',
  theme: { automotive: 'sport' },
  children: [
    { type: 'instrumentCluster', props: {
      theme: 'sport', width: 880, height: 360,
      speed: 95, rpm: 3200, fuel: 68,
    }},
    // Or compose individuals: checkEngineLamp, lowBeamStatus, pedestrianDetection, …
  ],
});

Automotive playground Examples

Diagrams

Pick a diagram type — flowcharts, networks, UML, and more. In the studio: drag, resize, rotate, bend wires, and run wire flow (dashes / packets along a path; grey→yellow→green status tint; CAN bus uses virtual rail hops; library ▶⏸↻ + zoom when Flow is on). Connectors use smart 90° routing and free-port fan-out.

app.loadJSON({
  type: 'group',
  children: [
    { type: 'flowchart', props: {
      width: 480, height: 280, x: 16, y: 16,
      nodes: [
        { id: 'a', kind: 'start', label: 'Start' },
        { id: 'b', kind: 'process', label: 'Draw' },
        { id: 'c', kind: 'end', label: 'Done' },
      ],
      edges: [{ from: 'a', to: 'b' }, { from: 'b', to: 'c' }],
    }},
  ],
});

Diagram playground Diagram schema Wire flow guide

Animation

Switch motion demos with tabs — path, dash, morph, stagger, multi-property.

const dot = app.circle({ x: 80, y: 120, radius: 14, fill: '#3ecfcf' });
app.add(dot);
dot.animate({
  x: 320,
  duration: 900,
  loop: true,
  reverse: true,
  easing: 'easeInOutCubic',
});

Animation playground Animation guide