About This Project

Digital Logic
Lab Simulator

An open, fully browser-native interactive simulator for students studying digital electronics and logic design. Built to make abstract concepts tangible — you can see exactly what happens inside every circuit as you change inputs.

Status Active
Labs 18
License Open Source
Platform Any Browser

Why This Exists

📚

For Students

Traditional textbooks show static circuit diagrams. This simulator lets you interact — flipping inputs and seeing outputs change instantly bridges theory and intuition.

🏫

For Educators

No software installation, no account, no setup. Share a link and students can open any lab on any device — ideal for classrooms and online courses alike.

🔬

For Curious Minds

Even if you're not taking an exam, poke at logic gates and see how a Master-Slave JK flip-flop prevents race conditions. Learning should be hands-on.

Key Features

Real-Time Signal Propagation

Every input change immediately cascades through the entire circuit. No "simulate" button — it just works.

📐

Accurate Gate Logic

All gates implement true boolean logic. Truth tables are computed from the same engine that drives the SVG.

🎯

Active Row Highlighting

Truth tables highlight the row matching your current inputs in real time, making it easy to follow along.

🔄

Sequential State Machine

Flip-flop labs implement proper state memory with clock-edge triggering and state history logging.

📱

Responsive Layout

Works on desktop and tablet. The sidebar collapses to a horizontal scroll strip on smaller screens.

🌙

Dark-First Design

The deep navy/cyan colour palette was designed first for dark mode — easier on the eyes during long study sessions.

Technology Stack

Built with purpose-chosen tools — every dependency earns its place.

Astro
Static Site Framework

Zero-JS by default, only hydrates where needed — blazing fast.

Vanilla JS
Simulation Engine

All circuit logic runs in plain JS — no runtime framework overhead.

SVG
Circuit Rendering

Every gate, wire, and LED is an interactive SVG element.

PostCSS
Style Processing

CSS variables and custom properties power the entire design system.

Tailwind CSS
Utility Classes

Utility-first CSS layer for rapid layout and spacing.

Vite
Dev Server & Bundler

Hot-module replacement and instant builds during development.

Development Roadmap

From first gate to full sequential logic — how the simulator grew.

v1.0 Foundation
  • Basic Gates (AND, OR, NOT, XOR)
  • Half Adder / Full Adder
  • Universal Gates
v1.1 Arithmetic & Converters
  • BCD Adder
  • Half & Full Subtractor
  • Binary ↔ Gray Code
v1.2 Logic ICs
  • Multiplexer (4:1)
  • Demultiplexer (1:4)
  • 2-bit Comparator
v1.3 Encoders & Decoders
  • 3-to-8 Decoder
  • 8-to-3 Priority Encoder
v1.4 Sequential Logic
  • SR Flip-Flop
  • D Flip-Flop
  • JK Flip-Flop
  • Master-Slave JK FF
v1.5 Coming Next Upcoming
  • 7-Segment Display
  • T Flip-Flop
  • Shift Registers
  • Counters

Design Principles

01

Zero friction to start

Open a URL and you're simulating. No accounts, no downloads, no dependencies on the student's machine.

02

Visual accuracy over simplification

Gate shapes follow IEEE/ANSI schematic standards. Wires route like real PCB traces. The visual language should feel familiar from lab diagrams.

03

Performance first

No virtual DOM, no heavy runtime. Each lab page is static HTML with a small inline script. Loads in under 100 ms on most connections.

04

Dark mode as default

Engineering students study at night. The deep navy and glowing cyan palette reduces eye strain and makes signal states immediately obvious.

Ready to start experimenting?

Pick any lab and start clicking switches — no preparation needed.