# mawsfr/chip8 architecture

> Architecture diagram of the GitHub repository mawsfr/chip8, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-25). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/mawsfr/chip8
- Repository: https://github.com/mawsfr/chip8

## Overview

This repository is a browser-based CHIP-8 emulator with a Vue interface. The user loads a ROM, then runs, pauses, restarts, or steps the emulation; the interface displays the screen and machine state and maps keyboard events to CHIP-8 input. The graph separates the UI, emulator/core, and low-level operations. The emulator implementation and most instruction handlers were not sampled, so their internal call wiring is intentionally omitted.

Main entry points: [`app/src/components/Emulator.vue`](https://github.com/mawsfr/chip8/blob/main/app/src/components/Emulator.vue) (Emulator view), [`packages/use-chip8-emulator/src/useChip8Emulator.ts`](https://github.com/mawsfr/chip8/blob/main/packages/use-chip8-emulator/src/useChip8Emulator.ts) (Emulator setup), [`packages/chip8/src/cpu.ts`](https://github.com/mawsfr/chip8/blob/main/packages/chip8/src/cpu.ts) (CPU), [`app/src/App.vue`](https://github.com/mawsfr/chip8/blob/main/app/src/App.vue) (App shell)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Vue interface"]
  node_appentry["App entry<br/>[main.ts]"]
  node_app["App shell<br/>[App.vue]"]
  node_view["Emulator view<br/>[Emulator.vue]"]
  node_hook["Emulator setup"]
end

subgraph group_core["Emulation core"]
  node_runtime["Emulator runtime<br/>[emulator.ts]"]
  node_cpu["CPU<br/>[cpu.ts]"]
  node_instructions["Instruction set"]
  node_instructionloader["Instruction loader"]
  node_opcode["Opcode<br/>[opcode.ts]"]
  node_graphics["Graphics<br/>[graphics.ts]"]
  node_input["Keyboard input<br/>[input.ts]"]
  node_memory["Memory<br/>[memory.ts]"]
  node_registers["Registers<br/>[registers.ts]"]
  node_stack["Stack<br/>[stack.ts]"]
  node_timers["Timers<br/>[timers.ts]"]
end

subgraph group_ops["Core operations"]
  node_binary["Binary operations"]
  node_math["Math operations<br/>[math-operations.ts]"]
end

node_user(("User"))
node_rom["CHIP-8 ROM"]

node_user -->|"controls"| node_view
node_rom -->|"loads"| node_view
node_appentry -->|"mounts"| node_app
node_app -->|"renders"| node_view
node_view -->|"creates"| node_hook
node_hook -->|"constructs"| node_runtime
node_hook -->|"constructs"| node_cpu
node_hook -->|"constructs"| node_graphics
node_hook -->|"constructs"| node_input
node_hook -->|"constructs"| node_memory
node_hook -->|"constructs"| node_registers
node_hook -->|"constructs"| node_stack
node_hook -->|"constructs"| node_timers
node_view -->|"loads, runs, steps"| node_runtime
node_view -->|"reads screen"| node_graphics
node_view -->|"sets key state"| node_input
node_view -->|"reads memory"| node_memory
node_view -->|"reads address"| node_cpu
node_view -->|"reads registers"| node_registers
node_view -->|"reads stack"| node_stack
node_view -->|"reads timers"| node_timers
node_cpu -->|"loads instructions"| node_instructionloader
node_cpu -->|"dispatches execution"| node_instructions
node_cpu -->|"uses bitwise operations"| node_binary

click node_appentry "https://github.com/mawsfr/chip8/blob/main/app/src/main.ts"
click node_app "https://github.com/mawsfr/chip8/blob/main/app/src/App.vue"
click node_view "https://github.com/mawsfr/chip8/blob/main/app/src/components/Emulator.vue"
click node_hook "https://github.com/mawsfr/chip8/blob/main/packages/use-chip8-emulator/src/useChip8Emulator.ts"
click node_runtime "https://github.com/mawsfr/chip8/blob/main/packages/chip8/src/emulator.ts"
click node_cpu "https://github.com/mawsfr/chip8/blob/main/packages/chip8/src/cpu.ts"
click node_instructions "https://github.com/mawsfr/chip8/tree/main/packages/chip8/src/instructions"
click node_instructionloader "https://github.com/mawsfr/chip8/blob/main/packages/chip8/src/instructions/instruction-loader.ts"
click node_opcode "https://github.com/mawsfr/chip8/blob/main/packages/chip8/src/opcode.ts"
click node_graphics "https://github.com/mawsfr/chip8/blob/main/packages/chip8/src/graphics.ts"
click node_input "https://github.com/mawsfr/chip8/blob/main/packages/chip8/src/input.ts"
click node_memory "https://github.com/mawsfr/chip8/blob/main/packages/chip8/src/memory.ts"
click node_registers "https://github.com/mawsfr/chip8/blob/main/packages/chip8/src/registers.ts"
click node_stack "https://github.com/mawsfr/chip8/blob/main/packages/chip8/src/stack.ts"
click node_timers "https://github.com/mawsfr/chip8/blob/main/packages/chip8/src/timers.ts"
click node_binary "https://github.com/mawsfr/chip8/blob/main/packages/binary-operations/src/binary-operations.ts"
click node_math "https://github.com/mawsfr/chip8/blob/main/packages/math-operations/src/math-operations.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_appentry,node_app,node_view,node_hook,node_user toneBlue
class node_runtime,node_cpu,node_instructions,node_instructionloader,node_opcode,node_graphics,node_input,node_memory,node_registers,node_stack,node_timers toneAmber
class node_binary,node_math toneMint
class node_rom toneIndigo
```

## Components

### Vue interface

- [App entry](https://github.com/mawsfr/chip8/blob/main/app/src/main.ts): `app/src/main.ts`
- [App shell](https://github.com/mawsfr/chip8/blob/main/app/src/App.vue): `app/src/App.vue`
- [Emulator view](https://github.com/mawsfr/chip8/blob/main/app/src/components/Emulator.vue): `app/src/components/Emulator.vue`
- [Emulator setup](https://github.com/mawsfr/chip8/blob/main/packages/use-chip8-emulator/src/useChip8Emulator.ts): `packages/use-chip8-emulator/src/useChip8Emulator.ts`

### Emulation core

- [Emulator runtime](https://github.com/mawsfr/chip8/blob/main/packages/chip8/src/emulator.ts): `packages/chip8/src/emulator.ts`
- [CPU](https://github.com/mawsfr/chip8/blob/main/packages/chip8/src/cpu.ts): `packages/chip8/src/cpu.ts`
- [Instruction set](https://github.com/mawsfr/chip8/tree/main/packages/chip8/src/instructions): `packages/chip8/src/instructions`
- [Instruction loader](https://github.com/mawsfr/chip8/blob/main/packages/chip8/src/instructions/instruction-loader.ts): `packages/chip8/src/instructions/instruction-loader.ts`
- [Opcode](https://github.com/mawsfr/chip8/blob/main/packages/chip8/src/opcode.ts): `packages/chip8/src/opcode.ts`
- [Graphics](https://github.com/mawsfr/chip8/blob/main/packages/chip8/src/graphics.ts): `packages/chip8/src/graphics.ts`
- [Keyboard input](https://github.com/mawsfr/chip8/blob/main/packages/chip8/src/input.ts): `packages/chip8/src/input.ts`
- [Memory](https://github.com/mawsfr/chip8/blob/main/packages/chip8/src/memory.ts): `packages/chip8/src/memory.ts`
- [Registers](https://github.com/mawsfr/chip8/blob/main/packages/chip8/src/registers.ts): `packages/chip8/src/registers.ts`
- [Stack](https://github.com/mawsfr/chip8/blob/main/packages/chip8/src/stack.ts): `packages/chip8/src/stack.ts`
- [Timers](https://github.com/mawsfr/chip8/blob/main/packages/chip8/src/timers.ts): `packages/chip8/src/timers.ts`

### Core operations

- [Binary operations](https://github.com/mawsfr/chip8/blob/main/packages/binary-operations/src/binary-operations.ts): `packages/binary-operations/src/binary-operations.ts`
- [Math operations](https://github.com/mawsfr/chip8/blob/main/packages/math-operations/src/math-operations.ts): `packages/math-operations/src/math-operations.ts`

### Other components

- **User**
- **CHIP-8 ROM**

## Connections

- User → Emulator view: controls
- CHIP-8 ROM → Emulator view: loads
- App entry → App shell: mounts
- App shell → Emulator view: renders
- Emulator view → Emulator setup: creates
- Emulator setup → Emulator runtime: constructs
- Emulator setup → CPU: constructs
- Emulator setup → Graphics: constructs
- Emulator setup → Keyboard input: constructs
- Emulator setup → Memory: constructs
- Emulator setup → Registers: constructs
- Emulator setup → Stack: constructs
- Emulator setup → Timers: constructs
- Emulator view → Emulator runtime: loads, runs, steps
- Emulator view → Graphics: reads screen
- Emulator view → Keyboard input: sets key state
- Emulator view → Memory: reads memory
- Emulator view → CPU: reads address
- Emulator view → Registers: reads registers
- Emulator view → Stack: reads stack
- Emulator view → Timers: reads timers
- CPU → Instruction loader: loads instructions
- CPU → Instruction set: dispatches execution
- CPU → Binary operations: uses bitwise operations