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.
You can also embed an existing notebook using OEmbed.
There are two ways to get RunKit on your page, described below. In both cases, you want to include:
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
2. Programmatically creating a notebook
You can also create an embedded notebook programmatically. Just include the same script tag, then call
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.
Create a notebook that can not be edited or run
"endpoint", the notebook will be run as a server endpoint and a link to it will be exposed in the embed.
Provide a semver range that the node engine should satisfy, e.g.
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
The title of the notebook when it is saved on RunKit.
The minimum height of the embed. This value is 130px by default.
The timestamp in UTC milliseconds to recreate the state of package availability. No packages published to npm after this time are available in this embed, which is useful if you want to freeze the conditions for reproducing a bug, or guaranteeing that versions of a package and its dependencies are loaded. This value is set to the time the embed is created by default.
You can put setup code in the preamble so it doesn’t pollute the main embed. This is useful when using RunKit embeds for your documentation: in the preamble you can require your package, then use it in the main embed.
A function that will be called when the embed has fully loaded. The function will be passed a reference to the notebook.
A function that will be called any time the notebook is evaluated.
The notebook object (returned by createNotebook) also exposes an API for interacting with it, with the following methods:
Pass a callback, which will be called with the current source of the notebook.
Pass a string to set the notebook’s source. The callback is optional.
Pass a callback, which will be called with the current source of preamble of the embed.
Pass a string to set the embed preamble’s source. The callback is optional.
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.
Embed existing notebooks with OEmbed.
Our OEmbed endpoint is available at:
We support only the JSON format for requests. See the OEmbed documentation for information about how to implement the protocol. RunKit does support auto-discovery of notebooks.
RunKit notebooks are highly interactive, and as a result they want to change height in response to user interaction. If you're using RunKit with Embed.ly, using their Platform.js library will make sure everything works smoothly. If you're using OEmbed directly, you'll want to include this script, or something similar, on your page:
This code is not RunKit specific, and it's how many sites implement this behavior. It's a simple protocol for an iframe to message its parent requesting the height of the frame be changed.