# anandarizki/jsplayground architecture

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

- Interactive diagram: https://gitdiagram.com/anandarizki/jsplayground
- Repository: https://github.com/anandarizki/jsplayground

## Overview

JSPlayground is a local JavaScript scratchpad: a user edits code, runs it in an isolated, replaceable Web Worker, and inspects structured console output and errors. Its main path spans editing, execution, message validation, and rendering; settings, formatting, and install/offline support are separate capabilities. The README documents several features whose wiring is not visible in the sampled excerpts, so the graph omits uncertain connections rather than asserting a detailed internal pipeline.

Main entry points: [`src/components/jsplayground/page.tsx`](https://github.com/anandarizki/jsplayground/blob/main/src/components/jsplayground/page.tsx) (Playground page), [`src/components/jsplayground/use-runner.ts`](https://github.com/anandarizki/jsplayground/blob/main/src/components/jsplayground/use-runner.ts) (Worker runner), [`src/components/jsplayground/use-settings.ts`](https://github.com/anandarizki/jsplayground/blob/main/src/components/jsplayground/use-settings.ts) (Settings state), [`src/App.tsx`](https://github.com/anandarizki/jsplayground/blob/main/src/App.tsx) (App entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["Playground interface"]
  node_app["App entry<br/>[App.tsx]"]
  node_page["Playground page<br/>[page.tsx]"]
  node_editor["Code editor<br/>[editor.tsx]"]
  node_completion["Sandbox completion<br/>[completion.ts]"]
  node_playground_state["Playground state<br/>[use-playground.ts]"]
  node_console["Structured console<br/>[console-view.tsx]"]
  node_formatter["Code formatter<br/>[format.ts]"]
end

subgraph group_execution["Sandbox execution"]
  node_runner["Worker runner<br/>[use-runner.ts]"]
  node_worker["Snippet sandbox<br/>[worker-main.ts]"]
  node_validation["Message validation<br/>[validate.ts]"]
end

subgraph group_preferences["Settings and presentation"]
  node_settings_hook["Settings state<br/>[use-settings.ts]"]
  node_settings_dialog["Settings dialog"]
  node_themes["Theme palettes<br/>[themes.ts]"]
end

subgraph group_delivery["Install and offline"]
  node_pwa["PWA configuration<br/>[vite.config.ts]"]
end

node_user(("Playground user"))
node_prettier["Prettier"]
node_storage[("Browser localStorage")]
node_browser_worker["Browser Web Worker"]
node_browser_cache[("Browser app cache")]

node_user -->|"opens"| node_app
node_app -->|"renders"| node_page
node_user -->|"edits code"| node_editor
node_page -->|"formats code"| node_formatter
node_formatter -.->|"loads on demand"| node_prettier
node_page -->|"opens settings"| node_settings_dialog
node_settings_dialog -->|"updates preferences"| node_settings_hook
node_settings_hook -->|"reads and writes"| node_storage
node_settings_hook -->|"matches palettes"| node_themes
node_runner -->|"creates and terminates"| node_browser_worker
node_runner -->|"starts run"| node_worker
node_worker -->|"posts output"| node_runner
node_runner -->|"checks messages"| node_validation
node_page -->|"runs and cancels"| node_runner
node_page -->|"renders output"| node_console
node_editor -->|"offers completion"| node_completion
node_pwa -->|"configures caching"| node_browser_cache

click node_app "https://github.com/anandarizki/jsplayground/blob/main/src/App.tsx"
click node_page "https://github.com/anandarizki/jsplayground/blob/main/src/components/jsplayground/page.tsx"
click node_editor "https://github.com/anandarizki/jsplayground/blob/main/src/components/jsplayground/editor.tsx"
click node_completion "https://github.com/anandarizki/jsplayground/blob/main/src/components/jsplayground/completion.ts"
click node_playground_state "https://github.com/anandarizki/jsplayground/blob/main/src/components/jsplayground/use-playground.ts"
click node_runner "https://github.com/anandarizki/jsplayground/blob/main/src/components/jsplayground/use-runner.ts"
click node_worker "https://github.com/anandarizki/jsplayground/blob/main/src/components/jsplayground/worker-main.ts"
click node_validation "https://github.com/anandarizki/jsplayground/blob/main/src/components/jsplayground/validate.ts"
click node_console "https://github.com/anandarizki/jsplayground/blob/main/src/components/jsplayground/console-view.tsx"
click node_settings_hook "https://github.com/anandarizki/jsplayground/blob/main/src/components/jsplayground/use-settings.ts"
click node_settings_dialog "https://github.com/anandarizki/jsplayground/blob/main/src/components/jsplayground/settings-dialog.tsx"
click node_themes "https://github.com/anandarizki/jsplayground/blob/main/src/components/jsplayground/themes.ts"
click node_formatter "https://github.com/anandarizki/jsplayground/blob/main/src/components/jsplayground/format.ts"
click node_pwa "https://github.com/anandarizki/jsplayground/blob/main/vite.config.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_app,node_page,node_editor,node_completion,node_playground_state,node_console,node_formatter,node_user toneBlue
class node_runner,node_worker,node_validation,node_storage,node_browser_cache toneAmber
class node_settings_hook,node_settings_dialog,node_themes toneMint
class node_pwa,node_browser_worker toneRose
class node_prettier toneIndigo
```

## Components

### Playground interface

- [App entry](https://github.com/anandarizki/jsplayground/blob/main/src/App.tsx): `src/App.tsx`
- [Playground page](https://github.com/anandarizki/jsplayground/blob/main/src/components/jsplayground/page.tsx): `src/components/jsplayground/page.tsx`
- [Code editor](https://github.com/anandarizki/jsplayground/blob/main/src/components/jsplayground/editor.tsx): `src/components/jsplayground/editor.tsx`
- [Sandbox completion](https://github.com/anandarizki/jsplayground/blob/main/src/components/jsplayground/completion.ts): `src/components/jsplayground/completion.ts`
- [Playground state](https://github.com/anandarizki/jsplayground/blob/main/src/components/jsplayground/use-playground.ts): `src/components/jsplayground/use-playground.ts`
- [Structured console](https://github.com/anandarizki/jsplayground/blob/main/src/components/jsplayground/console-view.tsx): `src/components/jsplayground/console-view.tsx`
- [Code formatter](https://github.com/anandarizki/jsplayground/blob/main/src/components/jsplayground/format.ts): `src/components/jsplayground/format.ts`

### Sandbox execution

- [Worker runner](https://github.com/anandarizki/jsplayground/blob/main/src/components/jsplayground/use-runner.ts): `src/components/jsplayground/use-runner.ts`
- [Snippet sandbox](https://github.com/anandarizki/jsplayground/blob/main/src/components/jsplayground/worker-main.ts): `src/components/jsplayground/worker-main.ts`
- [Message validation](https://github.com/anandarizki/jsplayground/blob/main/src/components/jsplayground/validate.ts): `src/components/jsplayground/validate.ts`

### Settings and presentation

- [Settings state](https://github.com/anandarizki/jsplayground/blob/main/src/components/jsplayground/use-settings.ts): `src/components/jsplayground/use-settings.ts`
- [Settings dialog](https://github.com/anandarizki/jsplayground/blob/main/src/components/jsplayground/settings-dialog.tsx): `src/components/jsplayground/settings-dialog.tsx`
- [Theme palettes](https://github.com/anandarizki/jsplayground/blob/main/src/components/jsplayground/themes.ts): `src/components/jsplayground/themes.ts`

### Install and offline

- [PWA configuration](https://github.com/anandarizki/jsplayground/blob/main/vite.config.ts): `vite.config.ts`

### Other components

- **Playground user**
- **Prettier**
- **Browser localStorage**
- **Browser Web Worker**
- **Browser app cache**

## Connections

- Playground user → App entry: opens
- App entry → Playground page: renders
- Playground user → Code editor: edits code
- Playground page → Code formatter: formats code
- Code formatter → Prettier: loads on demand
- Playground page → Settings dialog: opens settings
- Settings dialog → Settings state: updates preferences
- Settings state → Browser localStorage: reads and writes
- Settings state → Theme palettes: matches palettes
- Worker runner → Browser Web Worker: creates and terminates
- Worker runner → Snippet sandbox: starts run
- Snippet sandbox → Worker runner: posts output
- Worker runner → Message validation: checks messages
- Playground page → Worker runner: runs and cancels
- Playground page → Structured console: renders output
- Code editor → Sandbox completion: offers completion
- PWA configuration → Browser app cache: configures caching