Publication-ready charts for every surface.

szum.io · 2026-07-15 · by Long Nguyen ·generic
Create publication-ready charts in the browser, from code, in Figma, or with AI. Render the same definition as PNG, SVG, editable Figma assets, and interactive embeds.

Publication-ready charts for every surface.

Publication-ready charts for every surface.

Create in the browser, from code, in Figma, or with an AI agent. The same chart definition renders as PNG or SVG, editable Figma assets, and interactive embeds.

Create in browserHow szum works

Make one now.

The web editor is the no-code way to create the shared definition. Switch the type or theme and the chart rebuilds itself.

Data.

| year | format | revenue | units | | ---- | ------ | ------- | ----- | | 2014 | Vinyl | 315 | 13.2 | | 2014 | CD | 1,855 | 140.8 | | 2016 | Vinyl | 430 | 17.2 |

12 rows · 4 columns

Chart type.

ColumnBarLineScatterPieArea

Theme.

editorialcleannoirloudsofttechnical

The full editor adds your data, labels, sizing, and a link that renders anywhere.

Create a chart

Your chart is JSON.

The editor writes the definition for you. You can also write it directly or ask an agent – the same small config produces the same chart everywhere.

Ask an agentWrite JSON

1{
 2  "version": "2026-03-20",
 3  "format": "svg",
 4  "theme": "clean",
 5  "title": "World population",
 6  "subtitle": "Billions, by decade – UN",
 7  "marks": [{ "type": "barY" }],
 8  "data": [
 9    { "x": "1950", "y": 2.5 },
10    { "x": "1960", "y": 3.0 },
11    { "x": "1970", "y": 3.7 },
12    { "x": "1980", "y": 4.4 },
13    { "x": "1990", "y": 5.3 },
14    { "x": "2000", "y": 6.2 },
15    { "x": "2010", "y": 7.0 },
16    { "x": "2020", "y": 7.9 }
17  ]
18}

Show me average monthly temperatures for Lisbon and Berlin as a line chart with dots.

{
  "version": "2026-03-20",
  "format": "svg",
  "title": "Monthly Temperature",
  "subtitle": "Average highs by city, 2025 (°C)",
  "theme": "clean",
  "marks": [
    { "type": "line", "stroke": "city" },
    { "type": "dot", "fill": "city", "r": 3 }
  ],
  "data": [...]
}

Connect an agent · Use the TypeScript SDK

Rendered, not pasted.

One definition becomes editable Figma assets, images for Slack and Notion, or an interactive chart in your app.

FigmaNotionSlackWeb App

Figma

Layers

Page Header

Scatter Plot

Data Table

Footer

Scatter Plot

Available as a Figma plugin. Live preview, templates, editable SVG.

Six accessible themes.

The curated defaults are the design system. Switch one property and typography, color, axes, and spacing move together.

editorialcleannoirloudsofttechnical

editorial

editorial

clean

noir

loud

soft

technical

Adapt any theme to your brand with themeOverrides.

Free to make. Priced by renders.

No per-chart fees, no view counts. Making and editing costs nothing – the only metered thing is a fresh render, and the cache keeps those rare.

250

renders a month, free

Before you even make an account. A free account raises the ceiling and adds saved charts and live embeds.

$0

for ten views or ten million

Charts are served from a global cache. Millions of views trigger just a handful of renders a day.

$29 flat

for Pro, seats included

A bigger render ceiling for the whole team. The meter counts renders, not people, not views.

The fine print is short: see plans and limits.

The difference is in the defaults.

Real data, default settings – nothing here was styled by hand.

Create a chart

szum.io · 22 links

Comments (0)

No comments yet