Skip to main content
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

import { GraphProvider } from '@graphysdk/core';
import { EditorProvider } from '@graphysdk/editor';

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

​
Props

​
children
React.ReactNode
required
Editor components to render within the provider.
​
customColorInputs
CustomColorInputConfig[]
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 }>
const customColorInputs = [
  { text: 'Revenue', seriesConfigKey: 'revenue' },
  { text: 'Profit', seriesConfigKey: 'profit', symbol: 'bar' }
];

<EditorProvider customColorInputs={customColorInputs}>
  {/* Editor panels */}
</EditorProvider>
​
themeOptions
GraphThemeOption[]
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.
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: 
import { defaultThemeOptions } from '@graphysdk/editor';

<EditorProvider themeOptions={defaultThemeOptions}>
  {/* Editor panels */}
</EditorProvider>
​
onThemeChange
(value: GraphTheme) => void
Callback invoked when the user changes the graph theme in the editor.
<EditorProvider 
  onThemeChange={(theme) => {
    console.log('Theme changed to:', theme.id);
  }}
>
  {/* Editor panels */}
</EditorProvider>
​
theme
EditorTheme
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 for the full type definition and available font tokens.
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

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

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;