Nodes with meaning.
Link real electrical nets to labels and explanations. Hover and keyboard focus preview a connection; selection keeps it in view.
A small toolkit for explaining electronics
Circuit diagrams that explain themselves.
Make the connections the lesson. Turn a circuit document into an interactive figure, follow each electrical node, and take a clear SVG wherever you teach.
Try it in your browser. No account or generation service.
Learn to read the nodes →Start with a connection, not a calculation
A node is the whole conductor, not just a dot. Select A, B, or C in the figure to see what is connected and what the resistors separate.
01 / Voltage dividerInteractive SVG
Preview a label; select to keep it highlighted.
- VIN and R1.a share the input node. VIN is a terminal, not a drawn voltage source.
- R1.b, R2.a and VOUT share one output node, including the branch to VOUT.
- R2.b connects to GND, the reference node. R2 separates this conductor from B.
All nets shown. No selection.
Hover or focus A, B, or C to preview a node. Select to keep it highlighted. Escape or Show all clears selection. The download keeps your selection, not the preview.
Portable by design.
Export SVG with its annotations, legend, and caption. Use the same document in a React lesson or render it from the command line.
A contract for your tools.
A versioned JSON schema, discoverable catalog, and structured diagnostics give authors and agents the same local interface. No remote generation required.
The topology collection
9 topologies. Real connections.
From a first voltage divider to branches, bridges, and feedback. These are distinct circuit graphs, not a count of color or value variations.
- 01RC low-pass filter
- 02Voltage divider
- 03LED series circuit
- 04Loaded voltage divider
- 05Two-stage RC ladder
- 06Wheatstone bridge
- 07Full-wave bridge rectifier
- 08NPN low-side LED switch
- 09Inverting operational amplifier
Curated, role-based layouts. Not an arbitrary circuit autorouter or a simulator.
One document, multiple surfaces
Small enough to understand.
Yours to build on.
Start with a catalog example, edit its values and presentation, then render it. The core returns either SVG or actionable diagnostics, not a guess at your circuit.
For interactive lessons, CircuitLessonFigure from circuitkit/react links the diagram and legend. Your React app owns selection.
A first figure / TypeScript
import { loadExample, renderSVG } from "circuitkit";
const document = loadExample("voltage-divider");
const result = renderSVG(document);
if (result.ok) {
console.log(result.svg);
} else {
console.error(result.diagnostics);
}Build from source
Get started locally.
CircuitKit is not published to npm. Clone the source and build the library and CLI with Bun. Run bun run dev to open this app locally.
The import example assumes the built package is installed in your project from a local tarball. There is no registry install command yet.
From the repository / Terminal
git clone https://github.com/crafter-lab/circuitkit
cd circuitkit
bun install
bun run build