Live Code Examples

One of the things I've done many times with this blog is post code examples, and it's always been a huge pain in the butt, followed by inevitable breakage.

Sometimes I've created a GitHub Pages repo just to show something working. Other times I've used a code formatting plugin, or linked to a side like jsfiddle or codesandbox. But over time they all break. I don't mind it if the code breaks because, say, the Javascript engine changes. But this is just infuriating.

Anyway, one of the things I built for xinjs-ui is the LiveExample web-component.

LiveExample in action on ui.xinjs.net, the xinjs-ui demo/doc site.

Using it is absurdly easy: LiveExample.insertExamples(element, context). It looks for <pre> tags which start with js, html, or css and just creates interactive demos out of them, like this:

And since each blog post is just a <markdown-viewer> web-component, you just call that line of code in the element's didRender method. In this case, I pass xinjs and xinjsui as context to the live examples for convenience.

At some point I'll try to track down the various code snippets in my blog and turn them into live examples (or figure out a way to do it programmatically or using Generative AI).