> ## 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.

# Provider & renderer

Every chart is a `<GraphProvider>` wrapping a `<GraphRenderer>`. The provider owns the data and spec and compiles them; the renderer paints the result.

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

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

## GraphProvider

Holds the inputs and produces the compiled spec. It recompiles whenever `input`, `data` or `theme` change.

<ParamField path="data" type="Data" required>
  The [data table](/sdk-next/data-structure) the spec draws from.
</ParamField>

<ParamField path="input" type="SpecInput" required>
  The chart to compile — a [spec](/sdk-next/concepts/how-a-chart-is-built) from
  `createSpec`/`pipe`.
</ParamField>

<ParamField path="theme" type="'light' | 'dark'" default="light">
  The active theme. See [Theming](/sdk-next/rendering/theming).
</ParamField>

<ParamField path="themeOverrides" type="ThemeOverrides">
  Per-token overrides layered over the base theme. See
  [Theming](/sdk-next/rendering/theming).
</ParamField>

<ParamField path="formattingLocale" type="Locale">
  Locale for formatting displayed values. See [Formatting &
  locale](/sdk-next/rendering/formatting).
</ParamField>

<ParamField path="fontList" type="Array<{ id: string; fontFamily: string }>">
  Maps font ids referenced by the spec to CSS `font-family` strings.
</ParamField>

<ParamField path="onError" type="(errors: VizDiagnostic[]) => void">
  Fires when a compile produces errors. The chart also renders an error panel in
  place rather than blanking.
</ParamField>

<ParamField path="onWarnings" type="(warnings: VizDiagnostic[]) => void">
  Fires with any warnings a successful compile produced.
</ParamField>

<ParamField path="onChange" type="(next: CompilerInput) => void">
  Fires when an interactive edit (in `editable` mode) mutates the spec — persist
  the result here.
</ParamField>

<ParamField path="plugins" type="Plugin[]">
  Custom geoms, stats and transforms registered for this graph. Frozen at mount.
</ParamField>

## GraphRenderer

Paints the provider's compiled spec. It must be a descendant of a `<GraphProvider>`.

<ParamField path="sizing" type="GraphSizing" default="{ mode: 'responsive' }">
  How the chart claims space. See [Sizing](/sdk-next/rendering/sizing).
</ParamField>

<ParamField path="mode" type="'readonly' | 'editable'" default="readonly">
  `'readonly'` displays the chart with full interactivity; `'editable'` adds
  inline editing of titles and labels, reported through the provider's
  `onChange`.
</ParamField>

<ParamField path="showTooltips" type="boolean" default="true">
  Whether hover tooltips are shown. See
  [Interactivity](/sdk-next/rendering/interactivity).
</ParamField>

<ParamField path="isAnimated" type="boolean">
  Animate transitions between compiled states.
</ParamField>

<ParamField path="slots" type="GraphSlots">
  Per-region component overrides. See [Slots](/sdk-next/extending/slots).
</ParamField>

<ParamField path="onResize" type="(size) => void">
  Called when the container resizes, in every sizing mode.
</ParamField>

## Keep inputs stable

The provider recompiles when `input` or `data` change **by reference**. If you build the spec or data inline in a component, memoize them so an unrelated re-render doesn't trigger a needless recompile:

```tsx theme={null}
function Chart({ rows }) {
  const spec = useMemo(
    () =>
      pipe(
        createSpec({ x: 'month', y: 'revenue' }),
        geom.line(),
        scale.x(),
        scale.y()
      ),
    []
  );
  const data = useMemo(() => ({ columns, rows }), [rows]);

  return (
    <GraphProvider input={spec} data={data}>
      <GraphRenderer />
    </GraphProvider>
  );
}
```

## Errors never blank the page

A compile failure or a render-time throw is caught and shown as an error panel in place of the chart, so a bad spec degrades gracefully instead of taking down the surrounding UI. Use `onError` to log or surface the diagnostics yourself.

## Related

* [How a chart is built](/sdk-next/concepts/how-a-chart-is-built) — the compile → render model
* [Sizing](/sdk-next/rendering/sizing) · [Theming](/sdk-next/rendering/theming) · [Slots](/sdk-next/extending/slots)