Introduction to ProvChart
Most charting libraries ask you to ship 40–150 kb of JavaScript, wait for hydration, and hope crawlers eventually see the chart.
ProvChart takes a different path.
It turns your data into CSS custom properties. The browser paints the chart with native CSS (clip-path, gradients, and a few carefully chosen rules). The result is a chart that:
- Loads with the first paint
- Ships zero chart library to the page
- Is fully visible to search engines on the first crawl
- Can still be updated by changing CSS variables
No canvas. No SVG charting runtime. No “wait for JS.”
The idea in one sentence
Data → CSS variables → browser paints the shape.
You (or the API) compile points into variables like --p1, --p2, ….
A pure CSS structure uses those variables to draw lines, areas, bars, or gauges.
After that, the page doesn’t need a charting library at all.
What you get
| Feature | Detail |
|---|---|
| Output | Self-contained HTML + CSS |
| Runtime on the page | None for the chart itself |
| Types | Line, area, bar, stacked bar, horizontal bar, scatter, combo, gauge |
| Themes | Dark, light, midnight, or fully custom |
| SEO | Chart markup is in the first HTML response |
| Updates | Change CSS variables (or regenerate) — no virtual DOM chart layer |
There is also a Developer API: send JSON, get back { html, css }, inject into any page or pipeline.
Who it’s for
- Teams that care about LCP, TTI, and bundle size
- Marketing and docs sites that need crawlable charts
- Static or mostly-static pages that still need real data viz
- Backends that want to generate charts for emails, reports, or static builds without shipping a client-side chart library
If you need heavy interaction, streaming of thousands of points, or complex JS-driven animations, a traditional library may still fit better. ProvChart optimizes for performance, simplicity, and SEO.
Quick taste (API)
const res = await fetch("https://provchart-api.devtem.org/api/v1/generate", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-API-Key": "YOUR_API_KEY"
},
body: JSON.stringify({
type: "line",
series: [
{ name: "Revenue", color: "#8b7bff", points: [20, 35, 48, 66] },
{ name: "Users", color: "#4fd8c4", points: [12, 28, 41, 55] }
],
axisX: ["Jan", "Feb", "Mar", "Apr"]
})
});
const data = await res.json();
// data.html + data.css → inject into the page
Free accounts get a few test generations so you can try the full flow.
Pro and Business unlock higher monthly limits for production use.
Open source core + hosted product
- Rendering core: st-core.fscss (MIT) — pure CSS chart primitives for the FSCSS ecosystem
- Hosted product: ProvChart — visual builder, dashboard, Developer API, billing (by DevTemple)
You can use the open-source core on its own, or the hosted API when you want keys, limits, and multi-series generation without maintaining the engine yourself.
Try it
| Link | What |
|---|---|
| chart.devtem.org | Product home |
| Get started | Free visual builder (no signup for single-series) |
| Docs | Core + Developer API |
| Pricing | Free / Pro / Business |
What’s next from this org
We’ll publish short, practical posts on:
- Building a small chart generator with the API
- Using ProvChart in email digests (server-side → image/snapshot)
- Performance and SEO notes vs typical JS chart stacks
- Themes, multi-series patterns, and real dashboard layouts
If you care about charts that stay fast and crawlable, you’re in the right place.
ProvChart — charts without the JavaScript tax.
Top comments (1)
This is the right implementation lens. For a local-service site, I would make the underlying fact explicit in the content model, render it in the initial HTML, and keep the same value in JSON-LD rather than maintaining a second SEO-only field.