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.