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

Click a bar, line, axis, legend, grid line or chart background to open its editing controls. Every change uses a [command](https://docs.graphy.dev/sdk-next/editing/commands-and-history.md), supports undo and redo, and reaches the provider's `onSpecChange` callback.

```tsx theme={null}
import { GraphProvider } from '@graphysdk/react';
import { EditableGraphRenderer } from '@graphysdk/react/editable';

<GraphProvider spec={spec} data={data} onSpecChange={saveSpec}>
  <EditableGraphRenderer mode="edit" />
</GraphProvider>;
```

## EditableGraphRenderer

Replace `GraphRenderer` with `EditableGraphRenderer` to add menus, selection outlines and inline text editors. It accepts the same props, plus [`editMenus`](https://docs.graphy.dev/sdk-next/editing/custom-menus) and [`palettePresets`](https://docs.graphy.dev/sdk-next/editing/menu#palette-presets). Setting `mode="edit"` on a plain `GraphRenderer` does not enable editing.

The editor has a separate entry so read-only charts do not load it. Import `GraphProvider` and builders from `@graphysdk/react`; import `EditableGraphRenderer` and command classes from `@graphysdk/react/editable`.

## Modes

`mode` controls chart interaction and defaults to `'readonly'`.

| Mode | Interaction | Tooltips | Annotations |
| - | - | - | - |
| `'readonly'` | View the chart | Yes | Visible |
| `'annotate'` | Add, move and edit annotations | No | Editable |
| `'edit'` | Select chart elements and open their controls | No | Hidden |
| `'static'` | Display for exports and print, without hover or animation | No | Visible |

This section covers `'edit'` mode. It replaces the usual hover styling with selection outlines and temporarily hides annotations. Switching back restores them. See [Annotations](https://docs.graphy.dev/sdk-next/emphasis/annotations.md) for annotation configuration and commands.

## Install

```shell npm theme={null}
npm install @graphysdk/react
```

```shell pnpm theme={null}
pnpm add @graphysdk/react
```

```shell yarn theme={null}
yarn add @graphysdk/react
```

```shell bun theme={null}
bun add @graphysdk/react
```

The `/editable` entry also requires these TipTap v3 packages for inline text editing:

```shell npm theme={null}
npm install @tiptap/core @tiptap/pm @tiptap/react @tiptap/extensions \
  @tiptap/extension-bold @tiptap/extension-document @tiptap/extension-hard-break \
  @tiptap/extension-heading @tiptap/extension-italic @tiptap/extension-link \
  @tiptap/extension-paragraph @tiptap/extension-text @tiptap/extension-text-align \
  @tiptap/extension-text-style @tiptap/extension-underline
```

```shell pnpm theme={null}
pnpm add @tiptap/core @tiptap/pm @tiptap/react @tiptap/extensions \
  @tiptap/extension-bold @tiptap/extension-document @tiptap/extension-hard-break \
  @tiptap/extension-heading @tiptap/extension-italic @tiptap/extension-link \
  @tiptap/extension-paragraph @tiptap/extension-text @tiptap/extension-text-align \
  @tiptap/extension-text-style @tiptap/extension-underline
```

```shell yarn theme={null}
yarn add @tiptap/core @tiptap/pm @tiptap/react @tiptap/extensions \
  @tiptap/extension-bold @tiptap/extension-document @tiptap/extension-hard-break \
  @tiptap/extension-heading @tiptap/extension-italic @tiptap/extension-link \
  @tiptap/extension-paragraph @tiptap/extension-text @tiptap/extension-text-align \
  @tiptap/extension-text-style @tiptap/extension-underline
```

```shell bun theme={null}
bun add @tiptap/core @tiptap/pm @tiptap/react @tiptap/extensions \
  @tiptap/extension-bold @tiptap/extension-document @tiptap/extension-hard-break \
  @tiptap/extension-heading @tiptap/extension-italic @tiptap/extension-link \
  @tiptap/extension-paragraph @tiptap/extension-text @tiptap/extension-text-align \
  @tiptap/extension-text-style @tiptap/extension-underline
```

No stylesheet import is needed. Each entry injects its own styles when it loads.

## A chart with an edit toggle

Keep `mode` in state and toggle it from a button. This example also keeps edits in React state and uses `handleRef` to enable undo and redo shortcuts:

```tsx theme={null}
import { useRef, useState } from 'react';
import {
  createSpec,
  type Data,
  geom,
  type GraphHandle,
  type GraphMode,
  GraphProvider,
  pipe,
  scale,
  useGraphHistoryShortcuts,
} from '@graphysdk/react';
import { EditableGraphRenderer } from '@graphysdk/react/editable';

function EditableChart({ data }: { data: Data }) {
  const [mode, setMode] = useState<GraphMode>('readonly');
  const handleRef = useRef<GraphHandle>(null);
  useGraphHistoryShortcuts(handleRef);

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

  return (
    <>
      <button onClick={() => setMode(mode === 'edit' ? 'readonly' : 'edit')}>
        {mode === 'edit' ? 'Done' : 'Edit'}
      </button>
      <GraphProvider
        spec={spec}
        data={data}
        handleRef={handleRef}
        onSpecChange={setSpec}
      >
        <EditableGraphRenderer mode={mode} />
      </GraphProvider>
    </>
  );
}
```

Switching `mode` preserves the chart and its undo history, but clears the selection and closes the menu. A user can change a color, click Done and still undo it.

Passing the exact value from `onSpecChange` back as `spec` preserves history. An independently created spec starts a new history. To keep edits after a reload, see [Saving the chart](https://docs.graphy.dev/sdk-next/editing/commands-and-history.md#saving-the-chart).

## In this section

> [card] [Selecting](https://docs.graphy.dev/sdk-next/editing/selecting.md)
>
> Select chart elements, narrow a selection and use the keyboard.

> [card] [The edit menu](https://docs.graphy.dev/sdk-next/editing/menu.md)
>
> Controls available for each chart element.

> [card] [Commands & history](https://docs.graphy.dev/sdk-next/editing/commands-and-history.md)
>
> Dispatch edits, group live changes, undo, redo and save.

> [card] [Custom menus](https://docs.graphy.dev/sdk-next/editing/custom-menus.md)
>
> Replace or extend a target's menu with `editMenus`, reusing Graphy's rows.

> [card] [Editor panel](https://docs.graphy.dev/sdk-next/editing/editor-panel.md)
>
> Build a settings panel from ready-made sections.

> [card] [Without a bundler](https://docs.graphy.dev/sdk-next/editing/no-bundler.md)
>
> Add editing to a plain HTML page with a CDN bundle.

## Related

* [Provider & renderer](https://docs.graphy.dev/sdk-next/rendering/provider-and-renderer.md) — `onSpecChange`, `handleRef`, the `mode` prop
* [Commands & history](https://docs.graphy.dev/sdk-next/editing/commands-and-history.md) — the path every edit takes
* [Serializable spec](https://docs.graphy.dev/sdk-next/concepts/serializable-spec.md) — the spec `onSpecChange` hands you, and how to store it


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.