graph-grammar-react

The embeddable React editor for the graph-grammar engine , a complete visual graph-rewriting workbench (rule editor + live D3 canvas) you can drop into your own app, plus the building blocks to compose your own UI.

npm install graph-grammar-react react react-dom graph-grammar

ESM-only. react/react-dom are peer dependencies (v18 or v19). The graph-grammar engine is a dependency and is re-exported, so you can import the engine API straight from this package.

Embed the whole workbench

import { AppState, Workbench } from "graph-grammar-react";
import "graph-grammar-react/styles.css";

const app = new AppState(); // the controller; drives the engine + grammar

export function Editor() {
  return <Workbench app={app} />;
}

<Workbench> renders the full three-pane editor (run controls · rule list · tabbed graph canvas / rule editor). Pass header={false} to drop the built-in title bar when embedding under your own chrome, or header={<MyBar/>} to replace it.

Drive it from the outside via the app controller , e.g. load a grammar:

import { importGrammar } from "graph-grammar-react"; // re-exported from the engine
app.loadGrammar(importGrammar(json));

Compose your own layout

For finer control, mount the building blocks under an AppProvider (and ContextMenuProvider if you use the right-click menus):

import {
  AppState, AppProvider, ContextMenuProvider,
  GraphCanvas, RuleEditor, RuleList, ControlPanel,
} from "graph-grammar-react";
import "graph-grammar-react/styles.css";

const app = new AppState();

<AppProvider app={app}>
  <ContextMenuProvider>
    <ControlPanel />
    <RuleList />
    <GraphCanvas active />
    {/* or <RuleEditor /> */}
  </ContextMenuProvider>
</AppProvider>

Other exports: the useApp() / useAppEvent(...events) hooks, the individual control panels (RunControls, StrategyConfig, Stats, ExampleGallery, DataPanel), and Header.

Styling

Import the stylesheet once: import "graph-grammar-react/styles.css". It styles the editor chrome; the graph itself is drawn on a <canvas>.

It won't touch your page. Every rule is scoped to the editor's own root element (.gg-root, injected by AppProvider) , there are no global html, body, *, or bare button/input rules, so the stylesheet can't restyle your app. The scope element is display: contents, so it adds no box and can't affect your layout.

Because the package never styles html/body, the full <Workbench> fills its parent , give that parent a height:

<div style={{ height: "100vh" }}>
  <Workbench app={app} />
</div>

License

MIT