Type-safe HTML templating in Zig

> Two years ago, I picked up Zig, and I’d never have imagined I’d be considering web development in such a low-level language.

This is kind of funny remark, given that the author started in 2000 in Web development, and with PHP 3.0.

I started in 1997, our distributed systems class had exercises to write CGIs in Perl and C.

Between 1999 and 2001, most Web development at my employer was in Tcl and C, ASP was naturally a mix of VB and C++ COM components, and there was also the fun to write all those mod_something Apache extensions, and IIS ISAPI modules, naturally in C and C++.

Ah, Microsoft was also shipping ATLServer, because who wouldn't want to use ATL for Web development, while Borland/Inprise was shipping similar stuff for Delphi and C++ Builder.

PHP itself, in 3.0, it was still the time that it hardly had much functionality builtin, so it was quite common to write extension modules in C.

So it is kind of ironic to read coming back to the way things were, before the slow scripting languages takevover in the 2010's, is something no one thought about.

I kinda like kotlinx.html in Kotlin; it's an eDSL for writing HTML in actual Kotlin. So I can put break points in my template code. It's a tiny bit slower than string-with-some-interpolation type of template libraries; but it's so little that it's a price I'm willing to pay. Also there's more impact on compile times than with string-with-some-interpolation type of template libraries.

The typesafety you get is what you already have in Kotlin, and there a little extra in that you cannot nest certain HTML-elements in certain other elements (adhering to the HTML spec). You can come up with your own elements and attributes, but the ones that are in the HMTL-spec are usually available in kotlinx.html as well (and thus can be auto-completed).

A large part of this library is generated from the actual HTML spec.

Claude Code seems to have not problem writing it (I barely write templates myself these days).

https://github.com/kotlin/kotlinx.html

https://dzone.com/articles/modern-type-safe-template-engines...

I love this design, especially as it takes advantage of the Zig build chain; I expect re-builds will be fast enough that you essentially get JS-style hot reloading in the dev cycle. Now we just need https://github.com/air-verse/air for Zig (Ziex has one built into its CLI, but that's only for Ziex)...

Looking forward to seeing some benchmarks!

W3C: Why can't we just have <includes src="./header.html"> and be done with it?

> Then I saw Ziex and I was amazed. It never occurred to me that the JSX approach could be done outside of JavaScript.

It never occurred to me, either! This is really neat! How does it work?

EDIT: Never mind, seems like it's a custom file format that gets compiled to Zig code. Still quite neat but unfortunately you lose all the IDE support.

i'm also using a "type safe" templating engine (for kotlin, as a gradle plugin) of my own design that goes the other way - instead of embedding a model class into the template, a template class is generated that takes all the values as parameters.

i.e. MyTemplate.tpl.html

    {if $foo}hello world, {$myname}!{else}goodbye, world.{/if}

which creates a kotlin class that can be used like this:

    MyTemplate(
      foo = true,
      myname = "bar"
    ).toString()

the biggest upside for me is that this way there's full, free IDE support, i don't need to write extra view models if the mapping isn't 1:1 and performance is pretty good because in the end there's no runtime parsing/compiling/interpreting except for the baseline JDK stuff (though there are even faster engines).

https://codeberg.org/h34tnet/tempolin

warning: so far i'm the only user though, so don't use it in production. also, i'm working on some improvements right now which haven't been pushed yet.

How does zt compare to zmpl, another popular zig templating engine?

https://github.com/jetzig-framework/zmpl

Thank you for the article. I remember using Google Soy templates roughly 10 years ago. I think this is similar to what is used now when you make Helm templates for example or Go Templates. It has the html escaping, JavaScript escaping etc built in.

Is there maybe a Zig wrapper for Google soy around?

I love the idea! I could imagine something similar created for other languages too. Perhaps written in a way that a template could be reused in, let's say Django, and a JS React frontend. With all the type-safety that tsx provides.

sounds very similar to jte.gg for Java

I've never quite got the deal with 'template engines'. I have always just done normal programming - in whatever language I'm using - and interspersed outputting raw string literals to create the html.

The linked thread here[1] is… illuminating. The Zig stdlib seems pretty buggy, and the much applauded IO interfaces seem to be struggling with cancellation. The BDFL doesn’t seem to have much to say other than “brush your teeth”

1. https://ziggit.dev/t/making-it-harder-to-swallow-error-cance...

If you can suppress your gag reflex, M4 can do some of what you want. sinclude(...) will include a file and be silent in case of failure. I did something like this for user-login history because I couldn't use PHP or Perl:

    me% cat index.m4
    <!DOCTYPE html>
    <html>
      <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Better user history</title>
        <link rel="stylesheet" href="local.css">
      </head>

      <body>
          <h3>Users</h3>
          <ul>
            <li><em>By username</em></li>
            <ul>
    sinclude(`byuser.m4')dnl
            </ul>
            <li><em>By last login date</em></li>
            <ul>
    sinclude(`bydate.m4')dnl
            </ul>
          </ul>
    sinclude(`footer.m4')dnl
      </body>
    </html>

    me% cat byuser.m4
    <li><a href="byuser/A-L">A-L</a></li>
    <li><a href="byuser/M-Z">M-Z</a></li>

    me% cat bydate.m4
    <li><a href="bydate/2025">2025</a></li>
    <li><a href="bydate/2026">2026</a></li>

    me% cat footer.m4
    <p><em>Last update: syscmd(`date | tr -d "\n"')</em>

    me% m4 index.m4 > index.htm

    me% cat index.htm
    <!DOCTYPE html>
    <html>
      <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Better user history</title>
        <link rel="stylesheet" href="local.css">
      </head>

      <body>
          <h3>Users</h3>
          <ul>
            <li><em>By username</em></li>
            <ul>
    <li><a href="byuser/A-L">A-L</a></li>
    <li><a href="byuser/M-Z">M-Z</a></li>
            </ul>
            <li><em>By last login date</em></li>
            <ul>
    <li><a href="bydate/2025">2025</a></li>
    <li><a href="bydate/2026">2026</a></li>
            </ul>
          </ul>
    <p><em>Last update: Mon Oct 12 03:08:32 EDT 2026</em>
      </body>
    </html>

[flagged]

[flagged]

[flagged]

one thing i love about rust's macros is that you can accomplish this without needing a separate file type or inventing syntax

   #[component]
   pub fn HomePage(user: Option<User>) -> Element {
      rsx! {
         Layout { 
            title: "Home",
            if let Some(u) = user {
               h1 { "Welcome back, {u.name}!" }
               a { href: "/users/{u.id}", "Your profile" }
            } else {
               h1 { "Welcome, guest!" }
               a { href: "/login", "Log in" }
            }
         }
      }
   }

[flagged]