HMML (HyperMedia Markup Language) is a declarative markup language for images. Also JS. HMML is HTML, but not UTF-8. A sneak peek for future-gen media (#rezervation)
An image flattens everything into one frozen raster. HMML keeps the pieces - vector, text, raster, 3D, motion - composable and editable, created at the grain of a node, not a 1024-grid of guesses.
A photo, an icon, a chart, a 3D scene - an image crushes them into one raster. HMML keeps each as itself: layered, addressable, recomposable.
Create and edit at the grain of an element, a transform, a keyframe - change one node, not the whole render. Diff it, version it, remix it.
Restyle, re-localize, animate after the fact. Generated output that stays source - not a screenshot you can only regenerate.
Models already write HTML, CSS and SVG. HMML just seals that output, with raw media, into one portable contract - a ~2 KB reader opens it anywhere.
Will models evolve to emit this directly? Maybe. Maybe not. But “image” is already an overloaded word - photo, icon, chart, scene, animation, all crushed into one frozen raster. HMML un-conflates it, and earns its use cases either way. Or maybe pixels were fine all along. Let’s see.
Today you hand-wire layout, styles, state and a folder of assets around a couple of flat AI images. With HMML the model ships the whole scene as one file - your app just fetches it, decodes, and mounts it into a div. All the complexity downloads inside the .hmml.
<div class="product"> <img src="ai/hero-1.png"> <img src="ai/hero-2.png"> // AI's whole job <div class="copy"> <h2>you hand-write this</h2> <p>...and this. and the alt text.</p> <button onclick="addToCart()">Buy</button> </div> </div> <style> .product{ display:grid; gap:24px } /* +40 lines */ </style> <script src="layout.js"></script> <script> hydrate(); wireCarousel(); track() </script> <!-- + /assets: 14 files, + state, + a build step -->
<div id="scene"></div> // the mounting div <script type="module"> import { unpack } from "@eddocu/hmml" const bytes = await fetch("scene.hmml").then(r => r.arrayBuffer()) const doc = await unpack(new Uint8Array(bytes)) // decode scene.innerHTML = doc.toHTML() // mount </script> // one file = layout + media + motion + logic
Arrange images in 2D or 3D, layer them, animate them - every piece stays editable, iterable and recomposable into new visuals. The scene below is just one example: a drifting cloud of images and SVGs, decoded live from a single .hmml. Move your pointer over it.
.hmml.Vector, raster, 3D and text that rewrites itself - decoded right now, no network, no dependency.
A PNG-style signature, then self-describing chunks. Markup stays text; images stay raw. Unknown chunks are skipped - it grows without breaking. Full spec →
// ENCODE — pack(html) → one .hmml (a Uint8Array you store or send) // · lifts every data: image out of the HTML into raw bytes (no base64) // · gzips the HTML/CSS/JS and frames it all as one binary blob const bytes = await pack(html) // DECODE — unpack(bytes) → the document back, anywhere a browser runs // · reads the markup + the raw images out of the blob // · toHTML() re-stitches them into renderable HTML you can mount const doc = await unpack(bytes) el.innerHTML = doc.toHTML() // (or doc.createObjectUrls() for blob: URLs)