How anandarizki/jsplayground works
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: page.tsx Playground page · use-runner.ts Worker runner · use-settings.ts Settings state · App.tsx App entry
Components 19
Playground interface
- App entry
src/App.tsx - Playground page
src/components/jsplayground/page.tsx - Code editor
src/components/jsplayground/editor.tsx - Sandbox completion
src/components/jsplayground/completion.ts - Playground state
src/components/jsplayground/use-playground.ts - Structured console
src/components/jsplayground/console-view.tsx - Code formatter
src/components/jsplayground/format.ts
Sandbox execution
- Worker runner
src/components/jsplayground/use-runner.ts - Snippet sandbox
src/components/jsplayground/worker-main.ts - Message validation
src/components/jsplayground/validate.ts
Settings and presentation
- Settings state
src/components/jsplayground/use-settings.ts - Settings dialog
src/components/jsplayground/settings-dialog.tsx - Theme palettes
src/components/jsplayground/themes.ts
Install and offline
- PWA configuration
vite.config.ts
Other components
- Playground user
- Prettier
- Browser localStorage
- Browser Web Worker
- Browser app cache
Connections 17
- 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