react-flow-editor

Graph editor

An ui library for creating flow based editors with react and typescript/javascript.

Try the demo in your browser.

If you are interested in redux dive into the example or try the more advanced demo.

Getting started

import * as ReactDOM from 'react-dom';
import { Editor, Node, Config} from 'react-flow-editor';

// Create the initial graph
const nodes: Node[] = [
    {
        id: 'Node 1',
        name: 'First Node',
        payload: { h1: 'hello' },
        inputs: [{
            connection: [], name: 'input 1'
        }],
        outputs: []
}];

// Renders the body of each node
function resolver(data: any): JSX.Element {
    if (data.type === '') return <h2 />;
    return (
        <p>{data.payload.h1}</p>
    );
}

const config: Config = {
    resolver,
    connectionType: 'bezier',
    grid: true,
    demoMode: true,
};

ReactDOM.render(
    <div>
        <Editor config={config} nodes={nodes} />
    </div>,
    document.getElementById('root')
);

See example for usage.

Side effects

• Before creating new nodes, the node under the cursor is a direct child of document.body.
• In order to decouple editor and menu components they use window.onStartCreatingNewNode to communicate.

API

Configuration

The config interface looks as follow

export interface Config {
    resolver: (payload: any) => JSX.Element;
    connectionValidator?: (output: { nodeId: string, port: number }, input: { nodeId: string, port: number }) => boolean;
    onChanged?: (node: ChangeAction) => void;
    connectionType?: 'bezier' | 'linear';
    grid?: boolean | { size: number };
    connectionAnchorsLength?: number;
    direction?: 'ew' | 'we';
    demoMode?: boolean;
}

Property	Description
resolver	A function returning a React component which gets placed into the node
connectionValidator	A function which evaluates if a possible connection might be valid or not
onChanged	A callback which gets called when the flow graph changed
connectionType	The geometry type of the connection lines between the nodes
grid	Specifies if the grid should be rendered or not (Default is true). Optional specifies distances between the lines (size). Default is 18.
connectionAnchorsLength	Specifies the langth of the anker when using bezier as connectionType.
direction	Specifies the orientation of the input and output ports. Default is we.
demoMode	If this set to true, the Editor takes care of updating the nodes in the props. Be carful using this in production.

Nodes

A node is specified by the following interface

export interface Node {
  name: string;
  type: string;
  id: string;
  inputs: InputPort[];
  outputs: OutputPort[];
  payload?: any;
  position?: Vector2d;
  properties?: {display: 'stacked' | 'only-dots'};
  classNames?: string[];
  style: Style;
}

For now InputPort and OutputPort are identically to the Port interface:

export interface Port {
  name: string;
  connection?: Connection|Connection[];
  payload?: any;
  renderer?: (connection: Port) => JSX.Element;
}

export interface Connection {
  nodeId: string;
  port: number;
  classNames?: string[];
  notes?: string;
}

Themes

By default we recommend to import the default theme with

@import "react-flow-editor/dist/default-theme.scss";

But you can change the style of all components by coping that file and adjust its values.

Postcss support

When using postcss generated class names just forward them with

import * as style from './style.scss';

// ...

const config: Config = {
    resolver,
    connectionType: 'bezier',
    grid: true,
    demoMode: true,
    direction: 'we',
    style
};
// ...

See Example.

Roadmap

• Editing the title of the node
• Grouping nodes (similar to Blender)
• Optimize hooking
• Fix zooming and scrolling

Contributing

This library is very young. So please consider that it might have some bugs, but I will try to fix them, when they get reported.

If you have any problems or miss an important feature:

Feel free to create a PR or report an issue!