SVG artifact layer for agent-made diagrams

The artifact layer for agent-human representations.
One API call, one SVG. No JavaScript. Works everywhere.

The Problem

Agents need to show their work through plans, diagrams, tables, receipts, and more. Markdown is portable but visually limited. HTML is expressive but not always durable across surfaces. Images are easy to share but lose their structure. Raw model output is flexible but inconsistent.

HyperWeave turns structured specs into deterministic visual artifacts. Each artifact is a self-contained SVG with layout, branding, data binding, and machine-readable metadata baked in. No JavaScript, no runtime, no dependencies. Readable by humans, recoverable by agents, and portable anywhere an <img> tag renders.

Diagrams

Diagrams encode topology, not pixels. HyperWeave supports the following diagram types: pipeline, fanout, fanin, hub, cycle, loop, dag, lanes, state-machine, sequence, tree, and comparison. Nodes carry brand logo glyphs, labels, and tags. Edges carry labels and motion to help process information better. Every diagram renders as a self-contained SVG with its full spec and hash-verified digest embedded for agents to read directly. Render them in a markdown file, send to Slack as an image, or render directly in your terminal.

hyperweave compose diagram --spec-file /dev/stdin -g primer --variant porcelain --surface inlay --face light -o provider-router-light.svg <<'JSON'
{
  "topology": "fanout",
  "orientation": "horizontal",
  "title": "One call, best model",
  "subtitle": "Fanout · horizontal",
  "zones": ["router", "providers"],
  "node_style": "card+glyph",
  "glyph_tint": "full",
  "nodes": [
    { "id": "router", "label": "model router", "desc": "1 call, best model\ncapability-routed", "role": "hero", "kind": "router", "gather": true },
    { "id": "claude",   "label": "Claude",   "desc": "long-context", "glyph": "anthropic" },
    { "id": "gemini",   "label": "Gemini",   "desc": "multimodal",   "glyph": "gemini" },
    { "id": "openai",   "label": "OpenAI",   "desc": "tool-use",     "glyph": "openai" },
    { "id": "deepseek", "label": "DeepSeek", "desc": "reasoning",    "glyph": "deepseek" },
    { "id": "kimi",     "label": "Kimi",     "desc": "agentic",      "glyph": "kimi" },
    { "id": "qwen",     "label": "Qwen",     "desc": "multilingual", "glyph": "qwen" }
  ],
  "edges": [
    { "source": "router", "target": "claude",   "label": "route", "label_style": "chip", "relation": "drift", "marker": "arrow" },
    { "source": "router", "target": "gemini",   "relation": "drift", "marker": "arrow" },
    { "source": "router", "target": "openai",   "relation": "drift", "marker": "arrow" },
    { "source": "router", "target": "deepseek", "relation": "drift", "marker": "arrow" },
    { "source": "router", "target": "kimi",     "relation": "drift", "marker": "arrow" },
    { "source": "router", "target": "qwen",     "relation": "drift", "marker": "arrow" }
  ]
}
JSON

hyperweave extract broadcast-split-light.svg --respond payload > broadcast-split.json
hyperweave compose diagram --spec-file broadcast-split.json -g primer --variant porcelain --surface inlay --face light -o broadcast-split-light.svg

hyperweave extract compose-gate-light.svg --respond payload > compose-gate.json
hyperweave compose diagram --spec-file compose-gate.json -g primer --variant porcelain --surface inlay --face light -o compose-gate-light.svg

hyperweave extract verbs-mouth-light.svg --respond payload > verbs-mouth.json
hyperweave compose diagram --spec-file verbs-mouth.json -g primer --variant porcelain --surface inlay --face light -o verbs-mouth-light.svg

hyperweave compose diagram --spec-file dag-providers -g primer --variant noir --surface inlay --face light -o frontier-serving-light.svg

hyperweave compose diagram --spec-file cycle-flow -g primer --variant porcelain --surface inlay --face light -o cycle-flow-light.svg

hyperweave compose diagram --spec-file loop-hillclimb-turn -g primer --variant porcelain --surface inlay --face light -o loop-hillclimb-turn-light.svg

hyperweave compose diagram --spec-file tree-health -g primer --variant porcelain --surface inlay --face light -o tree-health-light.svg

Pick a layout

Twelve layouts, fifty-nine bundled presets, one spec vocabulary. Variations are values of orientation, not layouts of their own:

Render any preset by name at /v1/diagram/{preset}/primer.static, or run hyperweave discover diagram for every preset, orientation and field.

Matrices

HyperWeave matrices are structured tables rendered as portable SVGs. A single JSON description can produce comparison grids, registries, tiers, benchmark tables, heatmaps, chips, glyphs, bars, and status maps, while carrying a machine-readable payload for agents.

_{One frame, every table · generated, not drawn}

hyperweave compose matrix --spec-file /dev/stdin -g primer --variant porcelain -o one-artifact.svg <<'JSON'
{
  "title": "One artifact. Many readers.",
  "subtitle": "how each consumer ingests the same SVG",
  "columns": [
    {
      "id": "reader",
      "label": "READER",
      "role": "label"
    },
    {
      "id": "mark",
      "label": "",
      "kind": "glyph",
      "glyph_tint": "full"
    },
    {
      "id": "pixels",
      "label": "PIXELS",
      "kind": "check"
    },
    {
      "id": "motion",
      "label": "MOTION",
      "kind": "pill"
    },
    {
      "id": "via",
      "label": "READS VIA",
      "kind": "chip"
    }
  ],
  "rows": [
    {
      "label": "GitHub README",
      "cells": [
        {
          "glyph": "github"
        },
        {
          "state": "full"
        },
        {
          "state": "on"
        },
        {
          "chips": [
            "camo",
            "css animation"
          ]
        }
      ]
    },
    {
      "label": "VS Code preview",
      "cells": [
        {
          "glyph": "vscode"
        },
        {
          "state": "full"
        },
        {
          "state": "on"
        },
        {
          "chips": [
            "markdown preview"
          ]
        }
      ]
    },
    {
      "label": "Slack unfurl",
      "cells": [
        {
          "glyph": "slack"
        },
        {
          "state": "partial"
        },
        {
          "state": "off"
        },
        {
          "chips": [
            "image proxy"
          ]
        }
      ]
    },
    {
      "label": "Gmail body",
      "cells": [
        {
          "glyph": "gmail"
        },
        {
          "state": "partial"
        },
        {
          "state": "off"
        },
        {
          "chips": [
            "img tag"
          ]
        }
      ]
    },
    {
      "label": "Agent",
      "cells": [
        {
          "glyph": "mcp"
        },
        {
          "state": "none"
        },
        {
          "state": "off"
        },
        {
          "chips": [
            "hw:payload",
            "hwz/1",
            "markdown twin"
          ]
        }
      ]
    }
  ],
  "notes": "pixels for humans · hw:payload for agents"
}
JSON

# Connectors preset
https://hyperweave.app/v1/matrix/connectors/primer.static?variant=porcelain

# Any table, one URL: base64url MatrixSpec JSON (8 KB cap)
https://hyperweave.app/v1/matrix/custom/primer.static?spec=<base64url>

# CLI, with the markdown twin alongside
hyperweave compose matrix --spec-file table.json -g primer --variant porcelain --markdown-out table.md

Another matrix configuration for visualizing benchmarks:

hyperweave compose matrix --spec-file /dev/stdin -g primer --variant cream --surface twin --faces -o frontier-benchmarks.svg <<'JSON'
{
  "title": "Frontier vs Open",
  "subtitle": "coding & price · SWE-bench Verified against price per million tokens · current flagships, jun 2026",
  "columns": [
    {
      "id": "model",
      "label": "MODEL",
      "kind": "text",
      "align": "left",
      "role": "label"
    },
    {
      "id": "mark",
      "label": "",
      "kind": "glyph",
      "align": "center",
      "glyph_tint": "full"
    },
    {
      "id": "swe",
      "label": "SWE-bench Verified",
      "kind": "numeric",
      "align": "center",
      "polarity": "higher",
      "unit": "%"
    },
    {
      "id": "pin",
      "label": "INPUT",
      "sublabel": "per Mtok",
      "kind": "numeric",
      "align": "center",
      "polarity": "lower",
      "unit": "$"
    },
    {
      "id": "pout",
      "label": "OUTPUT",
      "sublabel": "per Mtok",
      "kind": "numeric",
      "align": "center",
      "polarity": "lower",
      "unit": "$"
    }
  ],
  "rows": [
    {
      "label": "Claude Fable 5",
      "cells": [
        {
          "glyph": "anthropic"
        },
        {
          "value": 95.0
        },
        {
          "value": 10
        },
        {
          "value": 50
        }
      ],
      "section": "FRONTIER · CLOSED WEIGHTS"
    },
    {
      "label": "Claude Opus 4.8",
      "cells": [
        {
          "glyph": "anthropic"
        },
        {
          "value": 88.6
        },
        {
          "value": 5
        },
        {
          "value": 25
        }
      ],
      "section": "FRONTIER · CLOSED WEIGHTS"
    },
    {
      "label": "GPT-5.5",
      "cells": [
        {
          "glyph": "openai"
        },
        {
          "value": 82.6
        },
        {
          "value": 5
        },
        {
          "value": 30
        }
      ],
      "section": "FRONTIER · CLOSED WEIGHTS"
    },
    {
      "label": "Gemini 3.1 Pro",
      "cells": [
        {
          "glyph": "gemini"
        },
        {
          "value": 80.6
        },
        {
          "value": 2
        },
        {
          "value": 12
        }
      ],
      "section": "FRONTIER · CLOSED WEIGHTS"
    },
    {
      "label": "DeepSeek V4-Pro",
      "cells": [
        {
          "glyph": "deepseek"
        },
        {
          "value": 80.6
        },
        {
          "value": 0.44
        },
        {
          "value": 0.87
        }
      ],
      "section": "OPEN WEIGHTS"
    },
    {
      "label": "Kimi K2.6",
      "cells": [
        {
          "glyph": "kimi"
        },
        {
          "value": 80.2
        },
        {
          "value": 0.95
        },
        {
          "value": 4.0
        }
      ],
      "section": "OPEN WEIGHTS"
    },
    {
      "label": "GLM-5",
      "cells": [
        {
          "glyph": "zai"
        },
        {
          "value": 77.8
        },
        {
          "value": 1.0
        },
        {
          "value": 3.2
        }
      ],
      "section": "OPEN WEIGHTS"
    },
    {
      "label": "Mistral Medium 3.5",
      "cells": [
        {
          "glyph": "mistral"
        },
        {
          "value": 77.6
        },
        {
          "value": 1.5
        },
        {
          "value": 7.5
        }
      ],
      "section": "OPEN WEIGHTS"
    }
  ],
  "sections": [
    "FRONTIER · CLOSED WEIGHTS",
    "OPEN WEIGHTS"
  ],
  "notes": "SWE-bench Verified % · USD per Mtok · current flagships, jun 2026 · sources: vals.ai · artificialanalysis.ai · model cards"
}
JSON

• Inside the file: the payload holds the rows, sections and axis units as data, so an agent reads the table back and re-renders it instead of OCR'ing a picture of one. Inside every artifact has the mechanics.
• Markdown twin: every matrix has a GFM projection of the same table. --markdown-out on the CLI, respond:"json" over HTTP, render_target="markdown" over MCP.

Agentic Artifacts

Hyperweave parses agent coding sessions into a portable SVG artifact, including the model and tool usage, token spend, and context load. Install the hook once and every session emits one:

uv tool install hyperweave   # or: pip install hyperweave
hyperweave install-hook

_{Claude Code · $1,787.28 · 1686.0M tokens · 3795 calls · opus-4.8}

The hook reads your session's JSONL transcript from disk and detects the harness automatically (Claude Code or Codex). Theme it with any of the 8 primer themes, or the paper receipt style above.

hyperweave install-hook --genome cream   # any primer theme
hyperweave install-hook --genome raw     # the paper receipt

→ Open an issue to request a missing agent harness.

Inside every artifact

Every HyperWeave artifact is a re-ingestible object, not just an image. It carries its full spec (hw:payload) and a hash-verified digest (hwz/1 envelope), so an agent can work with it directly, never parsing pixels. Two tiers, two jobs. Here they are inside a diagram artifact:

recreate & modify: the complete spec

<hw:payload schema="diagram/1" media-type="application/json">
{
  "spec": {
    "title": "Service dependencies",
    "subtitle": "Service dependencies · a gateway fans to domain services, each grounding on its store",
    "topology": "dag",
    "zones": ["subsystems"],
    "nodes": [
      { "id": "web",     "label": "web",         "desc": "React SPA", "glyph": "react" },
      { "id": "gateway", "label": "API gateway", "role": "hero",      "kind": "router" },
      { "id": "auth",    "label": "Auth",        "desc": "tokens",    "kind": "shield" }
      <!-- … 5 more nodes · lossless -->
    ],
    "edges": [
      { "source": "web",     "target": "gateway",  "relation": "assert" },
      { "source": "gateway", "target": "auth",     "relation": "assert" },
      { "source": "auth",    "target": "postgres", "label": "reads", "label_style": "chip", "relation": "assert" }
      <!-- … 6 more edges · lossless -->
    ]
  }
}
</hw:payload>

the ≈200-token digest: know what an artifact is without opening it

<hw:envelope format="hwz/1" media-type="application/json">
{
  "v": "hwz/1",
  "id": "sha256:48b3de6494886c678f4c8efab4f0aa105922e315f8f62145548e17935175fb11",
  "k": "diagram",
  "title": "Service dependencies",
  "intent": "topology diagram: Service dependencies",
  "state": "active",
  "data": {
    "pattern": "dag",
    "n": 8,
    "hero": "API gateway",
    "nodes": { "web": "React SPA", "API gateway": "", "Auth": "tokens", "Orders": "Python svc", "Search": "query svc", "Postgres": "primary", "Kafka": "events", "Redis": "cache" },
    "edges": ["web → API gateway", "API gateway → Auth", "API gateway → Orders", "API gateway → Search", "Auth → Postgres (reads)", "Orders → Postgres", "Orders → Kafka (emits)", "Search → Redis (cache)", "API gateway → Postgres (direct read)"]
  },
  "frames": [{ "t": "diagram", "l": "Service dependencies" }],
  "prov": { "by": "hyperweave", "ver": "0.4.6", "genome": "primer.porcelain", "ts": "2026-07-15T02:01:15.613547+00:00" }
}
</hw:envelope>

The envelope is the lossy digest; only the payload round-trips.

• The round-trip: extract hw:payload, edit the JSON, POST /v1/compose with it as diagram: byte-identical re-render. The envelope's id is the sha256 of the payload, so an agent verifies "this artifact really is this data" before trusting either.
• The look is a pointer, not a copy: prov.genome: "primer.porcelain" names the aesthetics; payload plus that one string is the entire recreation recipe.

Read at a budget: the verb algebra

Pixels for humans, compact JSON for agents. The verb algebra is the read/write grammar over the two tiers: every verb picks how much of the artifact to load, from the ≈200-token envelope to the full payload, and no verb ever parses pixels.

The verbs, split two ways.

Write · mints a new artifact, returns a content-addressed link (/v1/a/{id}), never inline SVG:

Read · never mutates the artifact:

Every verb runs the same over the CLI (hyperweave {verb}), HTTP (POST /v1/{verb}), and MCP (hw_{verb}):

# compose an artifact, then read its spec straight back, no rendering
hyperweave compose matrix --spec-file table.json -g primer -o table.svg
curl -X POST https://hyperweave.app/v1/extract \
  -H 'Content-Type: application/json' \
  -d '{"source": "<svg or /v1/a/{id} url>", "respond": "payload"}'

One transform, start to finish

Action 1

Compose a bundled preset (or your own spec). This is the diagram whose payload and envelope appear above:

hyperweave compose diagram --spec-file dag-mesh -g primer --variant porcelain --surface inlay --face light -o services.svg

Action 2

Transform it through the artifact itself. transform verifies the hash, applies the patch to the embedded spec, re-validates, and mints a new artifact with a lineage entry recording exactly what changed:

hyperweave transform services.svg -o services-billing.svg --patch-json '[
  {"op": "add", "path": "/nodes/-", "value": {"id": "billing", "label": "Billing", "desc": "invoices", "glyph": "stripe"}},
  {"op": "add", "path": "/edges/-", "value": {"source": "gateway", "target": "billing", "relation": "assert"}},
  {"op": "add", "path": "/edges/-", "value": {"source": "billing", "target": "postgres", "label": "writes", "label_style": "chip", "relation": "assert", "exit": "bottom", "entry": "right"}}
]'

The result is a new artifact: new id, one more service in the fan, the envelope and lineage on stdout. -o writes the new pixels to services-billing.svg:

Action 3

Flip it, and redress it. Layout is a field, so one op turns the whole graph. The look is a separate pointer, so the same graph re-renders in any variant:

hyperweave transform services-billing.svg -o services-vertical.svg \
  --patch-json '[{"op": "add", "path": "/orientation", "value": "vertical"}]'

hyperweave extract services-vertical.svg --respond payload \
  | hyperweave compose diagram --spec-file - --variant noir -o services-noir.svg

• A new artifact, not a redraw: one field changed, and the result carries a new id plus a lineage entry naming its parent. Point -o at the same path to overwrite in place; you keep the record of where it came from, not the old render.
• Orientation keeps structure: boxes hold their order and authored sides follow the flow, so setting it back to horizontal returns the landscape diagram to the pixel.
• Theme is a pointer: porcelain to noir re-renders the same spec in a different look, structure untouched.

Genomes - Aesthetic DNA

A genome is a portable, machine-readable aesthetic specification. It encodes the complete visual identity (chromatic system, surface material, motion vocabulary, geometric form language) as a set of CSS custom properties that any agent can consume and apply consistently across every artifact type.

Four built-in genomes ship today. Custom genome generation via AI skill files coming soon.

primer · brutalist · automata · chrome

primer

_{8 variants · 4 light: porcelain · cream · dusk · petrol
4 dark: noir · carbon · space · anvil}

Signals animated state marks	ping (passing) · spinner (building) · throb (warning) · shake (critical). One mark system, shared with the strip. /v1/badge/{title}/{value}/primer.static?state={state}&variant={porcelain|cream|dusk|petrol|noir|carbon|space|anvil} hyperweave.app/v1/badge/BUILD/passing/primer.static?state=passing&variant=porcelain
Dashboard strip	/v1/strip/{title}/primer.static?data={tokens}&subtitle={text}&glyph={glyph}&variant={variant} hyperweave.app/v1/strip/readme-ai/primer.static?data=gh:eli64s/readme-ai.stars,gh:eli64s/readme-ai.forks,pypi:readmeai.version&subtitle=eli64s/readme-ai&glyph=github&variant=porcelain
Profile card	/v1/card/{username}/primer.static?variant={variant} (/v1/stats/… alias) hyperweave.app/v1/card/eli64s/primer.static?variant=porcelain
Star Chart star history	/v1/chart/stars/{owner}/{repo}/primer.static?variant={variant} hyperweave.app/v1/chart/stars/eli64s/readme-ai/primer.static?variant=porcelain
Marquee horizontal ticker	/v1/marquee/{title}/primer.static?data={tokens}&variant={variant} hyperweave.app/v1/marquee/readme-ai/primer.static?data=gh:eli64s/readme-ai.stars,gh:eli64s/readme-ai.forks,gh:eli64s/readme-ai.contributors,pypi:readmeai.downloads,gh:eli64s/readme-ai.last_push,pypi:readmeai.version,gh:eli64s/readme-ai.language&variant=porcelain
Icons circle + square	/v1/icon/{glyph}/primer.static?shape={circle|square}&variant={variant} hyperweave.app/v1/icon/github/primer.static?shape=circle&variant=noir
Divider aura	/v1/divider/aura/primer.static?variant={variant} hyperweave.app/v1/divider/aura/primer.static?variant=porcelain

brutalist

View the brutalist catalog

_{22 variants · 8 dark: celadon · alloy · carbon · pigment · umber · ember · temper · onyx
14 light (6 shown): primer · depth · pulse · archive · signal · afterimage}

Signals state machine	/v1/badge/{title}/{value}/{genome}.static?state={state}&variant={celadon|carbon|alloy|temper|pigment|ember|umber|onyx|archive|signal|pulse|depth|afterimage|primer} hyperweave.app/v1/badge/BUILD/passing/brutalist.static?state=passing&variant=celadon
Dashboard strip	/v1/strip/{title}/{genome}.static?data={tokens}&subtitle={text}&glyph={glyph}&variant={variant} hyperweave.app/v1/strip/hyperweave/brutalist.static?data=gh:InnerAura/hyperweave.stars,pypi:hyperweave.version,gh:InnerAura/hyperweave.build&subtitle=InnerAura/hyperweave&glyph=github&variant=celadon
Profile card	/v1/card/{username}/{genome}.static?variant={variant} (/v1/stats/… alias) hyperweave.app/v1/card/eli64s/brutalist.static?variant=pulse
Star Chart star history	/v1/chart/stars/{owner}/{repo}/{genome}.static?variant={variant} hyperweave.app/v1/chart/stars/eli64s/readme-ai/brutalist.static?variant=celadon
Marquee horizontal ticker	/v1/marquee/{title}/{genome}.static?data={tokens}&variant={variant} hyperweave.app/v1/marquee/readme-ai/brutalist.static?data=gh:eli64s/readme-ai.stars,gh:eli64s/readme-ai.forks,gh:eli64s/readme-ai.contributors,gh:eli64s/readme-ai.watchers,pypi:readmeai.downloads,gh:eli64s/readme-ai.last_push,gh:eli64s/readme-ai.pull_requests,gh:eli64s/readme-ai.issues,gh:eli64s/readme-ai.build,pypi:readmeai.version,gh:eli64s/readme-ai.language&variant=celadon
Icons circle + square	/v1/icon/{glyph}/{genome}.static?shape={circle|square}&variant={variant} hyperweave.app/v1/icon/github/brutalist.static?shape=circle&variant=celadon
Divider seam · sigil	/v1/divider/{seam|sigil}/{genome}.static?variant={variant} hyperweave.app/v1/divider/sigil/brutalist.static?variant=pulse

automata

View the automata catalog

_{16 tones · crimson · copper · bone · solar · amber · sulfur · toxic · jade
abyssal · teal · steel · cobalt · indigo · violet · magenta · burgundy
pair any two via ?variant=primary&pair=secondary}

Signals state machine	/v1/badge/{title}/{value}/{genome}.static?state={state} hyperweave.app/v1/badge/BUILD/passing/automata.static?state=passing&variant=bone
Dashboard strip	/v1/strip/{title}/automata.static?data={tokens}&variant={tone}&pair={tone}&subtitle={text}&glyph={glyph} hyperweave.app/v1/strip/readme-ai/automata.static?data=gh:eli64s/readme-ai.stars,gh:eli64s/readme-ai.forks,pypi:readmeai.version&subtitle=eli64s/readme-ai&variant=bone&pair=steel&glyph=github
Profile card	/v1/card/{username}/{genome}.static?variant={tone} (/v1/stats/… alias) hyperweave.app/v1/card/eli64s/automata.static?variant=bone
Star Chart star history	/v1/chart/stars/{owner}/{repo}/{genome}.static?variant={tone} hyperweave.app/v1/chart/stars/eli64s/readme-ai/automata.static?variant=bone
Marquee horizontal ticker	/v1/marquee/{title}/automata.static?data={tokens}&variant={tone} hyperweave.app/v1/marquee/readme-ai/automata.static?data=gh:eli64s/readme-ai.stars,gh:eli64s/readme-ai.forks,gh:eli64s/readme-ai.contributors,gh:eli64s/readme-ai.watchers,pypi:readmeai.downloads,gh:eli64s/readme-ai.last_push,gh:eli64s/readme-ai.pull_requests,gh:eli64s/readme-ai.issues,gh:eli64s/readme-ai.build,pypi:readmeai.version,gh:eli64s/readme-ai.language&variant=bone
Icons square	/v1/icon/{glyph}/automata.static?shape=square&variant={tone} hyperweave.app/v1/icon/docker/automata.static?shape=square&variant=cobalt
Divider dissolve	/v1/divider/dissolve/{genome}.static?variant={tone}&pair={tone} hyperweave.app/v1/divider/dissolve/automata.static?variant=bone&pair=steel

chrome

View the chrome catalog

_{5 variants: horizon · lightning · abyssal · moth · graphite}

Signals state machine	/v1/badge/{title}/{value}/{genome}.static?state={state}&variant={horizon|lightning|abyssal|moth|graphite} hyperweave.app/v1/badge/BUILD/passing/chrome.static?state=passing&variant=horizon
Dashboard strip	/v1/strip/{title}/{genome}.static?data={tokens}&subtitle={text}&glyph={glyph}&variant={variant} hyperweave.app/v1/strip/readme-ai/chrome.static?data=gh:eli64s/readme-ai.stars,gh:eli64s/readme-ai.forks,pypi:readmeai.version&subtitle=eli64s/readme-ai&glyph=github&variant=horizon
Profile card	/v1/card/{username}/{genome}.static?variant={variant} (/v1/stats/… alias) hyperweave.app/v1/card/eli64s/chrome.static?variant=horizon
Star Chart star history	/v1/chart/stars/{owner}/{repo}/{genome}.static?variant={variant} hyperweave.app/v1/chart/stars/eli64s/readme-ai/chrome.static?variant=horizon
Marquee horizontal ticker	/v1/marquee/{title}/{genome}.static?data={tokens}&variant={variant} hyperweave.app/v1/marquee/readme-ai/chrome.static?data=gh:eli64s/readme-ai.stars,gh:eli64s/readme-ai.forks,gh:eli64s/readme-ai.contributors,gh:eli64s/readme-ai.watchers,pypi:readmeai.downloads,gh:eli64s/readme-ai.last_push,gh:eli64s/readme-ai.pull_requests,gh:eli64s/readme-ai.issues,gh:eli64s/readme-ai.build,pypi:readmeai.version,gh:eli64s/readme-ai.language&variant=horizon
Icons circle + square	/v1/icon/{glyph}/{genome}.static?shape={circle|square}&variant={variant} hyperweave.app/v1/icon/youtube/chrome.static?shape=circle&variant=horizon
Divider band	/v1/divider/band/{genome}.static?variant={variant} hyperweave.app/v1/divider/band/chrome.static?variant=horizon

/a/inneraura/dividers/

View the divider catalog

block De Stijl composition	/a/inneraura/dividers/{slug} hyperweave.app/a/inneraura/dividers/block
current animated rainbow bezier	/a/inneraura/dividers/{slug} hyperweave.app/a/inneraura/dividers/current
takeoff rocket trajectory + thrust	/a/inneraura/dividers/{slug} hyperweave.app/a/inneraura/dividers/takeoff
void spectral bloom + hover state	/a/inneraura/dividers/{slug} hyperweave.app/a/inneraura/dividers/void
zeropoint aurora rule + nexus beacon	/a/inneraura/dividers/{slug} hyperweave.app/a/inneraura/dividers/zeropoint

Error fallback: SMPTE NO SIGNAL

Every broken <img> URL renders the SMPTE RP 219 test pattern with ERR_NNN matching the HTTP status, instead of a browser broken-image icon.

• _{/v1/badge/{title}/{value}/{unknown-genome}.static}
• _{hyperweave.app/v1/badge/TEST/value/unknown-genome.static}

Surface modes. A genome renders onto one of three surfaces: plate (opaque, its own background), inlay (bare, borrows the host page's light/dark), or twin (opaque and scheme-aware). Standalone, slide, and raster destinations take plate. For a GitHub README, bake a pair instead of shipping one scheme-adaptive file: GitHub serves README images through Camo as a plain <img>, so a prefers-color-scheme rule inside the SVG answers to the reader's operating system, not the GitHub theme toggle. --face light|dark bakes one scheme per file and <picture> chooses between them. The CLI exposes --surface/--ground/--palette, and --faces writes both files in one call (<out>-light.svg / <out>-dark.svg).

Install

uv add hyperweave            # CLI + SVG rendering (the base)
uv add 'hyperweave[serve]'   # + HTTP server  (hyperweave serve)
uv add 'hyperweave[mcp]'     # + MCP server   (hyperweave mcp)
uv add 'hyperweave[all]'     # + both servers
# or swap `uv add` for `pip install`

uv tool install hyperweave   # standalone `hw` CLI: uv provisions Python itself

_{Requires Python 3.10+}

Entry Points

Four interfaces, one pipeline. Every path produces the same artifact through the same compositor.

MCP

{
  "mcpServers": {
    "hyperweave": {
      "command": "hyperweave",
      "args": ["mcp"]
    }
  }
}

# Static badge
hw_compose(type="badge", title="BUILD", value="passing", genome="brutalist")

# Data-driven badge - unified token grammar (gh:owner/repo.metric, pypi:pkg.metric, ...)
hw_compose(type="badge", title="STARS", data="gh:anthropics/claude-code.stars", genome="brutalist")

# Strip with multiple live metrics
hw_compose(type="strip", title="readme-ai",
           data="gh:eli64s/readme-ai.stars,gh:eli64s/readme-ai.forks,pypi:readmeai.version",
           genome="chrome")

# Marquee with mixed text + live tokens
hw_compose(type="marquee",
           data="text:NEW RELEASE,gh:anthropics/claude-code.stars,text:DOWNLOAD",
           genome="brutalist")

# Read or edit an existing artifact - the verb algebra
hw_extract(svg_or_url="<svg or /v1/a/{id} url>", respond="payload")
hw_transform(svg_or_id="<svg or /v1/a/{id} url>",
             mutations=[{"op": "replace", "path": "/title", "value": "SHIPPED"}])

# Return the SVG bytes inline instead of a hosted url (default respond="url")
hw_compose(type="badge", title="BUILD", value="passing", genome="brutalist", respond="svg")

hw_discover(what="all")   # the capability registry; full agent contract at /llms-full.txt

CLI

# Badge
hyperweave compose badge "build" "passing" --genome brutalist

# Strip with metrics
hyperweave compose strip "readme-ai" "STARS:2.9k,FORKS:278" -g brutalist

# Live data through the unified --data token grammar
hyperweave compose badge "STARS" --data 'gh:anthropics/claude-code.stars' -g brutalist

# Marquee with mixed text + live tokens
hyperweave compose marquee --data 'text:NEW RELEASE,gh:owner/repo.stars,text:DOWNLOAD' -g brutalist

# Session receipt from an agent transcript (Claude Code / Codex)
hyperweave compose receipt session.jsonl -o receipt.svg

# Validate a spec without rendering
hyperweave validate spec.json

# Profile card (live GitHub data, path-segment identity; 'stats' stays an alias)
hyperweave compose card eli64s -g chrome -o card.svg

# Star history chart
hyperweave compose chart stars eli64s/readme-ai -g brutalist -o chart.svg

# Custom genome from a local JSON file (validated against the profile contract)
hyperweave compose badge "DEPLOY" "live" --genome-file ./my-genome.json
hyperweave validate-genome ./my-genome.json

# The verbs: read or transform any artifact by handle, file, URL, or digest
hyperweave extract diagram.svg                      # the hw:payload seed as JSON
hyperweave diff v1.svg v2.svg --exit-code           # structural diff, git-style exit
hyperweave verify diagram.svg                       # payload ↔ envelope integrity
hyperweave query diagram.svg 'nodes[0].label'       # read one field
hyperweave transform diagram.svg --patch patch.json # mint a new artifact + lineage

Agent loop

The same CLI runs as a machine-readable loop: learn what the install can do, validate before composing, compose with an inspection record, and say why each edit happened.

# Capability capsule for an agent context: caps, legality, vocabulary, presets + a digest
hyperweave discover --agent
hyperweave discover --agent --topology hub          # scoped to one topology family

# Install readiness before composing: formats, fonts, genomes, telemetry wiring
hyperweave doctor

# Machine-readable validation report, the same report every surface returns
hyperweave validate spec.json --json

# Proof sidecars beside the SVG: measured geometry, diagnostics, verdicts,
# a motion-stripped resting frame, and a png when the raster extra is installed
hyperweave compose diagram --spec-file pipeline-head -o out.svg --proof

# One bounded JSON report on stdout instead of SVG bytes: ok, artifact, integrity, diagnostics, next
hyperweave compose badge build passing --respond report

# Say why a patch happened; the reason is recorded in the new artifact's lineage
hyperweave transform out.svg --patch patch.json --intent "rename entry node"

HTTP API

# URL grammar: /v1/{type}/{title}/{value}/{genome}.{motion}
curl 'https://hyperweave.app/v1/strip/readme-ai/brutalist.static?value=STARS:2.9k,FORKS:278'

# Live data via the unified ?data= grammar (works on badge / strip / marquee)
curl 'https://hyperweave.app/v1/badge/STARS/chrome.static?data=gh:anthropics/claude-code.stars'
curl 'https://hyperweave.app/v1/strip/readme-ai/brutalist.static?data=gh:eli64s/readme-ai.stars,gh:eli64s/readme-ai.forks'
curl 'https://hyperweave.app/v1/marquee/SCROLL/brutalist.static?data=text:NEW%20RELEASE,gh:anthropics/claude-code.stars'

# Chromatic variants (automata: 16 solo tones, pair any two via &pair=...; chrome: horizon/abyssal/lightning/graphite/moth)
curl 'https://hyperweave.app/v1/badge/PYPI/automata.static?variant=teal&pair=violet&data=pypi:hyperweave.version'
curl 'https://hyperweave.app/v1/badge/build/passing/automata.static?size=compact'

# Genome-themed dividers
curl 'https://hyperweave.app/v1/divider/band/chrome.static'
curl 'https://hyperweave.app/v1/divider/seam/brutalist.static'
curl 'https://hyperweave.app/v1/divider/dissolve/automata.static'

# Genome-agnostic dividers
curl 'https://hyperweave.app/a/inneraura/dividers/zeropoint'

# Structured frames: /v1/{matrix|diagram}/{preset}/{genome}.{motion}
# (preset 'custom' takes a base64url ?spec=)
curl 'https://hyperweave.app/v1/matrix/connectors/primer.static?variant=porcelain'
curl 'https://hyperweave.app/v1/diagram/pipeline-head/primer.static?variant=porcelain'

# POST compose
curl -X POST https://hyperweave.app/v1/compose \
  -H "Content-Type: application/json" \
  -d '{"type":"strip","title":"hyperweave","genome":"brutalist","value":"STARS:2.9k"}'

# Verb algebra over an existing artifact: extract · verify · transform · diff · query
curl -X POST https://hyperweave.app/v1/extract \
  -H "Content-Type: application/json" \
  -d '{"source":"<svg or /v1/a/{id} url>","respond":"payload"}'

# Local server
hyperweave serve --port 8000

Output formats

Compose once, export to any of these (same artifact, same metadata):

The HTTP API serves any of these by file suffix (GET /v1/a/{id}.png, width-bounded with ?w=), and a graphics-capable terminal (kitty, ghostty, wezterm) shows --format png inline.

Fonts embed in the SVG by default (--font-mode embed) so the file stands alone anywhere; cdn and system trade that portability for smaller bytes.

How It Works

Every artifact is the output of a single composition formula:

ARTIFACT = FRAME × PROFILE × GENOME × SLOTS × MOTION × ENVIRONMENT

Python builds context dicts. Jinja2 builds SVG. YAML defines config. Three layers, no mixing. Zero f-string SVG in Python.

ComposeSpec → engine.py → assembler.py (CSS) → lanes.py (validate) → templates.py (Jinja2) → SVG

Every artifact ships with:

• Re-ingestible payload: the full spec (hw:payload) plus a hash-verified hwz/1 envelope, so an agent can recover, verify, and edit it - the basis of the verb algebra.
• Semantic metadata: provenance, reasoning, spatial trace, aesthetic DNA. Machine-readable context so the next agent in the chain knows what it's looking at and why.
• CSS state machines: data-hw-status, data-hw-state, data-hw-regime drive visual transitions through the Custom Property Bridge. No JavaScript.
• Pure CSS/SMIL animation: no script tags, ever. Each artifact declares its measured tier — composite-only (transform/opacity) or paint-ok (the default dash march rides stroke-dashoffset). Works anywhere SVGs render: GitHub's Camo proxy, email clients, Notion embeds.
• Accessibility: WCAG AA, prefers-reduced-motion, prefers-color-scheme, forced-colors, ARIA markup. Structural, not decorative.

Stack: Pydantic, FastAPI, FastMCP v3, Jinja2, Typer.

Data Connectors

HyperWeave binds live data into any artifact through a unified token grammar (?data=...). Tokens are comma-separated; each token is either a literal (text:, kv:) or a live fetch (<provider>:<identifier>.<metric>).

• Caching: live values for 5–10 min; a failed fetch caches 60s and shows - rather than a fabricated zero.
• Isolation: each provider has its own circuit breaker, so one upstream outage can't trip the others.
• Escaping: commas inside text: / kv: values escape as \,.

→ Open an issue to request a connector.

Contributing

HyperWeave is early. If you're interested in contributing or learning more, join the Discord. Cheers!