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