HTML scrapbook

I've become interested in the idea of making little tools that are self-contained html files that you can run locally.

The first thing I've been making is a "scrapbook" tool that you can make notes with. You can paste text and images into the file and move them around. You save the file with the browser's "save page" functionality (i.e. Ctrl+S), and then you have a single-file, self-executable document (the images are embedded with base64-encoded data URLs).

It's only around 300 lines of HTML, CSS and Javascript. I'm slowly growing the software as I use it, adding little features as I want them, which I'm finding is a really pleasant way of doing things.

You can see it here and it's yours to save and play around with. I am only really making this for me though, and I only use Firefox, so I don't know if it works properly in any other browser!

Two things that I think are interesting:

• Using the browser, with all of its complexity, and the declarative nature of CSS and HTML, to make local tools easily. There is a lot you can do without the need for Electron, if you are happy for your "application" to end with ".html". If we had some more innovation in the web browser space, maybe this is something that could be better supported.
• With the scrapbook tool specifically, the fact that the data is combined in the same file with the code that manipulates it. There's something nice about this - it's like a self-extracting ZIP (remember those?)

Some vaguely relevant ideas that might be of interest:

• freewheeling apps
• cold-blooded software
• local-first software (the emphasis here is on collaboration, but the other ideals are also interesting)