Portable visual output layer for agents.
One API call, one SVG. No JavaScript. Works everywhere.
When an agent needs to produce something visual, it generates React, HTML, or pixels: a status card, a dashboard, a receipt of its work, locked in the environment that made it. Embed it in markdown or pass it to another agent and it breaks or loses context. There's no portable visual primitive for agents.
HyperWeave is that primitive. One API call returns a self-contained SVG with data binding, branding, and machine-readable metadata baked in. No JavaScript, no dependencies, no runtime. It renders in GitHub READMEs, Slack, Notion, docs, your site, email, VS Code, or terminal. Every surface that renders an <img> tag is a HyperWeave surface.
View as table
| FORMAT | Portability | Agent-Readable Metadata | Visual Fidelity | Token Efficiency | Zero Dependencies | SCORE |
|---|---|---|---|---|---|---|
| SVG | ✓ | ✓ | ✓ | ~ | ✓ | 4.5 |
| MARKDOWN | ~ | ~ | ✗ | ✓ | ✓ | 3 |
| HTML | ✗ | ✓ | ✓ | ✗ | ~ | 2.5 |
Every AI coding session produces a receipt: cost, tokens, tool distribution, session rhythm. One install, fully automatic.
hyperweave install-hook262M tokens · 562 calls · 52 stages · $175 · voltage
Rhythm strip · the same session data at 92px tall
Same data, different livery · claude-code
Codex transcripts auto-detect from the JSONL shape
The livery matches the agent that produced the session:
| Agent | Livery |
|---|---|
| Claude Code | claude-code |
| Codex | codex |
| — | voltage |
| — | cream |
Auto-detected from the session transcript. Pin a different default with hyperweave install-hook --genome voltage.
HyperWeave matrices are structured tables rendered as portable SVGs. A single JSON description can produce comparison grids, registries, tiers, benchmark tables, numeric heatmaps, chips, glyphs, bars, and status maps, while carrying a machine-readable payload for agents.
One frame, every table · generated, not drawn
View as table
| READER | PIXELS | MOTION | READS VIA | |
|---|---|---|---|---|
| GitHub README | github | ✓ | Yes | camo, css animation |
| VS Code preview | vscode | ✓ | Yes | markdown preview |
| Slack unfurl | slack | ~ | — | image proxy |
| Gmail body | gmail | ~ | — | img tag |
| Agent | mcp | ✗ | — | hw:payload, hwz/1, markdown twin |
Inside that SVG, alongside the pixels — two tiers, two jobs:
recreate & modify — the complete table IR
<hw:payload schema="matrix/1" media-type="application/json">
{
"title": "One artifact. Many readers.",
"subtitle": "how each consumer ingests the same SVG",
"columns": [
{ "id": "reader", "label": "READER", "kind": "text", "align": "left", "role": "label" },
{ "id": "mark", "label": "", "kind": "glyph", "align": "center", "glyph_tint": "full" },
{ "id": "pixels", "label": "PIXELS", "kind": "check", "align": "center" },
{ "id": "motion", "label": "MOTION", "kind": "pill", "align": "center" },
{ "id": "via", "label": "READS VIA", "kind": "chip", "align": "left" }
],
"rows": [
{ "label": "GitHub README", "cells": [{ "glyph": "github" }, { "state": "full" }, { "state": "on" }, { "chips": ["camo", "css animation"] }] }
<!-- … 4 more rows · lossless -->
]
}
</hw:payload>read at a budget — ≈200 tokens to know what an artifact is
<hw:envelope format="hwz/1" media-type="application/json">
{
"v": "hwz/1",
"id": "sha256:0077750046fc2780fa4ba19fcd884fcf39f54632306d8c3d2d97f0b7cbf2df47",
"k": "matrix",
"title": "One artifact. Many readers.",
"intent": "structured comparison: One artifact. Many readers.",
"state": "active",
"data": {
"subvariant": "registry",
"cols": ["mark", "pixels", "motion", "via"],
"rows": {
"GitHub README": "github",
"VS Code preview": "vscode",
"Slack unfurl": "slack",
"Gmail body": "gmail",
"Agent": "mcp"
},
"rows_total": 5
},
"frames": [{ "t": "matrix", "l": "One artifact. Many readers." }],
"prov": { "by": "hyperweave", "ver": "0.4.0a2", "genome": "primer.porcelain", "ts": "2026-06-11T15:51:03.185542+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/composewith it asmatrix: byte-identical re-render. The envelope'sidis 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 + that one string is the entire recreation recipe. - Markdown twin: every matrix has a GFM projection.
--markdown-outon the CLI,respond:"json"over HTTP,render_target="markdown"over MCP.
# 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.mdAnother matrice configuration for visualizing benchmarks:
View as table
| MODEL | SWE-bench Verified | INPUT (per Mtok) | OUTPUT (per Mtok) | |
|---|---|---|---|---|
| FRONTIER · CLOSED WEIGHTS | ||||
| Claude Fable 5 | anthropic | 95 % | $10 | $50 |
| Claude Opus 4.8 | anthropic | 88.6 % | $5 | $25 |
| GPT-5.5 | openai | 82.6 % | $5 | $30 |
| Gemini 3.1 Pro | gemini | 80.6 % | $2 | $12 |
| OPEN WEIGHTS | ||||
| DeepSeek V4-Pro | deepseek | 80.6 % | $0.44 | $0.87 |
| Kimi K2.6 | kimi | 80.2 % | $0.95 | $4 |
| GLM-5 | zai | 77.8 % | $1 | $3.2 |
| Mistral Medium 3.5 | mistral | 77.6 % | $1.5 | $7.5 |
SWE-bench Verified % · USD per Mtok · current flagships, jun 2026 · sources: vals.ai · artificialanalysis.ai · model cards
HyperWeave diagrams are topology graphs (pipelines, fan-outs, hub-and-spoke, DAGs, sequences, state machines) rendered as portable SVGs. Like matrices, each carries the full payload / envelope / markdown projection set, so an agent reads the structure, not the pixels. Direction is carried by motion.
One artifact, every surface · the fan-out topology
Compose this inline
hyperweave compose diagram --spec-file /dev/stdin -g primer --variant porcelain --chrome bare -o one-artifact.svg <<'JSON'
{
"topology": "fanout",
"title": "One Artifact, Every Surface",
"subtitle": "a self-contained SVG renders wherever markdown does",
"notes": "every surface",
"glyph_tint": "full",
"nodes": [
{
"label": "HyperWeave SVG",
"desc": "self-contained · portable",
"role": "hero",
"glyph": "hyperweave",
"style": "card+glyph"
},
{
"label": "GitHub",
"desc": "README · Issues · PRs",
"glyph": "github",
"style": "card+glyph"
},
{
"label": "Obsidian",
"desc": "vault · daily notes",
"glyph": "obsidian",
"style": "card+glyph"
},
{
"label": "Slack",
"desc": "threads · unfurled",
"glyph": "slack",
"style": "card+glyph"
},
{
"label": "Email",
"desc": "inline · PDF export",
"glyph": "gmail",
"style": "card+glyph"
},
{
"label": "Agent Context",
"desc": "hw:reasoning parsed",
"glyph": "anthropic",
"style": "card+glyph"
}
]
}
JSONFrontier serving · layered DAG with a telemetry skip edge
Compose this inline
hyperweave compose diagram --spec-file /dev/stdin -g primer --variant cream --chrome bare -o frontier-serving.svg <<'JSON'
{
"topology": "dag",
"title": "Frontier Serving",
"subtitle": "one key to three frontier labs, shared KV, telemetry skips the ranks",
"notes": "frontier serving",
"glyph_tint": "full",
"nodes": [
{
"id": "req",
"label": "requests",
"desc": "clients"
},
{
"id": "router",
"label": "OpenRouter",
"desc": "one key",
"glyph": "openrouter",
"style": "card+glyph"
},
{
"id": "anthropic",
"label": "Anthropic",
"glyph": "anthropic",
"style": "card+glyph"
},
{
"id": "openai",
"label": "OpenAI",
"glyph": "openai",
"style": "card+glyph"
},
{
"id": "gemini",
"label": "Gemini",
"glyph": "gemini",
"style": "card+glyph"
},
{
"id": "kv",
"label": "kv-cache",
"desc": "redis",
"glyph": "redis",
"style": "card+glyph"
},
{
"id": "obs",
"label": "metrics",
"desc": "grafana",
"glyph": "grafana",
"style": "card+glyph"
}
],
"edges": [
{
"source": "req",
"target": "router"
},
{
"source": "router",
"target": "anthropic"
},
{
"source": "router",
"target": "openai"
},
{
"source": "router",
"target": "gemini"
},
{
"source": "anthropic",
"target": "kv"
},
{
"source": "openai",
"target": "kv"
},
{
"source": "gemini",
"target": "obs"
},
{
"source": "router",
"target": "obs"
}
]
}
JSONMCP gateway · host → gateway → server, request and response as two lanes
Compose this inline
hyperweave compose diagram --spec-file /dev/stdin -g primer --variant porcelain --chrome bare -o mcp-gateway.svg <<'JSON'
{
"topology": "pipeline",
"title": "MCP Gateway",
"subtitle": "host → gateway → server · request and response as two lanes",
"notes": "mcp gateway",
"edge_motion": "dash",
"glyph_tint": "full",
"nodes": [
{
"id": "host",
"label": "Claude Code",
"desc": "MCP host",
"glyph": "claudecode",
"style": "card+glyph"
},
{
"id": "gw",
"label": "MCP gateway",
"glyph": "mcp",
"role": "hero",
"style": "card+glyph"
},
{
"id": "server",
"label": "hyperweave",
"desc": "MCP server",
"glyph": "hyperweave",
"style": "card+glyph"
}
],
"edges": [
{
"source": "host",
"target": "gw",
"direction": "both"
},
{
"source": "gw",
"target": "server",
"direction": "both"
}
]
}
JSONFrontier handoff · beam relay across four labs
Compose this inline
hyperweave compose diagram --spec-file /dev/stdin -g primer --variant noir --chrome bare -o frontier-handoff.svg <<'JSON'
{
"topology": "pipeline",
"title": "Frontier Handoff",
"subtitle": "one task relayed across four labs, the comet is the payload",
"notes": "frontier handoff",
"edge_motion": "beam",
"node_style": "glyph-circle",
"glyph_tint": "full",
"nodes": [
{
"label": "GPT",
"glyph": "openai"
},
{
"label": "Claude",
"glyph": "anthropic",
"role": "hero"
},
{
"label": "Gemini",
"glyph": "gemini"
},
{
"label": "Ollama",
"glyph": "ollama"
}
]
}
JSONA 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.
brutalist · automata · chrome · primer
22 variants · 8 dark: celadon · alloy · carbon · pigment · umber · ember · temper · onyx
14 light (6 shown): primer · depth · pulse · archive · signal · afterimage
16 tones · crimson · copper · bone · solar · amber · sulfur · toxic · jadeabyssal · teal · steel · cobalt · indigo · violet · magenta · burgundy
pair any two via ?variant=primary&pair=secondary
5 variants: horizon · lightning · abyssal · moth · graphite
8 variants · 4 light: porcelain · cream · dusk · petrol
4 dark: noir · carbon · space · anvil
| brutalist | automata | chrome | primer | |
|---|---|---|---|---|
| Aesthetic | Raw material | Cellular | Metallic | Minimal |
| Variants | 22 (8 dark, 14 light) | 16 tones, any two pair | 5 named | 8 (4 dark, 4 light) |
| Motion | Animated border SMIL | Animated cell grid | Animated border SMIL | Animated state marks |
| Divider | seam · sigil |
dissolve |
band |
aura |
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}.statichyperweave.app/v1/badge/TEST/value/unknown-genome.static
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`Requires Python 3.12+. The base install is CLI + rendering; the HTTP and MCP servers are optional extras so the core stays lean.
Four interfaces, one pipeline. Every path produces the same artifact through the same compositor.
{
"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-horizontal",
data="text:NEW RELEASE,gh:anthropics/claude-code.stars,text:DOWNLOAD",
genome="brutalist")
# Discoverable shortcut for single-metric live badges
hw_live(provider="github", identifier="anthropics/claude-code", metric="stars")
hw_kit(type="readme", genome="brutalist", badges="build:passing")
hw_discover(what="all")
# 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-horizontal --data 'text:NEW RELEASE,gh:owner/repo.stars,text:DOWNLOAD' -g brutalist
# Artifact kit
hyperweave kit readme -g brutalist --badges "build:passing,version:v0.2.0" --social "github,discord"
# Profile card (live GitHub data, path-segment identity)
hyperweave compose stats eli64s -g chrome -o stats.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# 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; diagrams add ?chrome=bare)
curl 'https://hyperweave.app/v1/matrix/connectors/primer.static?variant=porcelain'
curl 'https://hyperweave.app/v1/diagram/pipeline/primer.static?variant=porcelain&chrome=bare'
# 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"}'
# Local server
hyperweave serve --port 8000Every 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:
- 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-regimedrive visual transitions through the Custom Property Bridge. No JavaScript. - Pure CSS/SMIL animation: all motion uses compositor-safe properties (
transform,opacity,filter). No script tags. 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.
| Dimension | Count |
|---|---|
| Frame types | 11 (badge, strip, icon, divider, marquee-horizontal, stats, chart, matrix, diagram, receipt, rhythm-strip) |
| Genomes | 4 (automata, brutalist, chrome, primer) |
| Motion configs | 6 (1 static + 5 border SMIL) |
| Glyphs | 189 (183 brand marks + 6 geometric shapes) |
| Divider variants | 10: 5 genome-themed (band chrome, seam + sigil brutalist, dissolve automata, aura primer) + 5 genome-agnostic (block, current, takeoff, void, zeropoint) at /a/inneraura/dividers/ |
| Metadata tiers | 5 (Tier 0 silent → Tier 4 reasoning) |
| Bundled fonts | 5 (JetBrains Mono, Orbitron, Chakra Petch, Barlow Condensed, Inter), embedded per artifact, no external font requests |
Stack: Pydantic, FastAPI, FastMCP v3, Jinja2, Typer.
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>).
Copy a token · view as table
| Prefix | Source | Identifier shape | Metrics |
|---|---|---|---|
gh / github |
GitHub | owner/repo |
stars, forks, watchers, contributors, issues, pull_requests, last_push, build, license, language |
pypi |
PyPI + pepy.tech | package |
version, license, python_requires, downloads |
npm |
npm | package |
version, license, downloads |
crates / cargo |
crates.io | crate |
version, downloads, recent_downloads, license |
hf / huggingface |
Hugging Face | org/model |
downloads, likes, tags, pipeline_tag, library_name, license, gated, last_modified |
docker |
Docker Hub | namespace/repo |
pull_count, star_count, last_updated |
arxiv |
arXiv | id (e.g. 2310.06825) |
title, authors, published, updated, categories, summary, journal_ref, doi |
scorecard |
OpenSSF Scorecard | owner/repo |
score (overall trust), plus per-check: code_review, maintained, vulnerabilities, token_permissions, ... |
dora |
GitHub Actions | owner/repo |
deploy_frequency, lead_time, change_failure_rate, mttr (30-day window) |
text |
literal | — | renders the payload as displayed text |
kv |
literal | KEY=VALUE |
static role-tagged value |
- 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.
HyperWeave is early. If you're interested in building genomes, extending frame types, or just seeing what this looks like in your own README, join the Discord.