> ## Documentation Index
> Fetch the complete documentation index at: https://docs.graphy.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

`@graphysdk/react-renderer` is the React half of the SDK. It takes the [compiled spec](/sdk-next/concepts/how-a-chart-is-built#compile-then-render) and turns it into an interactive SVG chart — owning everything the framework-agnostic engine deliberately leaves out.

## What the renderer owns

* **Layout** — measuring text and packing the header, legend, axes and plot into pixel rectangles.
* **Formatting** — turning raw values into locale-aware numbers, dates and currencies.
* **Theme** — light/dark palettes, colors, fonts and the chrome tokens.
* **Interactivity** — hover, tooltips and hit-testing.
* **Animation** — transitioning between compiled states.

The [engine](/sdk-next/concepts/how-a-chart-is-built) owns the rest — mappings, scales, statistics, positions.

## The two components

Rendering is always a `<GraphProvider>` (holds the data and spec, compiles them) wrapping a `<GraphRenderer>` (paints the result):

```tsx theme={null}
import { GraphProvider, GraphRenderer } from '@graphysdk/react-renderer';
import '@graphysdk/react-renderer/styles.css';

<GraphProvider input={spec} data={data} theme="light">
  <GraphRenderer sizing={{ mode: 'responsive' }} />
</GraphProvider>;
```

The split exists so the compiled spec has a single owner: commands and updates operate on the provider's spec, and any renderer beneath it reflects them. [Provider & renderer](/sdk-next/rendering/provider-and-renderer) covers both in full.

## In this section

<CardGroup cols={2}>
  <Card title="Provider & renderer" icon="layer-group" href="/sdk-next/rendering/provider-and-renderer">
    The two components and their props.
  </Card>

  <Card title="Sizing" icon="up-right-and-down-left-from-center" href="/sdk-next/rendering/sizing">
    Responsive, fixed and aspect-ratio modes.
  </Card>

  <Card title="Theming" icon="palette" href="/sdk-next/rendering/theming">
    Light/dark, token overrides and fonts.
  </Card>

  <Card title="Formatting & locale" icon="language" href="/sdk-next/rendering/formatting">
    Locale-aware numbers and dates.
  </Card>

  <Card title="Interactivity" icon="arrow-pointer" href="/sdk-next/rendering/interactivity">
    Hover and tooltips.
  </Card>
</CardGroup>

To replace *how* a region renders — a custom header, legend, or tooltip — see [Slots](/sdk-next/extending/slots) under Extending.