Stop generating pixels.
Generate

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.

<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

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.

Each one is a single .hmml.

Vector, raster, 3D and text that rewrites itself - decoded right now, no network, no dependency.

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)

Even the JS is safe — because it’s jailed, not inspected.

A .hmml can carry HTML, CSS and JS. You can’t sanitise arbitrary JS into safety — you confine it. mount() picks the isolation per trust tier and defaults to no-JS. The renderer is a separate ~1.7 KB import; the core reader carries none of it.

Shadow DOM fixes class-name clashes but is not a security boundary — a <script> in a shadow root runs in your page. Only the sandboxed iframe jails JS. Security model & caveats →