snapDOM; Mavo; TARD3IS

Three DOMinating topics today, all to help folks improve web-based coding workflows.

---

TL;DR

(This is an LLM/GPT-generated summary of today’s Drop using Ollama + Qwen 3 and a custom prompt.)

• SnapDOM captures HTML elements as images with remarkable speed and accuracy, focusing on performance and handling complex DOM elements efficiently (https://github.com/zumerlab/snapdom)
• Mavo transforms HTML into reactive, data-driven web applications using HTML attributes, enabling non-programmers to build functional apps without JavaScript or backend servers (https://mavo.io/)
• Nicola Rennie’s TARD3IS tutorial demonstrates how to build a TARDIS using D3.js, combining educational value with interactive design and SVG manipulation (https://nrennie.rbind.io/blog/build-your-own-tardis-d3/)

---

snapDOM: When DOM-to-Image Capture Actually Gets It Right

SnapDOM captures HTML elements as images with remarkable speed and accuracy. But that simple description undersells what’s actually pretty spiffy here. This isn’t just another DOM-to-image library throwing pixels at a canvas and hoping for the best.

Built specifically for Zumly (a zoom-based view transition framework), it demonstrates exceptional focus on performance. When your primary use case involves smooth visual transitions, you can’t afford typical sluggish capture libraries.

SnapDOM handles the challenges that make other libraries stumble:

• Complete DOM fidelity styles, fonts, background images, pseudo-elements, shadow DOM
• Multiple export formats: SVG, PNG, JPG, WebP, canvas
• Zero dependencies: built entirely on standard Web APIs
• Intelligent caching: preCache() prevents performance hiccups with complex elements

The benchmarks are genuinely impressive: 6-93× faster than modern-screenshot, 32-133× faster than html2canvas. But raw numbers only tell part of the story. The performance gains become exponentially more significant with larger, complex elements—exactly where other libraries choke.

The library is well-designed, and you can inspect a small VanillaJS example page that showcased a decent chunk of the API (and how to use it with Observable Plot, which is a big reason I decided to poke at snapDOM to begin with).

Aside: both Plot and snapDOM are served from my domain. I used my esmdl utility to yank the core JS and all the dependencies (though really just needed curl for snapDOM).

---

Mavo: Building Web Apps with Just HTML — No [Extra] JavaScript Required

I’ll be dedicating the Weekend Bonus Drop to an example using this.

Mavo transforms ordinary HTML into reactive, data-driven web applications without requiring [extra] JavaScript or backend servers. Think of it as a declarative layer that sits atop your existing markup, turning static pages into fully functional apps through HTML attributes and simple expressions.

The core premise is elegantly straightforward: add a few mv-* attributes to your HTML, and suddenly, you have data persistence, user editing capabilities, and dynamic content updates. No build process, no complex frameworks, no server setup.

Mavo’s HTML-based syntax means non-programmers can build functional applications. This isn’t marketing hyperbole! It’s backed by peer-reviewed research from the team at MIT.

It supports storage modes, and has built-in ways to connect to GitHub, Google Drive, Dropbox, or just use local storage. Your data lives where you want it, with built-in version control when using Git-based backends.

For dynamic calculations, there are simple expressions such as [count(done)] that also support real-time updates without writing procedural code.

And, if that weren’t enough, the extensible design allows plugins to modify behavior and add functionality, demonstrated beautifully with integrations like TinyMCE for rich text editing.

The live examples on the Mavo site tell the story better than documentation: a personal portfolio that syncs with GitHub, a todo application with local persistence, and editable profiles. They’re all built with just declarative HTML markup.

This is a pretty refreshing return to HTML’s original promise of simplicity while embracing modern interactivity needs. It’s not trying to replace React or Vue for complex applications, but it’s carving out a compelling niche for content-driven sites that need just a touch of dynamism.

The project feels like a thoughtful response to web development’s increasing complexity.

---

TARD3IS

If you are not following the work of Nicola Rennie, you’re missing out on a ton of learning opportunities for data science, data visualization, and many other topics. A recent one was especially super cool. Let me just introduce it so you can head right on over there for a deep dive.

Sometimes the best way to understand a technology is through a project that’s equal parts educational and entertaining. Nicola Rennie’s step-by-step guide to constructing a TARDIS with D3.js hits that sweet spot perfectly. This isn’t just another “hello world” tutorial. Nicola takes us on a thoughtful exploration of SVG manipulation, coordinate systems, and interactive design principles wrapped in a distinctly British sci-fi package. Whether you’re looking to level up your D3.js skills or simply appreciate well-crafted code that brings fictional police boxes to life, this tutorial demonstrates how technical learning can be both rigorous and genuinely fun. The approach here showcases D3’s strengths while building something you’ll actually want to show off.

---

FIN

Remember, you can follow and interact with the full text of The Daily Drop’s free posts on:

• 🐘 Mastodon via @dailydrop.hrbrmstr.dev@dailydrop.hrbrmstr.dev
• 🦋 Bluesky via https://bsky.app/profile/dailydrop.hrbrmstr.dev.web.brid.gy

☮️