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

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.

• readOnly / data-read-only

  Create a notebook that can not be edited or run

• nodeVersion / data-node-version

  Provide a semver range that the node engine should satisfy, e.g. 0.12.x or > 4.0.0

• env / data-env-*

  An array of environment variables that will be made available in the execution environment (under process.env). These should be strings in the form "name=value". When using the data-env- form, only letters and numbers are allowed, and they will be uppercased (e.g. data-env-foo will become process.env.FOO)

• onLoad

  A function that will be called when the embed has fully loaded. The function will be passed a reference to the notebook.

• onURLChanged

  A function that will be called any time the URL of the notebook changes. The function will be passed a reference to the notebook.

• onEvaluate

  A function that will be called any time the notebook is evaluated.

Notebook API

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

• notebook.getSource(callback)

  Pass a callback, which will be called with the current source of the notebook.

• notebook.setSource(source, callback)

  Pass a string to set the notebook's source. The callback is optional.

• notebook.evaluate(callback)

  Force the notebook to evaluate. The callback is optional, and only represents that the request to evaluate has succeeded, but not that evaluation is finished.

• notebook.URL

  The current URL of a notebook. This value may be unavailable, or it may change over time. See the onURLChanged creation option.