What is Szum
A chart design system built around one shared definition, curated themes, and consistent output across images, Figma, and interactive embeds.
Charts are the one part of many products, reports, and presentations that still looks disconnected from the surrounding design. Libraries offer infinite configuration and little visual direction. Image APIs return pixels without taste. Design-tool charts often become screenshots that drift away from production.
Szum adds the missing design-system layer: one compact chart definition, curated visual defaults, and the same chart across every output.
One shared chart definition
The definition contains the data, marks, scales, labels, sizing, and theme. It is small enough to write directly, simple enough for an agent to produce reliably, and structured enough for visual tools to edit.
Four ways to create
AI agents. Connect the MCP server so an agent can discover the grammar, validate a definition, render a preview, or save a finished chart.
Web editor. Work visually in the browser. Paste data, choose a chart and theme, adjust labels, then export or publish.
Developers. Write JSON or use the TypeScript SDK to render images, save stable URLs, and add interactive embeds.
Figma. Start with generated sample data or paste CSV, then insert an editable chart with semantic layers onto the canvas.
These are different interfaces to the same system, not separate chart engines.
Three outputs
PNG and SVG images work in emails, reports, Slack, Notion, documents, and any other surface that can display an image.
Editable Figma assets preserve real vector and text layers for design work.
Interactive embeds bring the same chart into a dashboard or product UI with responsive sizing, tooltips, and legend controls.
Clarity over configuration
A single theme: "editorial" gets you most of the way to a chart that belongs in a considered publication or product. Typography, color, axes, grid, labels, and spacing move together.
barY says what it does. A deeply nested configuration object does not. The grammar is intentionally small, so humans and agents can both produce valid charts without rebuilding the visual system every time.
Validated charts
It checks whether the fields, values, scales, marks, labels, colors, and themes can produce a renderable result. It separates blocking errors from recoverable warnings and can suggest a first-class Szum feature when a definition takes a brittle route.
The same compiler checks changes made through the web editor, Figma plugin, Image API, MCP server, and saved-chart updates before those definitions reach images or interactive embeds. Deterministic errors or suggestions may offer an explicit fix, but Szum never rewrites the definition automatically. Learn how the contract works in Validation and Review.
When to use Szum
- Emails and reports: publish static images that render reliably without JavaScript.
- Figma mockups: work with real data and editable layers instead of screenshot placeholders.
- Automated reporting: turn structured data into consistent chart images from a pipeline or agent.
- Dashboards and product UI: embed interactive charts that use the same themes as every other output.