There is a new tool in town to run Javascript in your browser.

It compiles your code using Esbuild (in the browser, with WASM!), downloads any dependencies from Unpkg, and runs the code in a sandbox environment. That makes it the perfect way to quickly test some JS behaviour, and try out new things!

console.log('test');

Let’s play with dependencies!

const _ = require('lodash');
const numbers = [1, 2, 3, 4, 5];

// Using lodash, which we dynamically load from a CDN!
const doubledNumbers = _.map(numbers, (number) => number * 2);
console.log(doubledNumbers);

That’s very simple, but how about this? What changes do you need to make to turn this into a real FizzBuzz exercise?

let i = 1;
while (i < 10) {
  if (i % 3 === 0) {
    console.log("Fizz");
  } else if (i % 5 === 0) {
    console.log("Buzz");
  } else {
    console.log(i);
  }
  i++;
}

Now it’s your turn! Go here to start your own notebook.

Author’s notes:

Infinite loops are very easy to achieve. Remove the i++ line above, lots of fun 😨
We need more docs on how deps are loaded, and ways to output HTML and graphs
Some clean loading states would be nice!