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

# Editor quick start

The Graphy Editor provides ready-to-use UI components that let users customize graphs visually. It includes panels for editing data, styling, annotations and more.

## Installation

Install the editor package alongside the core SDK:

<CodeGroup>
  ```bash npm theme={null}
  npm install @graphysdk/core @graphysdk/editor
  ```

  ```bash yarn theme={null}
  yarn add @graphysdk/core @graphysdk/editor react react-dom styled-components @tiptap/core @tiptap/extension-blockquote @tiptap/extension-bold @tiptap/extension-document @tiptap/extension-hard-break @tiptap/extension-heading @tiptap/extension-italic @tiptap/extension-link @tiptap/extension-list @tiptap/extension-paragraph @tiptap/extension-strike @tiptap/extension-text @tiptap/extension-text-align @tiptap/extension-text-style @tiptap/extension-underline @tiptap/extensions @tiptap/pm @tiptap/react
  ```

  ```bash pnpm theme={null}
  pnpm add @graphysdk/core @graphysdk/editor
  ```

  ```bash bun theme={null}
  bun add @graphysdk/core @graphysdk/editor
  ```
</CodeGroup>

## Basic setup

The editor requires two providers: `GraphProvider` from `@graphysdk/core` and `EditorProvider` from `@graphysdk/editor`.

```tsx theme={null}
import { useState } from 'react';
import { GraphProvider, Graph } from '@graphysdk/core';
import { EditorProvider, GraphPanel } from '@graphysdk/editor';

function MyEditor() {
  const [config, setConfig] = useState({
    data: {
      columns: [
        { key: 'month', label: 'Month' },
        { key: 'sales', label: 'Sales' },
      ],
      rows: [
        { month: 'Jan', sales: 1000 },
        { month: 'Feb', sales: 1200 },
        { month: 'Mar', sales: 1100 },
      ],
    },
    type: 'column',
  });

  return (
    <GraphProvider
      config={config}
      onChange={(changedValues, currentValues) => {
        setConfig(currentValues);
      }}
    >
      <EditorProvider>
        <div style={{ display: 'flex', gap: '20px' }}>
          {/* The graph - use mode="editor" for inline editing */}
          <Graph mode="editor" />

          {/* Editor panel */}
          <GraphPanel />
        </div>
      </EditorProvider>
    </GraphProvider>
  );
}
```

## How it works

1. **GraphProvider** wraps your entire editor and receives the `config` and `onChange` handler
2. **EditorProvider** provides context for all editor components
3. **Graph** with `mode="editor"` renders an editable chart (inline title editing, annotations etc.)
4. **Editor panels** (like `GraphPanel`) let users modify the config

When users interact with editor panels, the `onChange` callback receives the updated config, which you can save to your state or database.

## Available editor panels

The editor includes several pre-built panels:

* **[GraphPanel](/sdk/editor/editor-panels#graph-panel)** - Chart type, legend, headline numbers, number formatting
* **[AxesPanel](/sdk/editor/editor-panels#axes-panel)** - Axis labels, ranges, tick marks
* **[ColorPanel](/sdk/editor/editor-panels#color-panel)** - Themes, color palettes, borders
* **[ElementsPanel](/sdk/editor/editor-panels#elements-panel)** - Text visibility, source attribution, text size
* **[AnnotatePanel](/sdk/editor/editor-panels#annotate-panel)** - Annotations, highlights, call-outs
* **[PowerUpPanel](/sdk/editor/editor-panels#power-ups-panel)** - Goal lines, trend lines, average lines
* **[SizePanel](/sdk/editor/editor-panels#size-panel)** - Graph dimensions and presets

## Complete example

Here's a more complete editor with multiple panels:

```tsx theme={null}
import { useState } from 'react';
import { GraphProvider, Graph } from '@graphysdk/core';
import { EditorProvider, GraphPanel, AxesPanel, ColorPanel, DataTable } from '@graphysdk/editor';

function MyEditor() {
  const [config, setConfig] = useState({
    data: {
      columns: [
        { key: 'category', label: 'Category' },
        { key: 'value', label: 'Value' },
      ],
      rows: [
        { category: 'A', value: 100 },
        { category: 'B', value: 150 },
        { category: 'C', value: 120 },
      ],
    },
    type: 'column',
    content: {
      title: 'Sales by category',
    },
  });

  return (
    <GraphProvider
      config={config}
      onChange={(changedValues, currentValues) => {
        setConfig(currentValues);
      }}
    >
      <EditorProvider>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 300px', gap: '20px' }}>
          {/* Main content area */}
          <div>
            <Graph mode="editor" />
            <DataTable />
          </div>

          {/* Editor sidebar */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
            <GraphPanel />
            <AxesPanel />
            <ColorPanel />
          </div>
        </div>
      </EditorProvider>
    </GraphProvider>
  );
}
```

## Next steps

* See all [GraphProvider props](/sdk/reference/graph-provider) and [EditorProvider props](/sdk/reference/editor-provider)
* Explore [editor panels](/sdk/editor/editor-panels) to learn about all available components
* Use the [DataTable](/sdk/editor/data-table) component to let users edit data
* Learn about [custom panel composition](/sdk/editor/editor-panels#panel-composition) to build custom editors