in-the-node

Running server-side code in your browser.

Embed node inside your browser with RunKit.

Full-screen Demo

Provide the initial notebook script via a child script tag:

  <!-- Polyfill for re(dge)tro browsers -->
  <script src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
  <!-- Polyfill for re(dge)tro browsers -->
  <script type="module" src="../in-the-node.js"></script>
  <in-the-node>
      <script nomodule>
          // GeoJSON!
          var getJSON = require("async-get-json");
          await getJSON("https://storage.googleapis.com/maps-devrel/google.json");
      </script>
  </in-the-node>

Syntax color JS object / JSON

Run-kit also comes with a nice prebuilt JSON syntax colorizer / tree view.

To support this basic functionality, pass the object you want to format to the input property:

document.querySelector('in-the-node').input = {myStringProp: 'hello', mySubObjProp:{greeting: 'hello'}}

Install the Polymer-CLI

First, make sure you have the Polymer CLI and npm (packaged with Node.js) installed. Run npm install to install your element's dependencies, then run polymer serve to serve your element locally.

Viewing Your Element

$ polymer serve