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

# EditorProvider

`EditorProvider` is the context provider for editor components. It manages editor-specific state and must wrap all editor panels, sections and other controls. It should be placed inside a `GraphProvider`.

## Basic usage

```tsx theme={null}
import { GraphProvider } from '@graphysdk/core';
import { EditorProvider } from '@graphysdk/editor';

<GraphProvider config={config}>
  <EditorProvider>{/* Editor panels / sections / controls go here */}</EditorProvider>
</GraphProvider>;
```

## Props

<ParamField path="children" type="React.ReactNode" required>
  Child components to be wrapped by the provider.
</ParamField>

<ParamField path="components" type="EditorComponentRegistry" optional>
  List of overrides for internal components. See [`EditorComponentRegistry`](/sdk/reference/editor-component-registry)
</ParamField>

<ParamField path="customColorInputs" type="CustomColorInputConfig[]" optional>
  Custom color configuration for series styling in the editor.

  By default, the editor automatically generates color inputs based on the data series. Use this prop to override that behavior with custom configurations.

  **Type:** `Array<{ text: string, seriesConfigKey: string, symbol?: LegendSymbolType, color?: string }>`
</ParamField>

```tsx theme={null}
const customColorInputs = [
  { text: 'Revenue', seriesConfigKey: 'revenue' },
  { text: 'Profit', seriesConfigKey: 'profit', symbol: 'bar' },
];

<EditorProvider customColorInputs={customColorInputs}>{/* Editor panels */}</EditorProvider>;
```

<ParamField path="themeOptions" type="GraphThemeOption[]" optional>
  Available theme options to display in the editor theme selector.

  Each option has a `label` (string or function receiving a translate function), a `value` (`GraphTheme`), and an optional `renderIcon` callback.

  You can use the pre-built `defaultThemeOptions` which provides light and dark options with icons.
</ParamField>

```tsx theme={null}
import { graphyLightTheme, graphyDarkTheme, SunIcon, MoonIcon } from '@graphysdk/core';

const themeOptions = [
  { label: 'Light', value: graphyLightTheme, renderIcon: () => <SunIcon /> },
  { label: 'Dark', value: graphyDarkTheme, renderIcon: () => <MoonIcon /> },
  { label: 'Custom', value: myCustomTheme },
];

<EditorProvider themeOptions={themeOptions}>{/* Editor panels */}</EditorProvider>;
```

Or use the built-in defaults:

```tsx theme={null}
import { defaultThemeOptions } from '@graphysdk/editor';

<EditorProvider themeOptions={defaultThemeOptions}>{/* Editor panels */}</EditorProvider>;
```

<ParamField path="onThemeChange" type="(value: GraphTheme) => void" optional>
  Callback invoked when the user changes the graph theme in the editor.
</ParamField>

```tsx theme={null}
<EditorProvider
  onThemeChange={(theme) => {
    console.log('Theme changed to:', theme.id);
  }}
>
  {/* Editor panels */}
</EditorProvider>
```

<ParamField path="theme" type="EditorTheme" optional>
  Customize the editor UI theme (typography, colors, font weights, etc.). Defaults to `editorLightTheme`. You can use the pre-built `editorLightTheme` or `editorDarkTheme`, or create a custom theme.

  See [EditorTheme](/sdk/reference/editor-theme) for the full type definition and available font tokens.
</ParamField>

```tsx theme={null}
import { editorLightTheme } from '@graphysdk/editor'; // or editorDarkTheme

const customEditorTheme = {
  ...editorLightTheme,
  values: {
    ...editorLightTheme.values,
    fontSectionTitle: '600 14px Inter',
  },
};

<EditorProvider theme={customEditorTheme}>{/* Editor panels with custom fonts */}</EditorProvider>;
```

## Complete example

```tsx theme={null}
import { useState } from 'react';
import { GraphProvider, Graph, graphyLightTheme, graphyDarkTheme } from '@graphysdk/core';
import { EditorProvider, GraphPanel, defaultThemeOptions, editorLightTheme } from '@graphysdk/editor';
import type { GraphConfig, GraphTheme } from '@graphysdk/core';

function MyEditor() {
  const [config, setConfig] = useState<GraphConfig>({
    data: {
      columns: [
        { key: 'category', label: 'Category' },
        { key: 'value', label: 'Value' },
      ],
      rows: [
        { category: 'A', value: 100 },
        { category: 'B', value: 200 },
      ],
    },
    type: 'column',
  });

  return (
    <GraphProvider config={config} onChange={(update) => setConfig({ ...config, ...update })}>
      <EditorProvider
        themeOptions={defaultThemeOptions}
        onThemeChange={(theme) => {
          console.log('User selected theme:', theme.id);
        }}
        theme={editorLightTheme}
      >
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
          <Graph />
          <GraphPanel />
        </div>
      </EditorProvider>
    </GraphProvider>
  );
}
```

## Type definitions

```tsx theme={null}
interface EditorProviderProps {
  children: React.ReactNode;
  customColorInputs?: CustomColorInputConfig[];
  themeOptions?: GraphThemeOption[];
  onThemeChange?: GraphThemeChangeHandler;
  theme?: EditorTheme;
}

interface CustomColorInputConfig {
  text: string;
  seriesConfigKey: SeriesConfigKey;
  symbol?: LegendSymbolType;
  color?: string;
}

interface GraphThemeOption {
  label: string | ((t: TranslateFunction) => string);
  value: GraphTheme;
  renderIcon?: () => React.ReactNode;
}

type GraphThemeChangeHandler = (value: GraphTheme) => void;
```

## Related

* [GraphProvider](/sdk/reference/graph-provider) - State management and configuration
* [EditorTheme](/sdk/reference/editor-theme) - Editor theme type and font tokens
* [Editor panels](/sdk/editor/editor-panels) - Available editor components
* [Editor quick start](/sdk/editor/index) - Getting started with the editor