MicroProc

Interactive microprogrammed processor simulator. An educational tool for understanding processor internals: buses, registers, ALU, micro-memory and main memory.

Features

• SVG datapath visualization — registers, buses (A, B, C), ALU, memory blocks
• Step-by-step execution — by phase, micro-instruction, or full instruction
• 5 visible phases — Fetch, Decode, Execute, Memory, Advance
• 8 registers — A, B, C, D (general purpose), MAR, MDR, MPC, ONE (special)
• 8 ALU operations — PASS_A, ADD, SUB, AND, OR, NOT_A, PASS_B, INC_A
• 4 branch types — Next, Jump, If Zero, If Negative
• Memory editors — micro-memory (64 x 24 bits) and main memory (256 x 16 bits)
• Import/Export — .mmm and .pmm formats (compatible with the original Java program)
• Didactic mode — click registers to edit values inline
• Sample programs — counter, memory copy, conditional loop
• Persistence — state saved to localStorage

Quick start

pnpm install
pnpm dev

Open http://localhost:5173

Scripts

Command	Description
pnpm dev	Development server (Vite)
pnpm build	Production build (TypeScript + Vite)
pnpm test	Unit tests (Vitest, 73 tests)
pnpm lint	Lint (ESLint)
pnpm preview	Preview production build

Architecture

src/
├── domain/                  # Pure business logic (no UI dependencies)
│   ├── types.ts             # Enums, interfaces, constants
│   ├── execution-engine.ts  # Execution engine (5 phases)
│   ├── word.ts              # 16-bit word helpers (clamp, hex)
│   ├── labels.ts            # Display labels (registers, ALU, phases)
│   ├── result.ts            # Result<T, E> type for error handling
│   └── samples.ts           # Sample programs
├── infrastructure/
│   └── parsers.ts           # MMM/PMM parsers + export + serialization
├── store/
│   ├── use-simulator-store.ts  # Zustand store (slice composition)
│   └── slices/                 # 5 slices: ui, memory, processor, execution, history
├── components/
│   ├── processor/           # SVG sub-components for processor schematic
│   ├── execution-controls.tsx
│   ├── micro-memory-editor.tsx
│   └── main-memory-editor.tsx
└── design/
    └── motion.ts            # Animation variants (Motion)

tests/
├── domain/
│   └── execution-engine.test.ts   # 45 tests (ALU, phases, branching, flags)
└── infrastructure/
    └── parsers.test.ts            # 28 tests (MMM/PMM, export, serialization)

MMM format (micro-memory)

Each micro-instruction is encoded as 22 control bits:

Bits 0-3   : Bus A source  (register)
Bits 4-7   : Bus B source  (register)
Bits 8-11  : Bus C dest    (register)
Bits 12-14 : ALU operation
Bit  15    : Memory Read
Bit  16    : Memory Write
Bits 17-21 : Next address (6 bits, shared with branchType)

.mmm files from the original Java program are fully compatible.

Tech stack

• React 19 + TypeScript 5.9
• Vite 7 (build)
• Zustand 5 (state management, slices + persist)
• Tailwind CSS 4 (styling)
• Motion (animations)
• Vitest 4 (tests)
• Lucide React (icons)

License

MIT