ggts

Formerly ggsvelte. Migration guide.

ggts is a fast agent-native implementation of the grammar of graphics in TypeScript.

Documentation · Agent setup · Examples · Framework quickstarts

Benchmarks

Selected SVG comparisons using the ggts core renderer; lower is better. Source and full results.

Start in an agent sandbox

npm install --save-dev --save-exact @ggts-sh/cli @ggts-sh/skill

Keep the lockfile and tell your agent to read node_modules/@ggts-sh/skill/SKILL.md. If you copy the package into the agent’s skills directory, refresh that copy after each dependency update. The skill shares one grammar and selects React or Svelte instructions from the target application.

Try this task:

Make a column chart of annual sales: 2023: 12, 2024: 18, 2025: 25. Save a complete PortableSpec as chart.json. Run ggts check, read its diagnostics, fix errors, and render chart.svg.

A complete chart.json:

{
  "data": {
    "values": [
      { "year": "2023", "sales": 12 },
      { "year": "2024", "sales": 18 },
      { "year": "2025", "sales": 25 }
    ]
  },
  "aes": { "x": { "field": "year" }, "y": { "field": "sales" } },
  "layers": [{ "geom": "col" }],
  "scales": { "x": { "type": "band" } },
  "labs": { "title": "Annual sales", "x": "Year", "y": "Sales" }
}

npm exec -- ggts check chart.json
npm exec -- ggts render chart.json > chart.svg

check runs the rendering checks without SVG output. Both commands write JSONL diagnostics to stderr; validation errors include a path and suggested fix. Inspect the SVG after the checks pass. No browser or UI framework is required for this workflow.

Complete sandbox setup and repair loop · Schema · llms.txt · Full corpus

Use React or Svelte

npm install @ggts-sh/react   # React DOM 18.2 or 19
# or
npm install @ggts-sh/svelte  # Svelte 5.33.1+

Pass the same spec to GGPlot, calling registerAll() once for spec-driven charts. Or compose GeomPoint, GeomSmooth, scales, themes, and other layers as components. The TypeScript gg() builder produces the same spec. Complete React and Svelte examples.

For a smaller bundle, import from @ggts-sh/react/lean or @ggts-sh/svelte/lean and register only the geoms and scales your charts use (React, Svelte).

Node.js 22+; CI tests npm, pnpm, and Bun. Interactive charts also need browser checks for callbacks, keyboard use, and hydration.

Packages

Package	Surface
@ggts-sh/spec	PortableSpec, schema, validation, normalization, TypeScript builder
@ggts-sh/core	Shared pipeline, headless SVG, canvas, hit testing; teaching data at /data
@ggts-sh/react	React DOM components
@ggts-sh/svelte	Svelte 5 components
@ggts-sh/compose	Shared grammar composition
@ggts-sh/cli	ggts check and ggts render
@ggts-sh/skill	Versioned agent skill and framework references

Why ggts?

Use ggplot2's grammar in TypeScript, validate portable chart specs, and render SVG without a DOM. The same grammar powers React and Svelte components.

Compare Svelte ecosystem capabilities:

This is the beginning of the README. Read the rest at the original. Read the full README ↗