Skip to main content
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: 
npm install @graphysdk/core@next @graphysdk/editor@next

​
Basic setup

The editor requires two providers: GraphProvider from @graphysdk/core and EditorProvider from @graphysdk/editor. 
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 */}
          <Graph />
          
          {/* 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 renders the visualization
  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:

​
Complete example

Here’s a more complete editor with multiple panels: 
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 />
            <DataTable />
          </div>
          
          {/* Editor sidebar */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
            <GraphPanel />
            <AxesPanel />
            <ColorPanel />
          </div>
        </div>
      </EditorProvider>
    </GraphProvider>
  );
}

​
Next steps