# dotcl/playground architecture

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

- Interactive diagram: https://gitdiagram.com/dotcl/playground
- Repository: https://github.com/dotcl/playground

## Overview

dotcl playground teaches Common Lisp through runnable browser examples, with a separate optional Lem editor page and a canvas-oriented Lisp runner. The main workflow is chapter code → browser editor → .NET/WASM host → Lisp evaluation → rendered result. README and sampled source establish the boot, evaluation, sharing, bridge, and Lem paths; unsampled details of the canvas page and Lisp internals are represented only at their documented entry points.

Main entry points: [`src/Program.cs`](https://github.com/dotcl/playground/blob/master/src/Program.cs) (.NET Host), [`src/wwwroot/lem.js`](https://github.com/dotcl/playground/blob/master/src/wwwroot/lem.js) (Grid Frontend), [`src/wwwroot/main.js`](https://github.com/dotcl/playground/blob/master/src/wwwroot/main.js) (Runnable Blocks), [`src/wwwroot/playground.html`](https://github.com/dotcl/playground/blob/master/src/wwwroot/playground.html) (Tutorial Material)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_pages["Learning Pages"]
  node_chapters["Tutorial Material<br/>[playground.html]"]
  node_home["Front Page<br/>[index.html]"]
  node_editor["Runnable Blocks<br/>[main.js]"]
  node_canvaspage["Canvas Page<br/>[canvas.html]"]
  node_canvasrunner["Canvas Runner<br/>[canvas.js]"]
end

subgraph group_playground["Playground Runtime"]
  node_host[".NET Host<br/>[Program.cs]"]
  node_lisp["Run Handler<br/>[prelude.lisp]"]
  node_dotcl["dotcl Runtime"]
end

subgraph group_interop["Browser Interop"]
  node_bridge["JS Bridge<br/>[js-bridge.js]"]
  node_jslisp["Lisp JS API<br/>[js.lisp]"]
end

subgraph group_lem["Lem Editor"]
  node_lem["Lem Page<br/>[lem.html]"]
  node_lemfrontend["Grid Frontend<br/>[lem.js]"]
  node_lemhost["Lem Adapter<br/>[lem-page.lisp]"]
  node_extra["Optional Editor Core"]
end

node_reader(("Reader"))
node_browser(("Browser APIs"))

node_reader -->|"opens"| node_home
node_home -->|"links to"| node_chapters
node_reader -->|"reads"| node_chapters
node_chapters -->|"provides blocks"| node_editor
node_editor -->|"boots and runs"| node_host
node_host -->|"loads and evaluates"| node_dotcl
node_host -->|"loads"| node_lisp
node_lisp -->|"reads and evaluates"| node_dotcl
node_host -->|"imports"| node_bridge
node_host -->|"fetches and loads"| node_jslisp
node_jslisp -->|"calls through"| node_bridge
node_editor -->|"renders results"| node_browser
node_reader -.->|"opens"| node_canvaspage
node_canvaspage -->|"starts"| node_canvasrunner
node_canvasrunner -->|"boots and runs"| node_host
node_reader -.->|"opens"| node_lem
node_lem -->|"starts"| node_lemfrontend
node_lemfrontend -->|"boots and starts"| node_host
node_lemfrontend -.->|"fetches optionally"| node_extra
node_lemfrontend -.->|"loads core"| node_host
node_host -->|"dispatches editor actions"| node_lemhost
node_lemhost -->|"starts and drives"| node_dotcl
node_lemfrontend -->|"sends input; polls output"| node_host
node_lemfrontend -->|"draws screen"| node_browser
node_bridge -->|"forwards calls"| node_browser

click node_chapters "https://github.com/dotcl/playground/blob/master/src/wwwroot/playground.html"
click node_home "https://github.com/dotcl/playground/blob/master/src/wwwroot/index.html"
click node_editor "https://github.com/dotcl/playground/blob/master/src/wwwroot/main.js"
click node_host "https://github.com/dotcl/playground/blob/master/src/Program.cs"
click node_lisp "https://github.com/dotcl/playground/blob/master/src/prelude.lisp"
click node_bridge "https://github.com/dotcl/playground/blob/master/src/wwwroot/js-bridge.js"
click node_jslisp "https://github.com/dotcl/playground/blob/master/src/js.lisp"
click node_canvaspage "https://github.com/dotcl/playground/blob/master/src/wwwroot/canvas.html"
click node_canvasrunner "https://github.com/dotcl/playground/blob/master/src/wwwroot/canvas.js"
click node_lem "https://github.com/dotcl/playground/blob/master/src/wwwroot/lem.html"
click node_lemfrontend "https://github.com/dotcl/playground/blob/master/src/wwwroot/lem.js"
click node_lemhost "https://github.com/dotcl/playground/blob/master/src/lem-page.lisp"

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_chapters,node_home,node_editor,node_canvaspage,node_canvasrunner,node_browser toneBlue
class node_host,node_lisp,node_dotcl toneAmber
class node_bridge,node_jslisp toneMint
class node_lem,node_lemfrontend,node_lemhost,node_extra toneRose
class node_reader toneIndigo
```

## Components

### Learning Pages

- [Tutorial Material](https://github.com/dotcl/playground/blob/master/src/wwwroot/playground.html): `src/wwwroot/playground.html`
- [Front Page](https://github.com/dotcl/playground/blob/master/src/wwwroot/index.html): `src/wwwroot/index.html`
- [Runnable Blocks](https://github.com/dotcl/playground/blob/master/src/wwwroot/main.js): `src/wwwroot/main.js`
- [Canvas Page](https://github.com/dotcl/playground/blob/master/src/wwwroot/canvas.html): `src/wwwroot/canvas.html`
- [Canvas Runner](https://github.com/dotcl/playground/blob/master/src/wwwroot/canvas.js): `src/wwwroot/canvas.js`

### Playground Runtime

- [.NET Host](https://github.com/dotcl/playground/blob/master/src/Program.cs): `src/Program.cs`
- [Run Handler](https://github.com/dotcl/playground/blob/master/src/prelude.lisp): `src/prelude.lisp`
- **dotcl Runtime**

### Browser Interop

- [JS Bridge](https://github.com/dotcl/playground/blob/master/src/wwwroot/js-bridge.js): `src/wwwroot/js-bridge.js`
- [Lisp JS API](https://github.com/dotcl/playground/blob/master/src/js.lisp): `src/js.lisp`

### Lem Editor

- [Lem Page](https://github.com/dotcl/playground/blob/master/src/wwwroot/lem.html): `src/wwwroot/lem.html`
- [Grid Frontend](https://github.com/dotcl/playground/blob/master/src/wwwroot/lem.js): `src/wwwroot/lem.js`
- [Lem Adapter](https://github.com/dotcl/playground/blob/master/src/lem-page.lisp): `src/lem-page.lisp`
- **Optional Editor Core**

### Other components

- **Reader**
- **Browser APIs**

## Connections

- Reader → Front Page: opens
- Front Page → Tutorial Material: links to
- Reader → Tutorial Material: reads
- Tutorial Material → Runnable Blocks: provides blocks
- Runnable Blocks → .NET Host: boots and runs
- .NET Host → dotcl Runtime: loads and evaluates
- .NET Host → Run Handler: loads
- Run Handler → dotcl Runtime: reads and evaluates
- .NET Host → JS Bridge: imports
- .NET Host → Lisp JS API: fetches and loads
- Lisp JS API → JS Bridge: calls through
- Runnable Blocks → Browser APIs: renders results
- Reader → Canvas Page: opens
- Canvas Page → Canvas Runner: starts
- Canvas Runner → .NET Host: boots and runs
- Reader → Lem Page: opens
- Lem Page → Grid Frontend: starts
- Grid Frontend → .NET Host: boots and starts
- Grid Frontend → Optional Editor Core: fetches optionally
- Grid Frontend → .NET Host: loads core
- .NET Host → Lem Adapter: dispatches editor actions
- Lem Adapter → dotcl Runtime: starts and drives
- Grid Frontend → .NET Host: sends input; polls output
- Grid Frontend → Browser APIs: draws screen
- JS Bridge → Browser APIs: forwards calls