Independent Build
zl-jspg: JavaScript Playground Notebook
An in-browser notebook for writing Markdown and running JavaScript, with Monaco editing, esbuild bundling, IndexedDB caching, and local save/load support.
Highlights
- Built a JavaScript notebook inspired by Jupyter-style cells.
- Bundled user-written code in the browser with esbuild.
- Published monorepo packages and deployed a working demo.
Context
zl-jspg started as a way to practise JavaScript and keep notes beside runnable code, similar to a lightweight notebook.
Role and scope
Vincent built the frontend in React and TypeScript with Redux for state management, and wrote the backend in Express and TypeScript.
The project also included CLI and server behaviour for loading, saving, and running notebooks locally.
Technical decisions
Monaco Editor handled code editing, while esbuild bundled user input so JavaScript and JSX could run directly in the browser.
IndexedDB caching and package fetching from unpkg made repeated runs faster.
Engineering range
It's a small, self-contained example of the developer tooling and full-stack work Vincent likes building outside of a job.