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

UI components

Buttons, forms, 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: 'textInput', props: { label: 'Name', value: '', x: 16, y: 64, width: 200 } },
    { type: 'checkbox', props: { label: 'Remember me', checked: true, x: 16, y: 120 } },
  ],
});

UI playground Component schema

Dashboard & charts

Gauges, meters, and 80+ chart types with live value helpers.

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,
      data: [12, 18, 15, 22, 28, 24] } },
  ],
});

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

Dashboard playground Widget schema

Automotive cluster

Instrument clusters stay on classic / sport / digital palettes; app fontSize still scales labels.

app.loadJSON({
  type: 'group',
  theme: { automotive: 'sport' },
  children: [
    { type: 'instrumentCluster', props: {
      theme: 'sport', width: 880, height: 360,
      speed: 95, rpm: 3200, fuel: 68,
    }},
  ],
});

Automotive playground Examples

Diagrams

Pick a diagram type — no scrolling a type list. Flowcharts, networks, UML, and more.

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

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