📐 Visual Circuit Editor and Calculator for Resistors, Capacitors, and Inductors
ParallelSeriesHTML5 is a web-based circuit editor and calculator. It allows users to draw circuits, organize components in series or parallel, and calculate equivalent values in real time. Circuits can be saved and loaded in JSON format, making this tool perfect for electronics enthusiasts, students, and engineers who want to design and analyze circuits visually and interactively.
- Interactive Circuit Editing
- Add, move, rotate, or delete components (wires are drawn but cannot be moved freely).
- Real-time visual feedback while drawing or dragging elements.
- Component Support
- Resistors, capacitors, and inductors.
- Series & Parallel Calculations
- Instantly compute equivalent values for selected sections of your circuit.
- Open a docked, resizable Solution Inspector that keeps the circuit visible while explaining series reductions, parallel reductions, inactive branches, and star-mesh transformations step by step using component names and values. The editor header and circuit stay together on the left, the inspector is a separate block on the right, and the expression panel remains full-width below them. On narrow screens, the inspector docks below the circuit.
- Select the solution method from an extensible method registry. The current method is Series/Parallel + Star-Mesh.
- Important: To perform calculations, specify StartNode and DestNode using the context menu on components or wires.
- JSON Storage
- Save and load circuits for future editing or sharing.
- Undo / Redo
- Flexible editing workflow.
- Mouse & Touch Support
- Left-click / tap → select components or draw wires
- Middle-click / two-finger drag → pan
- Scroll wheel / pinch → zoom
- Keyboard Shortcuts
S→ select toolW→ wire toolDelete/Backspace→ remove selected elementsR→ rotate selected component by +45°Ctrl+R→ rotate selected component by -45° (reload prevented)Ctrl+Z→ undoCtrl+Shift+Z→ redo
- Context Menu Controls
- Assign StartNode and DestNode for calculations
- Edit component values, rotate, delete, or assign nodes for wires and labels
Note:
- Wires cannot be moved after being drawn.
- The Parallel/Series action reduces delta (Δ), bridge, and mixed networks to an expression containing component values,
+,//, and parentheses. Irreducible sections are transformed numerically with star-mesh elimination before the final series/parallel reduction.
| Action | Input |
|---|---|
| Select / move components | Left-click or tap |
| Draw wires | Left-click on empty space / tap |
| Pan view | Middle-click drag / two-finger drag |
| Zoom | Scroll wheel / pinch |
| Delete element | Delete / Backspace |
| Rotate selected component | R / Ctrl+R |
| Undo / Redo | Ctrl+Z / Ctrl+Shift+Z |
| Switch tools | S → select, W → wire |
| Specify StartNode / DestNode | Right-click (context menu) on component or wire |
Draw your circuit visually and see series/parallel equivalents instantly.
Save or load circuits in JSON format for easy sharing.
{
"component": "R",
"ComponentNameCount": 12,
"zoom": 1.25,
"offsetX": -1140,
"offsetY": -535,
"components": {
"R1": {
"x": 1340,
"y": 970,
"value": "1k",
"angle": 0
},
"R2": {
"x": 1490,
"y": 930,
"value": "1k",
"angle": -45
},
"R3": {
"x": 1490,
"y": 1010,
"value": "1k",
"angle": 45
},
"R4": {
"x": 1570,
"y": 930,
"value": "1k",
"angle": 45
},
"R5": {
"x": 1570,
"y": 1010,
"value": "1k",
"angle": -45
},
"R6": {
"x": 1820,
"y": 920,
"value": "1k",
"angle": 0
},
"R7": {
"x": 1820,
"y": 1020,
"value": "1k",
"angle": 0
},
"R8": {
"x": 1940,
"y": 890,
"value": "1k",
"angle": 0
},
"R9": {
"x": 1940,
"y": 1050,
"value": "1k",
"angle": 0
},
"R10": {
"x": 1940,
"y": 990,
"value": "1k",
"angle": 0
},
"R11": {
"x": 1940,
"y": 950,
"value": "1k",
"angle": 0
}
},
"wires": [
{
"x1": 1420,
"y1": 980,
"x2": 1470,
"y2": 980
},
{
"x1": 1630,
"y1": 980,
"x2": 1730,
"y2": 980
},
{
"x1": 1730,
"y1": 980,
"x2": 1780,
"y2": 1030
},
{
"x1": 1730,
"y1": 980,
"x2": 1780,
"y2": 930
},
{
"x1": 1900,
"y1": 900,
"x2": 1900,
"y2": 930
},
{
"x1": 1900,
"y1": 960,
"x2": 1900,
"y2": 930
},
{
"x1": 1900,
"y1": 1000,
"x2": 1900,
"y2": 1030
},
{
"x1": 1900,
"y1": 1060,
"x2": 1900,
"y2": 1030
},
{
"x1": 2020,
"y1": 900,
"x2": 2020,
"y2": 930
},
{
"x1": 2020,
"y1": 930,
"x2": 2140,
"y2": 930
},
{
"x1": 2020,
"y1": 960,
"x2": 2020,
"y2": 930
},
{
"x1": 2020,
"y1": 1000,
"x2": 2020,
"y2": 1030
},
{
"x1": 2020,
"y1": 1030,
"x2": 2140,
"y2": 1030
},
{
"x1": 2020,
"y1": 1060,
"x2": 2020,
"y2": 1030
},
{
"x1": 2140,
"y1": 1030,
"x2": 2140,
"y2": 980
},
{
"x1": 2140,
"y1": 980,
"x2": 2310,
"y2": 980
},
{
"x1": 2140,
"y1": 930,
"x2": 2140,
"y2": 980
}
],
"labels": [
{
"text": "StartNode",
"angle": 0,
"nodeX": 1300,
"nodeY": 980,
"nodeParent": {
"type": "Component",
"value": "R1"
},
"offX": 0,
"offY": -15,
"radius": 5
},
{
"text": "DestNode",
"angle": 0,
"nodeX": 2310,
"nodeY": 980,
"nodeParent": {
"type": "Wire",
"value": 15
},
"offX": 0,
"offY": -15,
"radius": 5
}
]
}
Try it in your browser: ParallelSeriesHTML5