HMML - HyperMedia Markup Language

why this is where AI media goes

The next thing a model generates isn’t an image.
It’s a document.

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.

Native to models

HTML / CSS / SVG / JS is in every model’s training. Generating HMML is generating what they already produce - then sealed in a contract.

Editable, not frozen

Restyle, re-localize, animate, diff, remix. Generated output that stays source - not a screenshot you can only regenerate.

Tiny & streamable

Bytes, not megapixels. Raw media + gzipped markup - smaller than base64, and a ~2 KB reader to open it anywhere.

One scene, every medium

Text, vector, raster, 3D and motion composed together - a single generative artifact instead of a folder of assets.

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