@graphysdk/react-renderer

React components that paint a Graphy chart. The "Powered by Graphy" mark is off by default.

Most apps should start with @graphysdk/react instead — same components, plus the chart builders, with the mark on.

Learn more at graphy.dev.

Install

npm install @graphysdk/react-renderer @graphysdk/viz-engine

Requires React 19. There is no stylesheet to import.

Usage

import { GraphProvider, GraphRenderer } from '@graphysdk/react-renderer';
import { createSpec, pipe, geom, scale } from '@graphysdk/viz-engine';

const input = pipe(createSpec({ x: 'month', y: 'revenue' }), geom.bar(), scale.x(), scale.y());

export function Chart({ data }) {
  return (
    <GraphProvider data={data} input={input}>
      <GraphRenderer />
    </GraphProvider>
  );
}

Docs

• Quickstart
• Provider and renderer

Editable charts

Import EditableGraphRenderer from @graphysdk/react-renderer/editable.

• @graphysdk/react-renderer — read-only surface: GraphProvider, GraphRenderer, hooks, slots, theme, and types
• @graphysdk/react-renderer/editable — editing surface: EditableGraphRenderer, EditorPanel, and related controls

Agent skills

Install the Graphy agent skills from github.com/graphysdk/skills to set up the SDK and author charts from Cursor, Claude Code, and other coding agents.

Licence

This package is available under PolyForm Noncommercial, Small Business, or a 32-day Free Trial. Free Trial is local or internal evaluation only — it does not cover a public page. See what you can do under the trial.

For a commercial licence, talk to us.

Support

Questions and community help: Discord.