Documentation

Installation

npm install @skillpet/circuit

Quick Start

import { renderFromJson, mountFromJson } from '@skillpet/circuit'

// Static SVG string
const svg = renderFromJson({
  elements: [
    { type: 'SourceV', label: 'V₁' },
    { type: 'Resistor', d: 'right', label: '1kΩ' },
    { type: 'Capacitor', d: 'down', label: '10μF' },
    { type: 'Line', d: 'left' },
  ]
})
document.getElementById('root').innerHTML = svg

// Interactive mount
const ctrl = mountFromJson(
  document.getElementById('root'),
  circuitJson,
  { theme: 'auto', interactive: true }
)

ctrl.on('elementClick', (info) => console.log(info))
ctrl.destroy()  // cleanup

JSON Specification

Colors & Gradients

Set per-element colors and enable gradient transitions between adjacent elements.

{
  "drawing": { "colorTransition": true },
  "elements": [
    { "type": "SourceV", "color": "#3498db", "label": "V₁" },
    { "type": "Resistor", "d": "right", "color": "#e74c3c", "label": "R₁" },
    { "type": "Capacitor", "d": "down", "color": "#2ecc71", "label": "C₁" },
    { "type": "Inductor", "d": "left", "color": "#9b59b6", "label": "L₁" }
  ]
}

Theme System

Built-in themes: default dark print auto

theme: "auto" to read from CSS variables on the host page. Define these variables on :root:

/* Light mode */
:root {
  --circuit-bg: transparent;
  --circuit-stroke: #1a1a1a;
  --circuit-text: #1a1a1a;
}
/* Dark mode */
.dark {
  --circuit-stroke: #c8d6e5;
  --circuit-text: #dfe6e9;
}

Interactive API

const ctrl = mountFromJson(el, json, { interactive: true })

// Events
ctrl.on('elementClick', (info) => { /* { id, type, meta } */ })
ctrl.on('elementHover', (info) => { /* { id, type, meta } */ })

// Highlight
ctrl.highlight('R1')
ctrl.clearHighlight()

// Theme
ctrl.setTheme('dark')
ctrl.setTheme('auto')

// Cleanup
ctrl.destroy()

Component Reference (178)

All available component types, organized by category.