How antimatterr/web-code-editor works
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: index.tsx Editor and build orchestration · fetch-plugin.ts Module and CSS loader · unpkg-path-plugin.ts UNPKG path resolver
Components 8
Editor app
- Editor and build orchestration
src/index.tsx
Build and loading
- esbuild service
- UNPKG path resolver
src/plugins/unpkg-path-plugin.ts - Module and CSS loader
src/plugins/fetch-plugin.ts - Browser file cache
src/plugins/fetch-plugin.ts
Preview runtime
- Sandboxed preview
src/index.tsx
Other components
- Editor user
- UNPKG package host
Connections 8
- 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