The basic premise is to take a Nix expression like this:

    [ "div#main.container" { lang = "en"; } [ "h1" "Hello" ] ]

    <div class="container" id="main" lang="en"><h1>Hello</h1></div>

If you've used hiccup (https://github.com/weavejester/hiccup) before this will be immediately familiar to you, native data types in arrays transformed into HTML, and it matches really well with Nix! Kind of almost took me by surprise.

I've made some more involved examples available on the website, where the website itself is also dynamically generated with niccup: https://embedding-shapes.github.io/niccup/

And if that wasn't enough, I also added a quine example on the website itself, which if you copy-paste the two files you get a built version of the page itself: https://embedding-shapes.github.io/niccup/examples/quine/ (this was probably the most tricky and fun part of this whole project, so worth mentioning separately for sure)

I've used it to generate documentation websites and some smaller projects so far, but hasn't been used by others before, so I'm eager to hear what people think about it! Thank you for reading and your temporary attention!

GitHub repository: https://github.com/embedding-shapes/niccup (~800 lines of Nix in total, main implementation src/lib.nix is only ~120 lines though)

The source of the blog itself: https://github.com/embedding-shapes/embedding-shapes.github.... (~150 lines of Nix)