Using Indiepen for embedded code examples

While documenting the technical details of the “Moving poetry” project I needed to include structured code examples that would also be rendered to show the described results. Many hosted alternatives exist, like Codepen and JSFiddle, but I wanted to host the files myself (to be able to version them same as the rest of this blog, etc.), and not have to sign up for yet another service.

That’s when I stumbled upon Indiepen, which judging by its description sounded like the perfect fit:

An independent and privacy-friendly solution to present your code examples to the people.

After a quick look I found it to have a nice responsive design that looks great, and the privacy-friendliness is definitely something I’m all for!

To use Indiepen, you simply need to host the code example files (HTML, CSS and JavaScript) somewhere and provide the URL for Indiepen to present them together with a preview. Only one problem: Indiepen is yet another hosted service that would introduce a dependency as described in this Github issue.

Since Indiepen is open source with a permissive MIT license I decided to see if I could make a build of it that could be self-hosted on this blog. What I ended up with was something even better: a self-contained single HTML file that can be hosted and included anywhere, removing the need to host the full web service of Indiepen.

The necessary changes to build such a file are described here, and the setup for this blog now includes a copy of the Indiepen HTML file. For example in the “Moving poetry” post:

<iframe src="/code-examples/index.html?url=/code-examples/2021-12-01-moving-poetry/opacity/basic" loading="lazy" width="100%" height="250"></iframe>

which renders as