From definition to conversation
Make a chart. Send an image.
Turn a TanStack Charts definition into an image with a URL, the CLI, or a POST request.
Rendered by the Vizzo API · follows your device theme
https://vizzo.dev/x?width=960&height=540&theme=light&data=(definition~(marks~!(type~lineY~data~!(month~Jan~revenue~42000)(month~Feb~revenue~58000)(month~Mar~revenue~76000)(month~Apr~revenue~64000)(month~May~revenue~81000)(month~Jun~revenue~93000)~options~(x~month~y~revenue~points~~stroke~**H2563eb))~scales~(x~(scale~point~padding~0.2~label~Month)y~(scale~linear~nice~~grid~~label~Revenue_*CUSD*D)))theme~light)~An image, wherever the conversation happens
Send a revenue chart to Slack. Attach a release report in Discord. Put a weekly trend in an email or a PNG in a tweet. Vizzo renders the file from your chart definition, without launching a browser.
Start with a working chart URL. It returns a PNG. Change width=960 to width=1200, or change theme=light to theme=dark in the address bar. The data parameter uses JSURL2, a compact encoding of the same JSON accepted by the CLI.
Save a chart definition
Download line.json, or save this envelope as line.json. A definition contains TanStack Charts marks and scales. Each mark names the factory function, its data, and its options.
{
"definition": {
"marks": [
{
"type": "lineY",
"data": [
{
"month": "Jan",
"revenue": 42000
},
{
"month": "Feb",
"revenue": 58000
},
{
"month": "Mar",
"revenue": 76000
},
{
"month": "Apr",
"revenue": 64000
},
{
"month": "May",
"revenue": 81000
},
{
"month": "Jun",
"revenue": 93000
}
],
"options": {
"x": "month",
"y": "revenue",
"points": true,
"stroke": "#2563eb"
}
}
],
"scales": {
"x": {
"scale": "point",
"padding": 0.2,
"label": "Month"
},
"y": {
"scale": "linear",
"nice": true,
"grid": true,
"label": "Revenue (USD)"
}
}
},
"theme": "light"
}Render a file with the CLI
No global installation is required. Use Node with npx or pnpm dlx vizzo. With Bun, use bunx --bun vizzo to run without Node installed.
npx vizzo line.json line.png --theme lightThe output filename selects PNG. Without an output file or format, the CLI writes SVG to stdout. CLI guide
Render with a URL
Open this URL to render the same definition. JSURL2 replaces JSON punctuation with URL-friendly separators, so you can edit values directly.
https://vizzo.dev/x?width=960&height=540&theme=light&data=(definition~(marks~!(type~lineY~data~!(month~Jan~revenue~42000)(month~Feb~revenue~58000)(month~Mar~revenue~76000)(month~Apr~revenue~64000)(month~May~revenue~81000)(month~Jun~revenue~93000)~options~(x~month~y~revenue~points~~stroke~**H2563eb))~scales~(x~(scale~point~padding~0.2~label~Month)y~(scale~linear~nice~~grid~~label~Revenue_*CUSD*D)))theme~light)~Use data with raw JSON or base64 if your integration already generates those. For larger definitions, send the JSON envelope in a POST body. HTTP guide
Render with POST
curl https://vizzo.dev/ \
-H 'Content-Type: application/json' \
--data-binary @line.json \
--output line.pngGET and POST return image bytes. The HTTP API defaults to PNG and allows 10 render requests per minute per IP. Rendering in the local CLI has no HTTP rate limit.
Share the result
Attach the downloaded PNG or WebP in Slack, Discord, or a social post. A bot can upload the file with the platform's attachment API. For email, use an attached image or a hosted image in HTML according to your email provider's rules.
The twitter, discord, og, and linkedin presets choose image dimensions. They do not publish a post or guarantee that a platform will unfurl a chart URL. Formats and presets
Want a different shape? Browse the chart gallery for bars, layered areas, multiple series, UTC timelines, and pie charts.