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 with React and TypeScript, managed state with Redux, and implemented the backend with 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

The project shows interest in developer tools, browser execution, package workflows, and full-stack product design.