--- title: worthy of study | daily.dev description: A developer shares a discovery made while using an AI coding agent to build an interactive widget. The agent produced code that used a little-known KaTeX... canonical: https://daily.dev/posts/worthy-of-study-dhxthpiwd twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: worthy of study | daily.dev og:description: A developer shares a discovery made while using an AI coding agent to build an interactive widget. The agent produced code that used a little-known KaTeX... og:url: https://daily.dev/posts/worthy-of-study-dhxthpiwd og:image: https://api.daily.dev/og/posts/dHxthpiwD.png og:image:alt: worthy of study og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # worthy of study **[Vincent D. Warmerdam](https://daily.dev/sources/koaning)** · 3 min read · 39 upvotes · 1 comments ## Summary A developer shares a discovery made while using an AI coding agent to build an interactive widget. The agent produced code that used a little-known KaTeX feature — the `\htmlData` command — which attaches data attributes to individual `` elements in rendered math. Unlike MathJax, which outputs a single ``, KaTeX renders each element in its own ``, making it possible to bind DOM events to specific parts of a math expression. The post reflects on the value of pausing to study AI-generated code you don't fully understand, as it can reveal patterns and techniques you'd otherwise miss. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How can I make parts of a rendered latex equation interactive, like draggable sliders? Render the equation with katex instead of mathjax, since katex outputs each math element as its own span rather than one single svg. Use katex's htmlData extension, for example \htmlData{param=mu}{e}, which adds a data-param attribute to that span, letting you attach drag, touch, or mouse event listeners directly to individual parts of the equation. _daily.dev surfaces techniques like this for developers building interactive math or data visualizations on the web._ ### Why can't I bind click or drag events to parts of a MathJax-rendered equation? MathJax renders the entire equation as a single svg element, so there is no way to target or bind events to individual sub-parts of the formula, even after inspecting the output. Katex avoids this limitation by rendering each element as its own span, which can be individually targeted with event listeners. _developers weighing math-rendering libraries for interactive UI can find comparisons like this through daily.dev._ ### What katex render options are needed to use the htmlData extension safely? You need to set trust to a function allowing the \htmlData command, for example (ctx) => ctx.command === "\\htmlData", and set strict so the htmlExtension error is ignored, for example (err) => (err === "htmlExtension" ? "ignore" : "warn"), alongside displayMode and throwOnError options in katex.render(). _daily.dev helps developers track configuration details like this when integrating katex into custom tooling._ ## Community discussion Top comments from developers on daily.dev. **@nark3d** · 0 upvotes > I've had the same with a couple of CSS properties I'd never have gone looking for. It only works if you're reading the diff properly though, and it's easy to skim once the thing works. I've started asking the agent to explain anything I don't recognise before I approve it, partly to learn it and partly because that's where the invented ones turn up. > > > That last bit is a tenet of ours: https://prickles.org/tenet/verify-the-api/AI5 ## Similar posts on daily.dev - [Cloudflare’s new Markdown support shows how the web is evolving for AI agents](https://daily.dev/posts/cloudflare-s-new-markdown-support-shows-how-the-web-is-evolving-for-ai-agents-q2znpd5ib) · The New Stack · 2 upvotes · 0 comments - [Metadata for AI Generated Outputs](https://daily.dev/posts/metadata-for-ai-generated-outputs-jxsqay6nn) · Terence Eden · 2 upvotes · 0 comments --- Tags: [#javascript](https://daily.dev/tags/javascript), [#ai-agents](https://daily.dev/tags/ai-agents), [#web-components](https://daily.dev/tags/web-components) [View this post on daily.dev](https://daily.dev/posts/worthy-of-study-dhxthpiwd) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"worthy of study","url":"https://daily.dev/posts/worthy-of-study-dhxthpiwd","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/worthy-of-study-dhxthpiwd"},"datePublished":"2026-07-17T11:23:24.927Z","dateModified":"2026-09-14T08:45:10.537Z","description":"A developer shares a discovery made while using an AI coding agent to build an interactive widget. The agent produced code that used a little-known KaTeX...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/47c7a5c8d9b6a8115673a216b5a409a8?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/47c7a5c8d9b6a8115673a216b5a409a8?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Vincent D. Warmerdam","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Vincent D. Warmerdam","logo":"https://media.daily.dev/image/upload/s--r1vuGNlQ--/f_auto/v1752592623/logos/koaning","url":"https://daily.dev/sources/koaning"},"commentCount":1,"discussionUrl":"https://daily.dev/posts/worthy-of-study-dhxthpiwd","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":39},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":1}],"keywords":"javascript,ai-agents,web-components","timeRequired":"PT3M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Vincent D. Warmerdam","item":"https://daily.dev/sources/koaning"},{"@type":"ListItem","position":3,"name":"worthy of study"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/worthy-of-study-dhxthpiwd","comment":[{"@type":"Comment","text":"I’ve had the same with a couple of CSS properties I’d never have gone looking for. It only works if you’re reading the diff properly though, and it’s easy to skim once the thing works. I’ve started asking the agent to explain anything I don’t recognise before I approve it, partly to learn it and partly because that’s where the invented ones turn up.\nThat last bit is a tenet of ours: https://prickles.org/tenet/verify-the-api/AI5","datePublished":"2026-08-01T11:26:51.195Z","url":"https://daily.dev/posts/dHxthpiwD#c-EC5fs5wQd","author":{"@type":"Person","name":"Adam","url":"https://daily.dev/nark3d","image":"https://avatars.githubusercontent.com/u/2162621?v=4"}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/worthy-of-study-dhxthpiwd#faq","mainEntity":[{"@type":"Question","name":"How can I make parts of a rendered latex equation interactive, like draggable sliders?","acceptedAnswer":{"@type":"Answer","text":"Render the equation with katex instead of mathjax, since katex outputs each math element as its own span rather than one single svg. Use katex's htmlData extension, for example \\htmlData{param=mu}{e}, which adds a data-param attribute to that span, letting you attach drag, touch, or mouse event listeners directly to individual parts of the equation. daily.dev surfaces techniques like this for developers building interactive math or data visualizations on the web."}},{"@type":"Question","name":"Why can't I bind click or drag events to parts of a MathJax-rendered equation?","acceptedAnswer":{"@type":"Answer","text":"MathJax renders the entire equation as a single svg element, so there is no way to target or bind events to individual sub-parts of the formula, even after inspecting the output. Katex avoids this limitation by rendering each element as its own span, which can be individually targeted with event listeners. developers weighing math-rendering libraries for interactive UI can find comparisons like this through daily.dev."}},{"@type":"Question","name":"What katex render options are needed to use the htmlData extension safely?","acceptedAnswer":{"@type":"Answer","text":"You need to set trust to a function allowing the \\htmlData command, for example (ctx) => ctx.command === \"\\\\htmlData\", and set strict so the htmlExtension error is ignored, for example (err) => (err === \"htmlExtension\" ? \"ignore\" : \"warn\"), alongside displayMode and throwOnError options in katex.render(). daily.dev helps developers track configuration details like this when integrating katex into custom tooling."}}]} ```