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 "2×2 matrix" |
| width | integer | Chart width in pixels (640–2400, default 1280, which suits a 16:9 slide). PNG output renders at 2x. Height follows from the width (plot mode) or the bullets (list mode). 640–2400 · default 1280 |
| palette | string[] | Hex colours. The whole matrix uses the FIRST palette colour as its one accent, tinted in four strengths across the quadrants, so a brand colour as the first entry recolours the chart. Default: indigo, sky, emerald, amber, red, gray. max 12 items · default ["#4f46e5","#0ea5e9","#10b981","#f59e0b","#ef4444","#6b7280"] |
| preset | string | Set it: the standard matrix to start from, or "none" (the default when omitted). Its axis labels, quadrant names and mode fill in anything the payload leaves out (your own values always win). eisenhower: urgency (urgent on the LEFT) × importance; Do first, Schedule, Delegate, Eliminate; list. impactEffort: effort × impact; Quick wins (top left), Major projects, Fill-ins, Thankless tasks; plot. bcg: relative market share (high on the LEFT) × market growth; Stars, Question marks, Cash cows, Dogs; plot. ansoff: products (existing, new) across × markets (existing at the TOP, new below); Market penetration, Product development, Market development, Diversification; list. powerInterest: interest × power; Keep satisfied, Manage closely, Monitor, Keep informed; plot. perceptual: price × quality; High value, Premium, Economy, Overpriced; plot. riskLikelihood: likelihood × impact; Plan contingency, Act now, Accept, Monitor; plot. none: plain Low/High axes and no quadrant names, plot (name the axes and quadrants yourself). "none", "eisenhower", "impactEffort", "bcg", "ansoff", "powerInterest", "perceptual", "riskLikelihood" · default "none" |
| mode | string | "list": four tinted quadrants, each with its name and bullets. "plot": items drawn as dots or bubbles at their x and y, with quadrant names faint in the corners. Omit to use the preset's mode (list for eisenhower and ansoff, plot for the rest). "list", "plot" |
| xAxis | object | The horizontal axis along the bottom, e.g. { "label": "Effort", "low": "Low", "high": "High" }. Each field you omit comes from the preset; an empty string hides that text. |
| yAxis | object | The vertical axis up the left side, with rotated texts, e.g. { "label": "Impact", "low": "Low", "high": "High" }. Each field you omit comes from the preset; an empty string hides that text. |
| quadrants | object | The four quadrants by POSITION on the slide (after any axis reversal): topLeft, topRight, bottomLeft, bottomRight. With both axes in their normal direction, topRight is high x and high y, bottomLeft low x and low y. Each is { "name", "bullets", "color" }, all optional; a missing name comes from the preset. E.g. { "topLeft": { "name": "Quick wins", "bullets": ["Fix checkout bug"] } }. |
| items | object[] | Plot mode only (kept but not drawn in list mode): 0–30 items, each a dot at its x and y on 0–10 scales, with its name beside it, e.g. { "name": "Self-serve onboarding", "x": 2.5, "y": 8 }. Labels are placed automatically so they never overlap. Give `size` to draw bubbles. max 30 items · default [] |
| showGrid | boolean | Plot mode: light gridlines at every whole unit (1–9) behind the items. Default false (the midlines only). default false |
| Field | Type | Description |
|---|---|---|
| label | string | Axis name, centred under the matrix in bold, e.g. "Effort" or "Relative market share". max 50 chars |
| low | string | Text at the low end, e.g. "Low", "Existing" or "Not urgent". max 30 chars |
| high | string | Text at the high end, e.g. "High", "New" or "Urgent". max 30 chars |
| reverse | boolean | true puts the HIGH end on the left (BCG share, Eisenhower urgency). Item x values still mean low (0) to high (10). Default: the preset's direction, else false (high on the right). |
| Field | Type | Description |
|---|---|---|
| label | string | Axis name, centred beside the matrix in bold, e.g. "Impact" or "Market growth". max 50 chars |
| low | string | Text at the low end, e.g. "Low" or "Not important". max 30 chars |
| high | string | Text at the high end, e.g. "High" or "Important". max 30 chars |
| reverse | boolean | true puts the HIGH end at the bottom (Ansoff: existing markets on top). Item y values still mean low (0) to high (10). Default: the preset's direction, else false (high at the top). |
| Field | Type | Description |
|---|---|---|
| topLeft | quadrant | Top-left quadrant: low x and high y when the axes run normally (impactEffort: Quick wins; eisenhower: Do first; bcg: Stars). |
| topRight | quadrant | Top-right quadrant: high x and high y when the axes run normally (impactEffort: Major projects; powerInterest: Manage closely). |
| bottomLeft | quadrant | Bottom-left quadrant: low x and low y when the axes run normally (impactEffort: Fill-ins; bcg: Cash cows). |
| bottomRight | quadrant | Bottom-right quadrant: high x and low y when the axes run normally (impactEffort: Thankless tasks; bcg: Dogs). |
| Field | Type | Description |
|---|---|---|
| namerequired | string | Label shown beside the dot at 13px, e.g. "SSO for enterprise". Keep it to 1–4 words; long names wrap to two lines. max 40 chars |
| x | number | Position along the horizontal axis, 0 (low) to 10 (high); 5 is the midline. Default 5. 0–10 |
| y | number | Position along the vertical axis, 0 (low) to 10 (high); 5 is the midline. Default 5. 0–10 |
| size | number | Optional bubble size, any positive number such as revenue (e.g. 420 for $420m). Bubble AREA is proportional to size, relative to the largest; items without a size stay small dots. Omit on every item for plain dots. 0–1000000000000 |
| color | string | Optional hex colour for this dot, e.g. "#ef4444" to flag one item. Default: its quadrant's colour, which is the accent unless that quadrant has its own. max 40 chars |
| Field | Type | Description |
|---|---|---|
| name | string | Quadrant name, e.g. "Quick wins". Bold at the top of the quadrant in list mode, faint in its outer corner in plot mode. Omit to use the preset's name; "" hides it. max 40 chars |
| bullets | string[] | List mode: 0–6 short bullets under the name, e.g. ["Board deck due Friday", "Server outage follow-up"]. Each wraps to at most 3 lines. max 6 items |
| color | string | Optional hex colour for this quadrant's tint (and its plot dots), e.g. "#10b981". Default: the accent (first palette colour). max 40 chars |
POST /api/render/quadrant returns image/png; add ?format=svg for SVG.GET /quadrant.png?d=<payload> and /quadrant.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./quadrant#d=<payload> opens the same chart in the builder for editing.GET /api/render/quadrant?demo=1 returns the demo chart.GET /api/schema/quadrant 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_quadrant_matrix tool that returns the image plus image, SVG and edit links. See the MCP page →