picostitch
crafting (and) JavaScript
#JavaScript

JavaScript Notebook (jupyter inspired)

I have been playing around with @tomayac's awesome Local Reverse Geocoder project. It basically resolves geo coordinates, latitiude+longitude pairs and gives you names for it.

While trying it out, I wished for a JS-native jupyter-style notebook. I looked around and found some (inspirations) but nothing that was quite enough, imho.

Execute JS Snippets in Markdown Files

Using the above reverse-geocoder project, mentioned above, I had to run a number of commands to get it into a state that I can use it and play around. These were sometimes slow and I often got it wrong, so I had to retry. I wished for a node-repl that can (comfortably) replay my commands and ideally store them.

Thinking and playing, trying and swearing I finally knew what I want, I want a node-repl that I can run inside a markdown, so I can also put down some notes, since I am always good at forgetting it makes sense to write down things.

The project is still under construction and very early, I am playing around with it still, but it works ok-ish for not too complex and not too asynchronous code. Feel free to try it out at codeberg.org/wolframkriesing/js-notebook.

js-notebook

This is what it looks like:

JavaScript Notebook Screenshot
JavaScript Notebook Screenshot

You can add it to an existing npm project, like so:

> npm install git+ssh://git@codeberg.org:wolframkriesing/js-notebook.git

# OR

> yarn add git+ssh://git@codeberg.org:wolframkriesing/js-notebook.git

Yep, it's not yet in the npm registry, maybe some day ... we'll see.
Now you can run jsnotebook (or in short jsntbk) executable from inside your project, it will start a webserver that provides your runnable markdown at localhost:6543.

It will use your env, which means the packages installed in your project and they are all available ro be run in the markdown file.

What is this good for?

I use it for documenting how certain things inside a project work, or documenting findings about how some external library works.

One plan I have, is to build a markdown page that documents and shows examples better for my favourite test matcher hamjest.

What it CAN NOT (yet) do

  • the markdown file is NOT editable
  • there is no visualizations built in (like maps, graphs, charts, etc.)