It’s taken a while, but I finally paid attention to the Test with RunKit button within a package on the npm website.

npm RunKit

What a fantastic tool RunKit is, too! Not only can you import Node.js packages within a cloud environment, inspect the results of your commands using several, built-in value viewers, but also communicate your thoughts step-by-step with text sections.

This is brilliant for creating permanent examples of how something useful could be applied. One use case I already love is bringing a Pull Request comment to life: rather than just supplying a comment of how code could be improved, why not use a non-sensitive dataset and apply your improvement in a sandbox, with comments? See my RunKit examples, some of which also enable their data to be fetched from parameterised endpoints 💪

Literate Code

RunKit reminds me of the fantastic potential of Literate Coffeescript, whereby a script can be written in Markdown, but the code blocks interpreted as Coffeescript:

This elevates the documentation to an integral part of the source code, so that the intent of the code associated with it can be explained more prominently.

There are far more comprehensive solutions out there, particularly Jupyter, but they require far more setup, learning and hosting, although Binder could help change that in the future. A RunKit notebook can be created and shared in seconds, solely from their website.

Embedding Runnable Examples

RunKit also provides means to embed their tool within your web apps. This brings your code to life, and lets the reader interact with it to test their understanding, or just have fun! Their example shows how geometry data can be mapped; try hitting run below:

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

I think ASCII art brings a little humour to console applications, but don’t take my word for it, see how easy it can be to create:

const boxen = require("boxen") const options = { borderStyle: "classic", padding: 1 } const title = boxen("Boxen gets your text noticed!", options) title + "\nAny other text is simply text :)"

I am just exploring the potential of RunKit, but I hope you can agree that the applications are more interesting and useful than static code alone. Please let me know if you use this, and what you have created!