html-bin, an embeddable codebin widget
I like to post little code toys on this site from time to time, in lieu of putting a full demo out on its own page. Some of the older demos were hosted on Glitch which was great because you could live edit things! Alas, Glitch is ending its project hosting. I also for a bunch of years have had a scratchpad codebin for quickly dashing out ideas. I've been looking for something in between anyway, and Glitch shutting down pushed me to make something to split the difference. I decided to write it up as its own little open source project for others if they find it useful!
It's got a few nice features:
-
everything happens client-side- the preview uses a
Blobof an html document to run in its own little secure-but-sandboxed origin - (throttled) debounced live updating
- split-pane editing that collapses at small screen widths
I'm using CodeMirror for the editors themselves. The
widget logic is built using my
minifw library- it was a nice to
build something on top of it to understand how well it works for real-world uses! All the
internal logic uses signals and effects to keep state which I'm really coming around to as a
mental model.
Things I want to add:
- easier instantiation from markdown
- the ability to embed "controls" (like sliders, inputs, etc) outside the editors and preview to make it easy to tweak variable parameters in demos
- ability to progressively enhance
pre codeblocks into live editors - export button to make it easy to download tweaked versions of code
- localStorage so if you come back to the page you can see your changes
I'm running this project as "some maintenance intended", in that while I'll probably take the odd feature request/patch and I do plan on updating it, it's still mostly for me and I encourage others to fork if they want something super different!