Reactive HTML with <sig-nal>

Push button, wait for 'walk' signal

How can we make ordinary HTML react to inputs like the push of a button, changing stuff on the web page as a result? By using <sig-nal>, a tiny, but extraordinarily powerful web component that I invented!

This is the text underlying my presentation about <sig-nal> at the ZürichJS meetup on October 28, 2025 in Zurich, Switzerland. Because it was a 5-minute lightning talk, I had to keep things very short, visual and clear.

The talk slides, with embedded demos, can be viewed in any modern browser — every paragraph below corresponds to one slide. And here is the Github repository for sig-nal (MIT license).

Hi, I am Markus. I am the founder of front-line GmbH here in Zurich. Come to us for web performance, eCommerce, deep frontend expertise. A fun fact about me? I once spent 3 years in the Horn of Africa teaching computer science!

Now imagine it's your first day on the new job and your boss says: No JS! NodeJs is what you hear, and you smile. But she corrects you: NO JS! We are enterprise, we use Java on the server! Your heart sinks, and you think: Good By, Server-Side Rendering! She continues: You don't even own the whole page. You just get some components, full of HTML - performance is king here! Now go and make them react to user input, to the network, whatever! What can you do, other than quitting your job?

You can start with what they allow, HTML, here for the classical counter component. Essentially a span holding the value from the server, 2 buttons to count up and down, IDs to name them.

You style it a little, then it looks nice. But you click the buttons and nothing happens. Is there a magic HTML element to make it come alive?

There is - <sig-nal>! You add an instance of my new web component to your markup and give it what it needs to know: The name of the signal, its type, where to get the default value from, and a description of how to 'hydrate' your component. 'Hydrate' is frontend speak for 'make it come alive'.

Now it's alive. Congrats, you have reactive HTML!

But what's behind the magic? First, signals. A signal is a time-varying value. You can ask the current value, change it and run callbacks on change. It's perfect for fine-granular UI updates.

Second, good old IDs. They identify the elements we are talking about.

Third, magic attributes. Their first character says what behaviour we want. Dot (.) textContent says: use the textContent property to update the element. At (@) click says: do something on click events. And so on.

Fourth, arbitrary JavaScript functions. They change signal values, they react to changes. There's built-ins like rerender, or you can define your own.

Is it fast? You bet! Incoming Bluesky messages are displayed in real-time, that's how fast.

In fact, it's very fast. Here's a wellknown benchmark, DBMonster, re-imagined sig-nal style. The repaint rate is crazy!

It's also tiny at 1.4 kB compressed. The hydration specs are rather concise, between 4 and 15 lines. And it's open-source, including commercial use.

And that's it, that's my talk about reactive HTML with sig-nal. Use it, it's good, really good!