Interactive browser development environment for JavaScript

All in one code editor, execution environment, and note-taking app for JavaScript. Quickly try out npm packages, or take and save notes on new JavaScript concepts without the hassle of setting up a development environment. Try it out here!

• Compile and run your JavaScript code directly in the browser
• Extremely fast bundling with esbuild
• Easily download and import npm packages by name
• Utilizes the same editor that powers VS Code
• Code formatting using Prettier
• Write notes with a rich text editor
• Re-arrange code cells and their execution context instantly
• First-class support for React and JSX
• Download or upload your notebooks as JSON files
• Light and dark mode

Built using TypeScript, Next.js, React, and Tailwind CSS.

Bundling is done in the browser using the WASM version of esbuild. Packages are fetched with a custom esbuild plugin and then cached in IndexedDB for performance using localForage. Local state is managed using Redux Toolkit with a custom hook to easily get the execution context of the code cells.

UI Components were scaffolded using shadcn/ui. The code editor is @monaco-editor/react, a React wrapper for monaco-editor. The markdown editor is @uiw/react-md-editor.

• JSX highlighting
• Add support for TypeScript
• Ability to store notebooks in the cloud
• Public and private notebooks
• Real-time collaborative editing

This project was inspired by and is an extension to the initial project from Stephen Grider's Udemy course React and Typescript: Build a Portfolio Project.