CodeRunner: A Focused JavaScript Workspace That Runs in the Browser

CodeRunner is a JavaScript workspace built in the Lab for focused experiments, small multi-file projects, and code demonstrations. It runs in the browser without an account or local toolchain, and keeps project data in local browser storage.

The current deployment is the basic version of the application. It is deliberately smaller than a cloud development environment: one built-in Aloe theme, a file workspace, code execution, console output, local persistence, and the controls needed to move work in and out.

A useful middle ground between a snippet and a cloud IDE

Browser-based coding tools already cover a wide range. CodePen and JSFiddle are established tools for front-end snippets, demonstrations, and test cases. CodeSandbox and StackBlitz WebContainers support much broader development environments, including framework projects and cloud or in-browser runtimes.

CodeRunner explores a narrower space. It is intended for someone who wants to open a browser, write JavaScript across a few files, run it, inspect the output, and keep working without creating an account or configuring a project.

That scope makes it useful for testing language features, explaining a programming concept, preparing a small reproducible example, or checking how several local modules behave together.

The live version supports real project structure

The file workspace supports files and folders rather than a single disposable editor pane. Projects can use relative import and export statements across local JavaScript and TypeScript files. The in-browser module bundler resolves those dependencies and executes the selected entry file.

It is intentionally not a package manager or a complete Node.js environment. External npm packages, arbitrary package imports, and dynamic import() are outside the current execution model. For self-contained projects, the live version supports modern JavaScript features such as async functions, classes, destructuring, optional chaining, and promises.

Files can be created, renamed, moved, uploaded, and downloaded. Folders can be organized hierarchically and exported as ZIP archives. Saved project state stays in localStorage, so the code remains on the device and is restored across sessions unless the browser storage is cleared.

Execution stays inside the browser

CodeRunner transforms modern syntax in the browser and prefers Web Workers for code execution. Loop guards, execution timeouts, and limits on pending asynchronous work reduce the risk of an experiment freezing the interface. These controls make the environment safer for exploratory code, but they are not a security boundary for running hostile code.

Console output captures standard log levels and supports structured values. The live basic build keeps the presentation simple, while still providing code formatting, syntax feedback, copy controls, and keyboard shortcuts such as Command + Enter or Control + Enter to run the current file.

The PWA works well as an iPad coding surface

The live application is an installable Progressive Web App with a service worker for offline fallback after the required assets have been loaded. Project files and settings remain local to the browser.

CodeRunner has been used extensively on iPad with an external keyboard. The layout responds to tablet dimensions, the run shortcuts account for Apple keyboards, clipboard handling includes an iPad-compatible fallback, and the installation flow provides iPad-specific guidance.

It does not turn an iPad into a full desktop development machine. It does provide a practical surface for JavaScript experiments, lessons, demonstrations, and small projects when opening a laptop or configuring a repository would be unnecessary.

The enhanced version expands the workspace

The dev branch contains an enhanced build from the same codebase. It adds a dedicated theme manager that can load compatible VS Code theme JSON files from the device or a raw GitHub URL, map their syntax colors into CodeMirror, preview their palettes, and save custom themes locally.

The enhanced build also includes richer console rendering for objects and tables, broader theme controls, and ongoing work around HTML, CSS, JSX, TSX, and starter project creation. These capabilities are implemented in development but should not be read as features of the basic application currently available at coderunner.lab829.com.

The distinction is intentional. A feature-flag system produces basic and enhanced builds from the same application, allowing the smaller deployment to stay focused while more capable workflows continue to be tested.

Try it or adapt the idea

You can use the basic version at coderunner.lab829.com. Install it as a PWA if you want offline access, or keep it in the browser for quick JavaScript work.

The same architecture could support an embedded coding surface inside a learning platform, product documentation, a teaching tool, or an internal prototyping workflow. Review the current product on the Lab829 Products page. If your organization needs a focused environment where users can write and run code without leaving the product, explore Product Design and Development or start a conversation with Lab829.