Quick start
Render publication-ready images, save stable chart URLs, and embed interactive charts from the same JSON definition.
Use szum from code when a chart needs to be generated from application data, an automation, or a reporting pipeline. Start with a keyless image URL, then move to the TypeScript SDK or authenticated API for production.
Render a chart now
This URL is a chart. Paste it into a browser:
https://szum.io/chart?config={"version":"2026-03-20","format":"svg","title":"Weekly Signups","subtitle":"New accounts, March 2026","y":{"label":"Signups"},"marks":[{"type":"barY","data":[{"x":"Mon","y":120},{"x":"Tue","y":150},{"x":"Wed","y":180},{"x":"Thu","y":140},{"x":"Fri","y":200}]}]}You get back an SVG. No API key or signup is required. The same URL works in an <img> tag, Markdown, Notion, an email, or Slack.
GET URLs must be percent-encoded in production. They are shown unencoded here for readability.
Choose how the chart ships
| Need | Use | Result |
|---|---|---|
| Render immediately | GET or POST /chart | SVG or PNG response |
| Publish a stable image | Saved charts | Short /c/{id} PNG or SVG URL |
| Add a live product chart | Interactive embeds | Responsive /e/{id} iframe |
Direct rendering is the smallest primitive. Saved charts keep the full config off the public URL and give you stable, revocable image and embed links.
Use the SDK in production
For Node and TypeScript, install the SDK:
npm install @szum-io/sdkimport { Szum } from "@szum-io/sdk";
const szum = new Szum({ apiKey: "YOUR_API_KEY" });
const svg = await szum.render({
format: "svg",
theme: "editorial",
marks: [
{
type: "barY",
data: [
{ x: "Q1", y: 42 },
{ x: "Q2", y: 58 },
],
},
],
});The SDK supplies typed configs, schema-version handling, timeouts, and structured errors. Raw HTTP works from any language.