# antimatterr/web-code-editor architecture

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

- Interactive diagram: https://gitdiagram.com/antimatterr/web-code-editor
- Repository: https://github.com/antimatterr/web-code-editor

## Overview

This is a small browser-based code editor and previewer. A user enters JavaScript/JSX and submits it; the app asks esbuild to bundle the input, resolving package paths and loading package or CSS contents through plugins, then posts the generated JavaScript into a sandboxed iframe for execution. The fetch plugin also caches loaded files in browser storage. The README only describes Create React App scaffolding; this map follows the supplied source, which does not establish every plugin callback detail or runtime error behavior beyond the iframe handler.

Main entry points: [`src/index.tsx`](https://github.com/antimatterr/web-code-editor/blob/main/src/index.tsx) (Editor and build orchestration), [`src/plugins/fetch-plugin.ts`](https://github.com/antimatterr/web-code-editor/blob/main/src/plugins/fetch-plugin.ts) (Module and CSS loader), [`src/plugins/unpkg-path-plugin.ts`](https://github.com/antimatterr/web-code-editor/blob/main/src/plugins/unpkg-path-plugin.ts) (UNPKG path resolver)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_editor["Editor app"]
  node_app["Editor and build orchestration<br/>[index.tsx]"]
end

subgraph group_build["Build and loading"]
  node_esbuild["esbuild service"]
  node_path_plugin["UNPKG path resolver"]
  node_fetch_plugin["Module and CSS loader<br/>[fetch-plugin.ts]"]
  node_file_cache[("Browser file cache<br/>[fetch-plugin.ts]")]
end

subgraph group_preview["Preview runtime"]
  node_iframe["Sandboxed preview<br/>[index.tsx]"]
end

node_user(("Editor user"))
node_unpkg["UNPKG package host"]

node_user -->|"enters and submits"| node_app
node_app -->|"starts and builds"| node_esbuild
node_esbuild -->|"dispatches resolution"| node_path_plugin
node_esbuild -->|"dispatches loading"| node_fetch_plugin
node_fetch_plugin -->|"reads and writes"| node_file_cache
node_fetch_plugin -->|"fetches modules"| node_unpkg
node_app -->|"posts bundle"| node_iframe
node_iframe -->|"evaluates bundle"| node_iframe

click node_app "https://github.com/antimatterr/web-code-editor/blob/main/src/index.tsx"
click node_path_plugin "https://github.com/antimatterr/web-code-editor/blob/main/src/plugins/unpkg-path-plugin.ts"
click node_fetch_plugin "https://github.com/antimatterr/web-code-editor/blob/main/src/plugins/fetch-plugin.ts"
click node_file_cache "https://github.com/antimatterr/web-code-editor/blob/main/src/plugins/fetch-plugin.ts"
click node_iframe "https://github.com/antimatterr/web-code-editor/blob/main/src/index.tsx"

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_user toneBlue
class node_esbuild,node_path_plugin,node_fetch_plugin,node_file_cache toneAmber
class node_iframe toneMint
class node_unpkg toneIndigo
```

## Components

### Editor app

- [Editor and build orchestration](https://github.com/antimatterr/web-code-editor/blob/main/src/index.tsx): `src/index.tsx`

### Build and loading

- **esbuild service**
- [UNPKG path resolver](https://github.com/antimatterr/web-code-editor/blob/main/src/plugins/unpkg-path-plugin.ts): `src/plugins/unpkg-path-plugin.ts`
- [Module and CSS loader](https://github.com/antimatterr/web-code-editor/blob/main/src/plugins/fetch-plugin.ts): `src/plugins/fetch-plugin.ts`
- [Browser file cache](https://github.com/antimatterr/web-code-editor/blob/main/src/plugins/fetch-plugin.ts): `src/plugins/fetch-plugin.ts`

### Preview runtime

- [Sandboxed preview](https://github.com/antimatterr/web-code-editor/blob/main/src/index.tsx): `src/index.tsx`

### Other components

- **Editor user**
- **UNPKG package host**

## Connections

- Editor user → Editor and build orchestration: enters and submits
- Editor and build orchestration → esbuild service: starts and builds
- esbuild service → UNPKG path resolver: dispatches resolution
- esbuild service → Module and CSS loader: dispatches loading
- Module and CSS loader → Browser file cache: reads and writes
- Module and CSS loader → UNPKG package host: fetches modules
- Editor and build orchestration → Sandboxed preview: posts bundle
- Sandboxed preview → Sandboxed preview: evaluates bundle