POST a small JSON description and get back a deck-ready PNG (or SVG). The endpoint is open and CORS-enabled, so it works from browsers, scripts, CI and anywhere else you can make an HTTP call. The same JSON opens in the builder.
| Field | Type | Description |
|---|---|---|
| title | string | Heading shown top-left of the chart at 22px bold. Every chart has one title row; an empty string hides it. max 140 chars · default "Hub and Spoke" |
| hubrequired | string | Label of the central hub, e.g. "Core platform". Bold white text in a large circle, wrapped to up to 3 lines; 1–4 words reads best. max 60 chars |
| hubColor | string | Optional hex colour of the hub circle. Default: the first palette colour (indigo #4f46e5), with the spokes taking the following palette colours. max 40 chars |
| arrows | string | Arrowheads on the spokes: "none" (default, plain connecting lines), "out" (from the hub towards each satellite, e.g. distribution or influence), "both" (two-way exchange). "none", "out", "both" · default "none" |
| width | integer | Chart width in pixels (640–2400, default 1280, which suits a 16:9 slide). PNG output renders at 2x. Height is always computed from the content. 640–2400 · default 1280 |
| palette | string[] | Hex colours applied in order to items that have no colour of their own. Pass the user's brand colours here when they name them. Default: indigo, sky, emerald, amber, red, gray. max 12 items · default ["#4f46e5","#0ea5e9","#10b981","#f59e0b","#ef4444","#6b7280"] |
| spokesrequired | object[] | The satellites around the hub (3–10), placed clockwise from 12 o'clock. Order only decides placement; nothing implies a sequence. Fewer than 3 still render but are reported as a warning; more than 10 are dropped. max 10 items |
| Field | Type | Description |
|---|---|---|
| namerequired | string | Satellite label, 1–3 words reads best (e.g. "Mobile app"). Long names shrink and wrap to 2 lines. max 60 chars |
| detail | string | Optional short description shown next to the satellite, on the side away from the hub, wrapped to up to 3 lines (about 12 words). max 160 chars |
| color | string | Hex colour, e.g. "#0ea5e9". Optional: satellites without one take the next palette colour. max 40 chars |
POST /api/render/hubspoke returns image/png; add ?format=svg for SVG.GET /hubspoke.png?d=<payload> and /hubspoke.svg?d=<payload> render a chart from a link. The payload is the JSON body, raw-deflated and base64url-encoded. Nothing is stored: links are permanent and cached for a year./hubspoke#d=<payload> opens the same chart in the builder for editing.GET /api/render/hubspoke?demo=1 returns the demo chart.GET /api/schema/hubspoke returns the JSON Schema, for code generators and AIs.Input is lenient where the intent is clear: numeric strings become numbers, out-of-range values are clamped, and unknown fields are ignored. Adjustments are listed in the X-Render-Warnings header. Anything unclear returns a 400 that says how to fix it:
{
"error": "Invalid payload",
"issues": [{ "path": "tasks", "message": "must be an array" }],
"example": { … }
}
Use the hosted MCP server instead. It gives Claude, Cursor and other MCP clients a create_hub_spoke tool that returns the image plus image, SVG and edit links. See the MCP page →