I was working with an agent to produce a new widget. I gave it a research task, gave it a direction, and when it came back I immediately stopped prompting it further to investigate what it did. The artifact that was generated wasn't merely functional, it did something that I did not understand and was therefore worthy of study.

It's an important moment that people show not ignore. But to help explain the situation, try playing with the widget below:

Drag left/right to scrub a value. Works for touch, mouse, and pen.

f(0) = ?

That's interesting, right? It feels like you're able to interact with Latex on the web. But how does this work? Mathjax puts the entire rendered latex in a single <svg> element. So that's impossible to bind events on that, even in hindsight.

So how does the widget work?

Details of Katex

The trick is to use a small, nearly hidden, feature of katex instead.

$$ f(x) = \frac{1}{\sigma\sqrt{2\pi}} e^{\frac{(x - \mu)^2}{2\sigma}} $$

See that math, this is the latex that generated it.

$$ f(x) = \frac{1}{\sigma\sqrt{2\pi}} e^{\frac{(x - \mu)^2}{2\sigma}} $$

But in Katex you're able to add more information! You could do something like below around $e$.

\htmlData{param=mu}{e}

This isn't standard latex, and it requires adding some extra katex settings.

katex.render(expandTemplate(), host, {
  displayMode: true,
  throwOnError: true,
  trust: (ctx) => ctx.command === "\\htmlData",
  strict: (err) => (err === "htmlExtension" ? "ignore" : "warn"),
});

Now, if you look at how $e$ is actually rendered, you'll notice this:

<span class="enclosing mtight" data-param="mu">
    <span class="mord mtight">e</span>
</span>

See that? Two things:

1. Katex renders every element in it's own span instead of everything in a single svg
2. On top of that katex also provides a mechanism to add data params to the span object. And that let's you bind events!

Meta observation

To be clear, I used an agent to build this widget. But while it was clanking I took a moment to step back and to recognize that the generated code was worthy of study. It was a moment worthy of pause.

Not because the coding quality was amazing, but because it reveiled a pattern that I was completely unaware of. And understanding that pattern is going to help me longer term.

It's allmost like the coding agents makes you a wizard but you still need to understand what spells you're able to cast. And after doing a small deep dive, by recognizing that something was worthy of study, it feels like I gained a new spell that I can cast in the future. You can do a lot of cool things with maths/animations using this API!