Help & Tips

Learn how to use the Digital Logic Designer

Quick Start

1
Add componentsDrag from the left palette onto the canvas
2
Connect wiresClick an output port, then click an input port
3
Toggle inputsClick input bits to switch between 0 and 1
4
See resultsWatch outputs update in real-time

Navigating the Canvas

When your circuit grows larger than the screen, use these methods to pan around:

Scroll to Pan

Desktop

Use your mouse wheel or trackpad to scroll in any direction.

Middle Mouse Drag

Desktop

Click and hold the middle mouse button, then drag to pan.

Space + Drag

Desktop

Hold Space and click-drag to pan. Cursor changes to a hand when ready.

Two-Finger Drag

Mobile

Place two fingers on the screen and drag to pan around the canvas.

Minimap Navigation

Click anywhere on the minimap (bottom-right corner) to instantly jump to that location.

Reset View

Desktop

Press the Home key to reset the view back to the origin.

Adding Components

Drag and Drop

Drag components from the left palette and drop them onto the canvas where you want them.

Component Categories

Components are organized into categories: Inputs/Outputs, Gates, and Sub-Circuits.

Input Bits

Input bits can be toggled by clicking on them. They switch between 0 (off) and 1 (on).

Connecting Wires

Creating Connections

Click on an output port (right side of a component), then click on an input port (left side) to create a wire.

Removing Wires

Click on a connected input port to disconnect the wire attached to it.

Port Highlighting

Hover over ports to see them highlight. Valid connection targets will glow when you're creating a wire.

Manual Wire Routing

For custom wire paths: (1) Drag from an output port and release on empty canvas to place a segment. (2) Click near the endpoint and drag to add more segments. (3) Release on an input port to complete the wire. Segments snap to 0°, 45°, or 90° angles. Press Escape to cancel.

Selection & Editing

Marquee Selection

Click and drag on empty space to create a selection box. All components inside will be selected.

Moving Components

Click and drag a component to move it. If multiple components are selected, they all move together.

Deleting Components

Select components and press Delete or Backspace to remove them.

Double-Click Gates

Double-click on AND, OR, NAND, or NOR gates to change the number of inputs (2-8).

Keyboard Shortcuts

Ctrl/Cmd+Z
Undo last action
Ctrl/Cmd+Shift+Z
Redo last action
Ctrl/Cmd+Y
Redo (alternative)
Ctrl/Cmd+A
Select all components
Ctrl/Cmd+C
Copy selected components
Ctrl/Cmd+V
Paste components
Ctrl/Cmd+D
Duplicate selected components
Ctrl/Cmd+S
Save circuit
Ctrl/Cmd++
Zoom in
Ctrl/Cmd+-
Zoom out
Ctrl/Cmd+0
Reset zoom to 100%
Delete
Delete selected components
Backspace
Delete selected components
Escape
Cancel current action / Clear selection
Home
Reset view to origin
Space
Hold + drag to pan canvas

Saving & Loading

Save Circuit

Click the Save button in the toolbar to save your circuit to browser storage.

Share Circuit

Click Share to get a URL that you can share with others. The circuit is encoded in the URL.

Load Circuit

Use the circuit dropdown in the toolbar to load saved circuits or built-in examples.

Using the Minimap

  • Blue rectangles - Your circuit components
  • Blue outline - Current visible area
  • Crosshair - Origin point (0, 0)

Click anywhere on the minimap to instantly pan to that location. The minimap appears in the bottom-right corner when you have components on the canvas.

Tips & Tricks

1
Right-click components to access a context menu with options like delete, duplicate, or rename.
2
Long-press on mobile to access the same context menu.
3
Create sub-circuits to encapsulate complex logic into reusable components.
4
Drag pins in the sub-circuit editor's Pin Layout panel to reposition them to any side of the chip.
5
Wire colors indicate state: bright cyan for HIGH (1), dim gray for LOW (0).
Back to Simulator