HMML - HyperMedia Markup Language

the future of generated media Stop generating pixels.Generate 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)

a real website · one .hmml · … decoding a whole website from one file… ↑ A real food-delivery page - markup, images & an SVG animation in one .hmml, … smaller than the same page as base64. Watch the stick-man between the rows.it says “I am image.” Look closely: that's dozens of images inside an HTML layout - what everyone calls “HTML with images.” HMML folds the markup, the images and all into a single binary file. At which point the whole thing simply becomes an image.

2.5 KB reader~830 MB/s decode25% smaller than base640 dependencies

composability, not pixels The next thing a model generates isn’t an image.It’s a document. 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. 01Composable, not flattenedA photo, an icon, a chart, a 3D scene - an image crushes them into one raster. HMML keeps each as itself: layered, addressable, recomposable. 02Fine-grained primitivesCreate 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. 03Editable, not frozenRestyle, re-localize, animate after the fact. Generated output that stays source - not a screenshot you can only regenerate. 04Native to modelsModels 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.

then / now You don't build the scene. You mount it. 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. today - you assemble every piece by hand <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 --> next - fetch · decode · mountscene = 100% AI <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

what you can make An image you can compose. 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. one .hmml · … · a live scene Each one is a single .hmml. Vector, raster, 3D and text that rewrites itself - decoded right now, no network, no dependency.

the contract bits & bytes & a contract. A PNG-style signature, then self-describing chunks. Markup stays text; images stay raw. Unknown chunks are skipped - it grows without breaking. Full spec → 89 'H' 'M' 'M' 'L' 0D 0A 1A 0A  ·  major · minor · codec MARKthe markup - HTML / CSS / SVG / JS, gzip-able text RSRCa resource - id + mime + raw bytes (no base64) METAJSON metadata ENDFend marker · markup points at resources with hmml:<id>

use it Two calls. // 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)

defined image, /ˈɪm.ɪdʒ/ noun one .hmml · … · a dictionary entry