Free visual builder for st-core.fscss — pure CSS data viz

st-core.fscss (Statistic Core) is a lightweight, CSS-based data visualization and dashboard layer for the FSCSS ecosystem: area and line charts from arrays and custom properties — no Chart.js, no SVG requirement for the core series, no canvas.

There is now a free, open-source visual builder so you can shape a chart in the browser and leave with real code.

Builder: hub.devtem.org/st-core.fscss/visual-builder
Module: github.com/fscss-ttr/st-core.fscss

---

What st-core is

Idea	Detail
Data	FSCSS array of any length (v2)
Drawing	clip-path polygons + --st-p1 … --st-pN
Theme	--st-* tokens (@st-root)
Updates	Optional JS that only sets CSS variables
Ship path	CLI compile to plain CSS, or CDN runtime while prototyping

v2 moves past fixed 8-point charts: even X spacing from array length, inline normalization, dual-edge line strokes.

---

What the visual builder does

The builder is a small app around that model — not a locked SaaS chart widget.

You control

• Data — paste numbers (0–100), or use presets (Rising, Decline, Volatile, Flat, Climb, Peaks)
• Layers — fill, line, grid, dots on/off
• Chrome — height, border radius, accent color
• Grid — row/column density
• Names — array name and chart class for generated selectors

You get

1. FSCSS — @import st-core@v2, @arr, @st-chart-fill / line / grid / dots, @st-chart-points
2. HTML — minimal page with FSCSS runtime + the chart markup
3. CSS — approximate or runtime-expanded rules for inspection

Copy buttons on each panel; tweak data and rebuild without leaving the page.

What the preview does

• Renders the chart live from your options
• Tries the FSCSS ESM / runtime path so the preview matches real compile behavior
• Falls back to polygon paint if runtime fails, so the curve still shows
• Hover probe — guide line, point on the series, value tip (#index: value)
• Stats — count, min, max, average for the current series
• Replay animation on the preview card
• Responsive layout: sidebar + preview on desktop, stacked on small screens

Under the hood, points become --st-pN: (100 - value)% on the chart root — the same contract you’d use in production JS for live tickers.

---

Example of what you export

<script src="https://cdn.jsdelivr.net/npm/fscss@1.2.5/runtime.min.js" defer></script>
<style>
  @import((*) from st-core@v2)
  @st-root()
  @arr myData[56, 67, 70, 43, 67, 80, 55]
  @st-chart-fill(.chart-fill, myData)
  @st-chart-line(.chart-line, myData)
  .chart {
    @st-chart-points(myData)
    position: relative;
    height: 220px;
    width: 100%;
    max-width: 520px;
    background: var(--st-surface);
    border-radius: 12px;
    overflow: hidden;
  }
</style>
<div class="chart">
  <div class="chart-fill"></div>
  <div class="chart-line"></div>
</div>

Paste into a dashboard, phone frame (@st-phone), or multi-series layout from the module docs when you’re ready to go further.

---

Who it’s for

• Builders who want pre-designed, modern, lightweight charts without a JS chart SDK
• Teams already on FSCSS who need a correct mixin skeleton fast
• Anyone evaluating st-core@v2 before wiring templates or integrations

Open source end to end: module on GitHub, builder on the hub, MIT-licensed patterns you can own in your CSS.

---

Try it

1. Open the visual builder
2. Enter points or pick a preset
3. Toggle fill / line / grid / dots
4. Copy FSCSS or HTML
5. Compile with fscss when you ship

st-core is the source. The visual builder is the cockpit — free, open, and aimed at pure CSS data viz you can actually maintain.