// CASE_FILE > JS_VERSE

Frontend · Tooling2024

JavaScript-Verse

Trying JavaScript or React usually means a sandbox setup. I built an in-browser playground that runs real code, real npm modules, and React, with no install.

100%
In-browser, no server
0
Install required
1
Click to run
humblef0ol.github.io/javascript-verseFEED//LIVE
> run main.jsx
[ok] babel transpile
[ok] npm module resolved
[ok] iframe sandbox
preview .............. live
status: RUNNING
$

// 01 > CONTEXT

JavaScript-Verse is a browser-based code execution environment and markdown editor for writing and running JavaScript and React, with side-by-side docs, a cheatsheet, and code export.

// 02 > THE_PROBLEM

Experimenting with JavaScript or React meant a local toolchain or a limited sandbox that couldn't pull real npm modules or render components.

Running untrusted code in the browser safely, transpiling JSX and modern syntax, and resolving imports without a server are each non-trivial, so most playgrounds punt on one of them.

Before

Local setup to experiment · no real npm modules · JSX unsupported

// 03 > APPROACH

I solved safe execution with iframe isolation, advanced syntax with in-browser Babel transpilation, and imports with in-browser bundling.

Sandboxed execution

Code runs inside an isolated iframe with live preview, so arbitrary code is safe to run.

Real modules + JSX

In-browser Babel transpiles JSX and modern syntax; in-browser bundling resolves any npm import.

React.jsTailwind CSSBabelWebpackNode.js

// 04 > THE_RESULT

Anyone can write and run JavaScript or React in the browser, pull real npm modules, and export their code, with nothing to install.

Before

  • Local toolchain required
  • No npm module support
  • No JSX / React rendering

After

  • Runs in the browser, no install
  • Any npm module at runtime
  • JSX + React, sandboxed
The fastest way to learn something is to run it. I wanted real JavaScript and React, real modules, with nothing to install first.
AAmit RanaAuthor, JavaScript-Verse

Have a similar problem?

Book a 15-min call