# 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](https://hub.devtem.org/st-core.fscss/visual-builder/)  
**Module:** [github.com/fscss-ttr/st-core.fscss](https://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

```html
<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](https://hub.devtem.org/st-core.fscss/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.