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)
Diffusion gives you pixels you can’t change. LLMs already write HTML, CSS and SVG fluently - HMML just packages that output, with raw media, into one deterministic, editable file.
HTML / CSS / SVG / JS is in every model’s training. Generating HMML is generating what they already produce - then sealed in a contract.
Restyle, re-localize, animate, diff, remix. Generated output that stays source - not a screenshot you can only regenerate.
Bytes, not megapixels. Raw media + gzipped markup - smaller than base64, and a ~2 KB reader to open it anywhere.
Text, vector, raster, 3D and motion composed together - a single generative artifact instead of a folder of assets.
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
A matrix3d universe of images and SVGs, parallaxing to your cursor - one .hmml, decoded live in your browser. 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 →
// a model emits HTML; data: images become raw bytes, gzip by default const bytes = await pack(modelOutputHtml) // …store / send the .hmml … then, anywhere a browser runs: const doc = await unpack(bytes) el.innerHTML = doc.toHTML()
Even the definition is one .hmml. A real Cambridge Dictionary entry for the word image - decoded right here, live.