Hah, is “implementing your own notebook development environment” is the 2020s edition of Greenspun’s Tenth Rule? Because I also took a stab at it a few years ago! 
I called it NBD. It’s been stuck in “sort-of-usable but rough prototype” stage for two years now - I only got to work on it for a few months on it before my daughter was born, and then that took over my life (no complaints though). Here’s an improvised 7 minute silent screencapture I made just now to show what’s implemented:
If anyone is interested in fooling around with the prototype, it can be found here: NBD - notebook static site development
You always had really cool tech but a totally different approach to things than me Tom so I’m super curious and excited to see where our approaches differ 
.
In my case I tried to go full neo-luddite: you can open the html file and it just works with file://, no webserver needed. This is also why it uses Ace instead of more recent code editor libraries).
There’s no npm or webpack or anything resembling modern JS development. The libraries used are imported via <script> tags like we’re back in the pre-Require.js days. I only need ace, `filesaver.js I refuse to worry about “polluting the global namespace” or whatever because honestly it’s just for quick throwaway prototypes that should export to single static HTML files.
Because I’m grug-brained and couldn’t figure out how to detect if a name exist in another cell like Observable does it, I made it import cell names explicitly via a tiny header DSL “embedded” in a comment on the first line. On the plus side, the header DSL also replaces most UI elements so I can do almost everything via keyboard input.
You wanna know how I handle saving and loading notebooks? I export them as .js files, and “load” them via a script tag. It feels like such a dumb hack but it’s the only thing I could come up with that works without a server.
Same thing for variable name validation, I’m just trying to do the stupidest thing that works:
/**
* Tests if `name` is a valid JavaScript identifier
* @param {string} name
* @returns {boolean}
*/
function validIdentifier(name) {
if(typeof name !== 'string') return false;
if(!/^([$_]|[^\0-/])+$/.test(name)) return false;
// We're already allowing `new Function` anyway,
// might as well leverage it for cheap variable name validation.
try { new Function(`const ${name} = 0`) } catch(e) { return false }
return true;
}
It’s so nasty, hahaha
Anyway, aside from a baby (now toddler) to look after, I basically hit a wall when I got to the reactivity part and couldn’t figure out how to do topological sorting and “swapping” out cells reactively, so right now it works like Jupyter notebooks do. Which is really annoying, but I can work around it.
Gonna explore your notebook now Tom!
. Maybe I should change that!