Example using notebook-kit in an editable single file html

[btheado]

Not long ago I discovered a delightful html based outliner program at https://m15o.net/echo/. It has many features (self-contained! self-modifiable!) packed inside a tiny <35KB html file.

I had the idea of integrating notebook-kit by using the outline/graph nodes as notebook cells. The existing editing capabilities in echo.html meant I got notebook cell editing for free, and connecting the node text to notebook-kit required just a few pages of additional code.

The result is at https://moka.pub/btheado. That site contains a handful of example notebooks. The examples are all editable and new notebooks can also be created anywhere in the node hierarchy. Changes can be saved by pressing the 's' key which downloads a copy of the html page. The downloaded copy is a fully functional and includes all the changes.

The implementation works, but is very primitive and not much more than a toy. Compare to lopecode which is much more mature.

The code which integrates echo.html with notebook-kit can be seen at https://moka.pub/btheado#n71