Skip to main content

Interface

A map of every UI element in the Circuit Builder editor.

Layout overview​

The editor is divided into five main areas:

┌─────────────────────────────────────────────────┐
│ Top Bar │
├──────────┬──────────────────────────┬────────────┤
│ Component│ │ Properties │
│ Panel │ Canvas │ Panel │
│ (left) │ │ (right) │
├──────────┴──────────────────────────┴────────────┤
│ Status / Simulation Bar │
└─────────────────────────────────────────────────┘

Top bar​

ElementDescription
Board nameClick to rename the current board
Project menuOpen, save, export, import, and clear boards
Undo / RedoStep backward or forward through changes
ShareOpen the share modal
Simulation controlsStart, pause, and stop simulation
Collaboration indicatorShows connected users with their avatars
Presentation modeEnter fullscreen view-only mode

Component panel (left sidebar)​

The component panel lists all available components organized by category:

  • Power — Battery, Sine Generator, Square Generator, Ground
  • Passive — Resistor, Rheostat, Capacitor (polarized), Capacitor (NP), Inductor, Transformer
  • Diodes — Diode, LED
  • Transistors — NPN, PNP
  • MOSFETs — N-Channel, P-Channel
  • Switches — Push Button, Toggle Switch, SPDT Switch, Multi Switch
  • Active — Bulb, Relay, Optocoupler
  • Measuring — Ammeter, Voltmeter
  • Other — Junction

Click any component to place it on the canvas. The panel scrolls if not all categories fit.

Canvas​

The main drawing area where you place components and draw wires. Key canvas features:

  • Infinite grid — The canvas extends in all directions; pan with middle-click or Space+drag
  • Zoom — Scroll wheel to zoom in/out; zoom level shown in the bottom-right corner
  • Snap-to-grid — Components snap to the grid for clean alignment
  • Selection — Click a component to select it; Shift+click to multi-select; drag to box-select

When simulation is running, wires animate with moving dots showing current direction and speed.

Properties panel (right sidebar)​

Opens when you select a component. Shows all configurable parameters for that component — resistance value, voltage rating, thermal properties, etc. Changes apply immediately.

When no component is selected, the panel shows canvas and simulation settings.

Simulation bar​

Appears at the bottom while simulation is active. Shows:

  • Component warnings — components approaching rated values (amber)
  • Component failures — components that have failed (red)
  • Open logs — link to the full simulation log

Context menu​

Right-click any component or wire to access:

  • Properties — same as clicking the properties panel
  • Rotate — rotate 90° clockwise
  • Mirror — flip horizontally
  • Duplicate — place a copy nearby
  • Delete — remove the component