RunKit Embed Embed node.js on any website


It's easy to embed RunKit on any website. The embedded version of a RunKit notebook has a single executable code cell. It will grow and shrink vertically to fit its content, and fill its container horizontally. You can have as many instances as you like on a given page.

Embedded Example

// GeoJSON! var getJSON = require("async-get-json"); await getJSON("https://storage.googleapis.com/maps-devrel/google.json");

There are two ways to get RunKit on your page, described below. In both cases, you want to include:
<script src="https://embed.runkit.com"></script>


1. Attaching RunKit to an existing element

This is the easiest way to embed RunKit. Just include one script tag, and let it know which element contains the source code you want to attach to with the data-element-id attribute.

<script src="https://embed.runkit.com" data-element-id="my-element"></script>

<!-- anywhere else on your page -->
<div id="my-element">
function foo()
{
    return "hello world"
}

foo();
</div>

2. Programatically creating a notebook

You can also create an embedded notebook programatically. Just include the same script tag, then call RunKit.createNotebook.

<script src="https://embed.runkit.com"></script>

<script>
var notebook = RunKit.createNotebook({
    // the parent element for the new notebook
    element: document.getElementById("my-element"),

    // specify the source of the notebook
    source: "\"hello world\""
})
</script>

Creation Options

In addition to the ones mentioned above, there are some additional options available when creating a notebook. Most are available using both embed methods, but some are only available when creating a notebook programatically.

Notebook API

The notebook object (returned by createNotebook) also exposes an API for interacting with it, with the following methods:


Bindings