Skip to content

Repository files navigation

Logits, an interactive canvas for designing and simulating digital logic

Open it in your browser and start building. No account or server-side saves.


Logits is a place to build digital circuits and see what they do. Put gates on the canvas, connect their pins, and flip a switch. You can follow each signal as it moves through the circuit, down to simulated nanoseconds.

The canvas is the working circuit, not just a drawing of one.

50 built-in element types   ·   10 categories   ·   4-valued signals   ·   buses up to 64 bits

What you get

A flexible set of parts Start with familiar gates, switches, clocks and displays, then add counters, memory, buses, notes or your own reusable subcircuits.
Signals move over time Gates have delays, clocks create edges, and scopes show signal changes beside the circuit.
See uncertain signals Signals can be 0, 1, X (unknown or conflict) or Z (floating). Conflicts and uninitialised outputs stay visible instead of silently turning into zero.
Shape your wiring Draw wires at any angle, add and move bends, and branch directly from an existing wire. Undo a wiring gesture in one step.
Get repeatable results Run the same circuit with the same inputs and get the same waveform each time.
Keep your work close Circuits are JSON documents saved in your browser. Export or import them whenever you like; there is no account or backend.
Find help in the app Each part has its own help, including the pins and settings it supports.

Signals

Four-valued signals: 0, 1, X and Z shown as waveforms

A signal is never a boolean and never a number bitmask. X gets a marker, not just a colour. The same rule holds everywhere in the UI, so state is never communicated by colour alone.

Try it without building anything

Logits comes with twelve example circuits. Open one to try it out, or import it into a project when you want to make changes. Examples are not autosaved, so you can experiment without worrying about changing the original.

Example What it shows
Gate sampler Every basic gate driven by the same two switches
Half adder Two bits in, sum and carry out
Full adder Two half adders and an OR, carry chained
2→1 mux Select picks which input reaches the output
SR latch Cross-coupled NOR gates that remember a bit
Same-instant ordering Two NOR latches released together: one oscillates, one latches
Master-slave flip-flop Two latches in series, clocked on opposite edges
Mod-16 synchronous counter Counts from 0 to 15, then wraps back to 0
Tri-state bus Two drivers sharing one net, with Z and X
Calculator Keypad calculator with two four-digit operands and a readout
Snake Snake on a 16×16 matrix, with keyboard, RAM and generated food
MNIST digit recognizer A neural network that recognizes handwritten digits

Getting around

Gesture Action
Wheel / two-finger scroll Pan · Ctrl/Cmd + wheel or pinch zooms at the pointer
Click a palette element, then the canvas Place it. Click the entry again to arm more copies, and up to 6 land as one undo step
Ctrl/Cmd + K Open the command menu and place at the pointer
Click a pin, then a second pin Wire them. Clicks on empty canvas in between drop bends. Esc cancels
Right-click a wire and drag Branch a new wire from that point
Drag a wire, or drag a bend handle Add or move a bend. Drop a bend on its neighbour to straighten
Space (tap) / . Play–pause / single step
R · Ctrl+D · Ctrl+Z Rotate · duplicate · undo
Tab, then Enter on a pin Start and finish a wire from the keyboard
Ctrl/Cmd + B · Ctrl/Cmd + J Toggle the projects and elements sidebars
Ctrl/Cmd + G Make a subcircuit from the selection

The full list is in artifacts/07-interaction-spec.md.

Running it locally

Requires Bun. Use bun, not npm or pnpm.

bun install
bun run dev      # http://localhost:3000
bun run test     # vitest, node environment
bun run lint     # biome check
bun run build    # run this before claiming a change compiles

How it is put together

Layered architecture: React components, the state layer, and the pure domain layer

The app is split into three layers, each with a clear job:

  • src/lib/ contains the circuit model and simulator. It has no browser or React dependencies, so circuits can be simulated in plain Node tests.
  • src/state/ handles editing, undo, saving and the running simulation.
  • src/components/ draws the editor. Nodes can be reached by keyboard, and all canvas views use the same pan and zoom behavior.

Read artifacts/02-architecture.md before moving a file across a boundary, and the ADRs for why any of it is the way it is.

Adding an element

Anatomy of a node: a definition file plus one line in the registry

A definition file under src/lib/nodes/, and one line in src/lib/nodes/registry.ts. That is the entire change:

export const probeNode = defineNode({
  type: "io.probe",          // part of the save format, stable forever
  title: "Probe",
  category: "io",
  docs: `A numeric readout of a whole bus, in the radix you choose. …`,
  defaultParams: { width: 1, radix: "binary" },
  view: "readout",           // a name, not a component: this layer can't import React
  paramsSchema: [
    { key: "width", label: "Bit width", kind: "int", min: 1, max: 64 },
    { key: "radix", label: "Radix", kind: "select", options: [/* … */] },
  ],
  pins: (params) => [
    { id: "in", name: "IN", direction: "in",
      width: intParam(params, "width", 1), side: "left", offset: 2 },
  ],
  size: () => ({ width: 6, height: 4 }),
});

The palette, the command menu, the inspector form, the help dialog, the netlist and the simulation all pick it up from there. If you find yourself editing the canvas, the engine or the inspector to make an element work, the abstraction is broken, so fix that instead. Start with artifacts/05-node-authoring-guide.md.

Deliberately out of scope

Analog and transistor-level simulation. HDL import/export. Real-time collaboration. Accounts, a backend, a database. Logits is a logic canvas, not a schematic-capture tool and not a teaching platform.

Documentation

Design docs live in artifacts/ and are the source of truth for intent; src/ is the source of truth for what exists. Start at artifacts/README.md; the roadmap carries the current phase and an honest list of known issues.

Built with Next.js 16, React 19, TypeScript strict, Tailwind v4 and Bun.

License

Logits is source-available, not open source. It is licensed under the PolyForm Noncommercial License 1.0.0.

In plain terms: use it, study it, fork it, change it and share your changes freely for any noncommercial purpose — personal projects, hobby work, teaching, coursework, research. Build whatever you like on top of it for yourself.

What you may not do is use Logits, or the parts that make it Logits, for a commercial purpose — selling it, hosting it as a paid service, or shipping it inside a product you charge for. That needs written permission; ask.

Contributions are welcome under the same terms: open an issue for a bug or a feature request, or send a pull request. CONTRIBUTING.md has how to get set up, the rules that are load-bearing, and how to add a node. By contributing you agree your contribution is licensed to the project under the licence above.

Security

Found a vulnerability? Please report it privately — see SECURITY.md.

About

An interactive canvas for digital logic. Place nodes, draw wires, watch the signal move.

Topics

Resources

Contributing

Security policy

Stars

3 stars

Watchers

0 watching

Forks

Contributors

Languages