# mykbamberg/assembler-website architecture

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

- Interactive diagram: https://gitdiagram.com/mykbamberg/assembler-website
- Repository: https://github.com/mykbamberg/assembler-website

## Overview

This is a browser-based assembler for the cpu-simulator. The user edits assembly in Ace; changes invoke the WebAssembly-exported assembler, which parses instructions, resolves labels, emits a 16-byte program and diagnostic text, then exposes simulator and sharing actions. Examples, syntax highlighting, Vim mode, theme selection, and diagnostic visibility are supporting editor capabilities. The browser integration with Ace and the simulator is shown; build details and unsampled HTML are omitted.

Main entry points: [`src/index.js`](https://github.com/mykbamberg/assembler-website/blob/main/src/index.js) (WebAssembly module interface), [`src/as.c`](https://github.com/mykbamberg/assembler-website/blob/main/src/as.c) (Assembly parser and encoder), [`src/asm-mode.js`](https://github.com/mykbamberg/assembler-website/blob/main/src/asm-mode.js) (Assembly syntax mode)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_editor["Assembly editor"]
  node_editor["Ace editor UI<br/>[index.js]"]
  node_highlight["Assembly syntax mode<br/>[asm-mode.js]"]
  node_examples["Example programs<br/>[index.js]"]
  node_vim["Vim and theme controls<br/>[index.js]"]
end

subgraph group_assembly["Assembly compilation"]
  node_assembler["Assembly parser and encoder<br/>[as.c]"]
  node_labels["Label resolution<br/>[as.c]"]
  node_diagnostics["Diagnostic formatter<br/>[as.c]"]
  node_wasm["WebAssembly module interface<br/>[index.js]"]
end

subgraph group_results["Output and sharing"]
  node_machinecode["Machine-code output<br/>[index.js]"]
  node_simulator["CPU simulator"]
  node_share["Code sharing<br/>[index.js]"]
  node_logcontrols["Diagnostic visibility controls<br/>[index.js]"]
end

node_user(("Program author"))
node_clipboard["Browser clipboard"]

node_user -->|"edits source"| node_editor
node_editor -->|"sets syntax mode"| node_highlight
node_examples -->|"loads source"| node_editor
node_user -->|"chooses editor settings"| node_vim
node_editor -->|"assembles on change"| node_wasm
node_wasm -->|"calls assemble"| node_assembler
node_assembler -->|"resolves references"| node_labels
node_assembler -->|"formats messages"| node_diagnostics
node_wasm -->|"returns program"| node_machinecode
node_wasm -->|"reads error buffer"| node_diagnostics
node_machinecode -->|"opens program"| node_simulator
node_user -->|"requests share link"| node_share
node_share -->|"writes link"| node_clipboard
node_user -->|"toggles messages"| node_logcontrols
node_logcontrols -->|"controls visibility"| node_diagnostics

click node_editor "https://github.com/mykbamberg/assembler-website/blob/main/src/index.js"
click node_highlight "https://github.com/mykbamberg/assembler-website/blob/main/src/asm-mode.js"
click node_examples "https://github.com/mykbamberg/assembler-website/blob/main/src/index.js"
click node_vim "https://github.com/mykbamberg/assembler-website/blob/main/src/index.js"
click node_assembler "https://github.com/mykbamberg/assembler-website/blob/main/src/as.c"
click node_labels "https://github.com/mykbamberg/assembler-website/blob/main/src/as.c"
click node_diagnostics "https://github.com/mykbamberg/assembler-website/blob/main/src/as.c"
click node_wasm "https://github.com/mykbamberg/assembler-website/blob/main/src/index.js"
click node_machinecode "https://github.com/mykbamberg/assembler-website/blob/main/src/index.js"
click node_share "https://github.com/mykbamberg/assembler-website/blob/main/src/index.js"
click node_logcontrols "https://github.com/mykbamberg/assembler-website/blob/main/src/index.js"

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_editor,node_highlight,node_examples,node_vim,node_clipboard toneBlue
class node_assembler,node_labels,node_diagnostics,node_wasm toneAmber
class node_machinecode,node_simulator,node_share,node_logcontrols toneMint
class node_user toneIndigo
```

## Components

### Assembly editor

- [Ace editor UI](https://github.com/mykbamberg/assembler-website/blob/main/src/index.js): `src/index.js`
- [Assembly syntax mode](https://github.com/mykbamberg/assembler-website/blob/main/src/asm-mode.js): `src/asm-mode.js`
- [Example programs](https://github.com/mykbamberg/assembler-website/blob/main/src/index.js): `src/index.js`
- [Vim and theme controls](https://github.com/mykbamberg/assembler-website/blob/main/src/index.js): `src/index.js`

### Assembly compilation

- [Assembly parser and encoder](https://github.com/mykbamberg/assembler-website/blob/main/src/as.c): `src/as.c`
- [Label resolution](https://github.com/mykbamberg/assembler-website/blob/main/src/as.c): `src/as.c`
- [Diagnostic formatter](https://github.com/mykbamberg/assembler-website/blob/main/src/as.c): `src/as.c`
- [WebAssembly module interface](https://github.com/mykbamberg/assembler-website/blob/main/src/index.js): `src/index.js`

### Output and sharing

- [Machine-code output](https://github.com/mykbamberg/assembler-website/blob/main/src/index.js): `src/index.js`
- **CPU simulator**
- [Code sharing](https://github.com/mykbamberg/assembler-website/blob/main/src/index.js): `src/index.js`
- [Diagnostic visibility controls](https://github.com/mykbamberg/assembler-website/blob/main/src/index.js): `src/index.js`

### Other components

- **Program author**
- **Browser clipboard**

## Connections

- Program author → Ace editor UI: edits source (evidence: `src/index.js`)
- Ace editor UI → Assembly syntax mode: sets syntax mode (evidence: `src/index.js`)
- Example programs → Ace editor UI: loads source (evidence: `src/index.js`)
- Program author → Vim and theme controls: chooses editor settings (evidence: `src/index.js`)
- Ace editor UI → WebAssembly module interface: assembles on change (evidence: `src/index.js`)
- WebAssembly module interface → Assembly parser and encoder: calls assemble (evidence: `src/index.js`)
- Assembly parser and encoder → Label resolution: resolves references (evidence: `src/as.c`)
- Assembly parser and encoder → Diagnostic formatter: formats messages (evidence: `src/as.c`)
- WebAssembly module interface → Machine-code output: returns program (evidence: `src/index.js`)
- WebAssembly module interface → Diagnostic formatter: reads error buffer (evidence: `src/index.js`)
- Machine-code output → CPU simulator: opens program (evidence: `src/index.js`)
- Program author → Code sharing: requests share link (evidence: `src/index.js`)
- Code sharing → Browser clipboard: writes link (evidence: `src/index.js`)
- Program author → Diagnostic visibility controls: toggles messages (evidence: `src/index.js`)
- Diagnostic visibility controls → Diagnostic formatter: controls visibility (evidence: `src/index.js`)