react-graph-editor

A React framework for building graph-based editors

Usage no npm install needed!

<script type="module">
  import reactGraphEditor from 'https://cdn.skypack.dev/react-graph-editor';
</script>

README

React Graph Editor

Heavily based on Draft.js, React Graph Editor is a framework for building graph-based editors like the Rasen Editor or Focus.

Example

import React from 'react';
import ReactDOM from 'react-dom';
import {
    Graph,
    GraphState,
} from 'react-graph-editor';

class Editor extends React.Component {
    constructor(props) {
        super(props);
        this.state = {graph: GraphState.createEmpty()};
        this.onChange = graph => this.setState({graph});
    }

    render() {
        const {graph} = this.state;
        return <Graph value={graph} onChange={this.onChange} />;
    }
}

ReactDOM.render(
    <Editor />,
    document.getElementById('container')
);

Docs

See the docs folder.