Embed node inside your browser with RunKit

Published on webcomponents.org

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

Install

Link to this version
ImportedReleased 26 December 2018MIT License
Framework Support
Browser Independent
Install with
npm install in-the-node"@0.0.6"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 0.0.6

Dependencies

  • xtal-latx#0.0.86