# codexeron/web-playground architecture

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

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

## Overview

Web Playground is a client-side browser IDE: users edit project files, see the generated page in an isolated preview, and inspect runtime feedback. The main runtime logic is concentrated in `js/app.js`; the README documents the broader file, responsive, theme, monitoring, and persistence capabilities. The excerpts show editor autosave/preview triggers and iframe message handling, but omit much of the implementation, so uncertain wiring is not shown.

Main entry points: [`index`](https://github.com/codexeron/web-playground/blob/Codexeron/index) (Playground UI), [`js/app.js`](https://github.com/codexeron/web-playground/blob/Codexeron/js/app.js) (Code editor), [`preview`](https://github.com/codexeron/web-playground/blob/Codexeron/preview) (Separate-tab preview)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_workspace["Editing workspace"]
  node_main["Playground UI"]
  node_files["File management<br/>[app.js]"]
  node_editor["Code editor<br/>[app.js]"]
  node_themes["Themes<br/>[app.js]"]
  node_responsive["Responsive views<br/>[app.js]"]
  node_shortcuts["Keyboard shortcuts<br/>[app.js]"]
end

subgraph group_preview["Preview runtime"]
  node_previewbuilder["Preview builder<br/>[app.js]"]
  node_iframe["Live iframe"]
  node_separatepreview["Separate-tab preview"]
end

subgraph group_inspection["Inspection tools"]
  node_console["Console capture<br/>[app.js]"]
  node_network["Network monitor<br/>[app.js]"]
  node_performance["Performance metrics<br/>[app.js]"]
  node_picker["Element picker<br/>[app.js]"]
end

subgraph group_persistence["Project persistence"]
  node_storage[("localStorage")]
end

node_user(("Developer"))

node_user -->|"uses"| node_main
node_main -->|"manages files"| node_files
node_main -->|"edits code"| node_editor
node_editor -->|"saves edits"| node_files
node_files -->|"persists project"| node_storage
node_storage -->|"restores project"| node_files
node_editor -->|"triggers update"| node_previewbuilder
node_previewbuilder -->|"loads document"| node_iframe
node_main -->|"opens preview"| node_separatepreview
node_main -->|"selects theme"| node_themes
node_main -->|"selects viewport"| node_responsive
node_main -->|"handles shortcuts"| node_shortcuts
node_iframe -->|"posts output"| node_console
node_iframe -->|"posts requests"| node_network
node_iframe -->|"posts metrics"| node_performance
node_main -->|"displays output"| node_console
node_main -->|"displays requests"| node_network
node_main -->|"displays metrics"| node_performance
node_main -->|"toggles picker"| node_picker
node_iframe -->|"posts selection"| node_picker
node_picker -->|"locates code"| node_editor

click node_main "https://github.com/codexeron/web-playground/blob/Codexeron/index"
click node_files "https://github.com/codexeron/web-playground/blob/Codexeron/js/app.js"
click node_editor "https://github.com/codexeron/web-playground/blob/Codexeron/js/app.js"
click node_themes "https://github.com/codexeron/web-playground/blob/Codexeron/js/app.js"
click node_responsive "https://github.com/codexeron/web-playground/blob/Codexeron/js/app.js"
click node_shortcuts "https://github.com/codexeron/web-playground/blob/Codexeron/js/app.js"
click node_previewbuilder "https://github.com/codexeron/web-playground/blob/Codexeron/js/app.js"
click node_iframe "https://github.com/codexeron/web-playground/blob/Codexeron/index"
click node_separatepreview "https://github.com/codexeron/web-playground/blob/Codexeron/preview"
click node_console "https://github.com/codexeron/web-playground/blob/Codexeron/js/app.js"
click node_network "https://github.com/codexeron/web-playground/blob/Codexeron/js/app.js"
click node_performance "https://github.com/codexeron/web-playground/blob/Codexeron/js/app.js"
click node_picker "https://github.com/codexeron/web-playground/blob/Codexeron/js/app.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_main,node_files,node_editor,node_themes,node_responsive,node_shortcuts toneBlue
class node_previewbuilder,node_iframe,node_separatepreview toneAmber
class node_console,node_network,node_performance,node_picker toneMint
class node_storage toneRose
class node_user toneIndigo
```

## Components

### Editing workspace

- [Playground UI](https://github.com/codexeron/web-playground/blob/Codexeron/index): `index`
- [File management](https://github.com/codexeron/web-playground/blob/Codexeron/js/app.js): `js/app.js`
- [Code editor](https://github.com/codexeron/web-playground/blob/Codexeron/js/app.js): `js/app.js`
- [Themes](https://github.com/codexeron/web-playground/blob/Codexeron/js/app.js): `js/app.js`
- [Responsive views](https://github.com/codexeron/web-playground/blob/Codexeron/js/app.js): `js/app.js`
- [Keyboard shortcuts](https://github.com/codexeron/web-playground/blob/Codexeron/js/app.js): `js/app.js`

### Preview runtime

- [Preview builder](https://github.com/codexeron/web-playground/blob/Codexeron/js/app.js): `js/app.js`
- [Live iframe](https://github.com/codexeron/web-playground/blob/Codexeron/index): `index`
- [Separate-tab preview](https://github.com/codexeron/web-playground/blob/Codexeron/preview): `preview`

### Inspection tools

- [Console capture](https://github.com/codexeron/web-playground/blob/Codexeron/js/app.js): `js/app.js`
- [Network monitor](https://github.com/codexeron/web-playground/blob/Codexeron/js/app.js): `js/app.js`
- [Performance metrics](https://github.com/codexeron/web-playground/blob/Codexeron/js/app.js): `js/app.js`
- [Element picker](https://github.com/codexeron/web-playground/blob/Codexeron/js/app.js): `js/app.js`

### Project persistence

- **localStorage**

### Other components

- **Developer**

## Connections

- Developer → Playground UI: uses
- Playground UI → File management: manages files
- Playground UI → Code editor: edits code
- Code editor → File management: saves edits
- File management → localStorage: persists project
- localStorage → File management: restores project
- Code editor → Preview builder: triggers update
- Preview builder → Live iframe: loads document
- Playground UI → Separate-tab preview: opens preview
- Playground UI → Themes: selects theme
- Playground UI → Responsive views: selects viewport
- Playground UI → Keyboard shortcuts: handles shortcuts
- Live iframe → Console capture: posts output
- Live iframe → Network monitor: posts requests
- Live iframe → Performance metrics: posts metrics
- Playground UI → Console capture: displays output
- Playground UI → Network monitor: displays requests
- Playground UI → Performance metrics: displays metrics
- Playground UI → Element picker: toggles picker
- Live iframe → Element picker: posts selection
- Element picker → Code editor: locates code