Type-safe HTML templating in Zig

Type-safe HTML templating in Zig(lalinsky.com)

72 points by lukaslalinsky 2 hours ago | 32 comments

weitzj 8 minutes ago |

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?

lukaslalinsky 16 seconds ago | |

Fun fact, I actually also had a fork of the Google Closure Templates that added support for Python. I used it briefly. I completely forgot about it, but I remember now I did enjoy using it back then. https://pypi.org/project/soy/

pjmlp 30 minutes ago |

> 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.

lukaslalinsky 16 minutes ago | |

For me web was always about these scripting languages. Even in the CGI days, I learned to use Perl just enough to do a simple web form. I kind of associated the domain with GC languages, as this kind of work usually involves many temporary strings and dictionaries. In fact, the first compiled language I ever used for a web project was Go, and even that was due to the fact that it has garbage collector.

fergie 1 hour ago |

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

tannhaeuser 31 minutes ago | |

SGML (ISO 8879), the markup meta-language on which HTML is based, has that, as well as many other things, such as type-checked templating.

Hence HTML as a mere vocabulary making use of SGML's facilities didn't need to define its own ad-hoc mechanism.

Btw the <?php ...> construct is also derived from SGML. In SGML terms it's a "processing instruction" rather than an "entity reference", the latter being the basic means for content inclusion.

pautasso 53 minutes ago | |

Nice idea!

https://web.dev/articles/imports

Been there, tried that.

Introduced in 2014 (Chrome 36) Deprecated 2018 (Chrome 70) Retired 2019 (Chrome 73)

cton 1 hour ago | |

You might be interested in https://github.com/WICG/declarative-partial-updates

jrimbault 1 hour ago | |

<?php include "header.html" ?>

fergie 1 hour ago | | |

Yes, but then you need php

Why is there no direct support for templating in HTML itself?

messe 1 hour ago | | |

    <!-- #include file="header.html" -->

https://en.wikipedia.org/wiki/Server_Side_Includes

geoffmunn 19 minutes ago | |

Can I introduce you to iframes? Clunky but they do exactly what you are asking for.

Humphrey 1 hour ago |

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.

riffraff 40 minutes ago | |

There was a brief period where everyone and their dog implemented mustache[0] as a template system, but it died quickly because cross-language templating is not that useful in the end, you seldom need to switch host language but keep the templates.

0: https://en.wikipedia.org/wiki/Mustache_(template_system)

marcle 1 hour ago | |

I always thought that the type-safe XML/HTML in Ur/Web was elegant.

For examples, see http://www.impredicative.com/ur/demo/

sorokod 1 hour ago | |

Type safe DSLs in Kotlin

https://kotlinlang.org/docs/type-safe-builders.html

boxed 43 minutes ago | |

I think nim also has this.

As for Django... well.. Django only has text formatting, you can write any garbage and broken html and lots of invalid templates with silent failures there unfortunately.

dnautics 1 hour ago | |

This is sort of halfway between tsx and Elixir's EEx

_kidlike 40 minutes ago |

sounds very similar to jte.gg for Java

vogelke 21 minutes ago |

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>

jaxxzi 35 minutes ago |

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.

chii 33 minutes ago | |

and this leads to html injection attacks when there are small errors in your escaping.

Using a template engine means you systematically ensure that values are escaped (at least, that's one of the reasons i would choose an engine over raw dogging the html).

NamlchakKhandro 22 minutes ago | |

eww gross.

slopinthebag 2 hours ago |

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" }
            }
         }
      }
   }

dnautics 1 hour ago | |

> you can accomplish this

That's not HTML though, you have to learn a whole new dsl that must conform to rust parser rules. So, not the same thing at all.

josephg 1 hour ago | | |

You can do actual html. This is Leptos, a Solidjs like rust library:

    #[component]
    fn App() -> impl IntoView {
        let (count, set_count) = signal(0);
        view! {
            <button
                on:click=move |_| set_count.set(3) >
                "Click me”</button>
            <p>{move || count.get() * 2}</p>
        }
    }

slopinthebag 44 minutes ago | | |

i prefer it, but you can also get html if you want

   html! {
       <div onclick=|_ev: web_sys::MouseEvent| {}>
          You can type text right into the elements
          { component }
          { text_var }
       </div>
    };

skavi 1 hour ago | |

but you have invented syntax

asimovDev 1 hour ago | |

This is just Twig templates, crazy. It's cool that Rust can do this out of a box

slopinthebag 1 hour ago | | |

yep and you get rust's lsp support too, autoformatting, etc.

this is rsx, but there are other macros that look just like html. i prefer this though, it's much more compact and readable imo

sroerick 1 hour ago | |

That is super cool actually

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>

#[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" } } } } }

#[component] fn App() -> impl IntoView { let (count, set_count) = signal(0); view! { <button on:click=move |_| set_count.set(3) > "Click me”</button> <p>{move || count.get() * 2}</p> } }