# @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`](https://www.npmjs.com/package/@graphysdk/react) instead — same components, plus the chart builders, with the mark on.

Learn more at [graphy.dev](https://graphy.dev).

## Install

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

Requires React 19. There is no stylesheet to import.

## Usage

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

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

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

## Docs

- [Quickstart](https://docs.graphy.dev/sdk-next/quickstart)
- [Provider and renderer](https://docs.graphy.dev/sdk-next/rendering/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](https://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](https://docs.graphy.dev/licence/evaluation).

For a commercial licence, [talk to us](https://graphy.dev/license).

## Support

Questions and community help: [Discord](https://discord.gg/yGmYCjkSr).