HMML - HyperMedia Markup Language

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.

Composable, not flattened

A photo, an icon, a chart, a 3D scene - an image crushes them into one raster. HMML keeps each as itself: layered, addressable, recomposable.

Fine-grained primitives

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.

Editable, not frozen

Restyle, re-localize, animate after the fact. Generated output that stays source - not a screenshot you can only regenerate.

Native to models

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.

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

declare a space

Not just pages. Scenes.

A matrix3d universe of images and SVGs, parallaxing to your cursor - one .hmml, decoded live in your browser. Move your pointer over it.

one .hmml · … · matrix3d

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

MARK

the markup - HTML / CSS / SVG / JS, gzip-able text

RSRC

a resource - id + mime + raw bytes (no base64)

Two calls.

// 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()

defined

image, /ˈɪm.ɪdʒ/ noun

Even the definition is one .hmml. A real Cambridge Dictionary entry for the word image - decoded right here, live.

one .hmml · … · a dictionary entry