Skip to content
A set of React components to manage GoJS Diagrams, Palettes, and Overviews
TypeScript JavaScript
Branch: master
Clone or download
Latest commit 6444e93 Nov 13, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github add issue template Nov 6, 2019
scripts Initial commit Oct 21, 2019
.gitattributes Initial commit Oct 21, 2019
.gitignore Update .gitignore Oct 21, 2019 Update for GoJS 2.1 release Nov 6, 2019 Initial commit Oct 21, 2019 Update Nov 13, 2019
package-lock.json Fix links, add prepare script Nov 8, 2019
package.json Fix links, add prepare script Nov 8, 2019
rollup.config.js Initial commit Oct 21, 2019
tsconfig.json Initial commit Oct 21, 2019


By Northwoods Software for GoJS 2.1

This project provides React components for GoJS Diagrams, Palettes, and Overviews to simplify usage of GoJS within a React application. See the gojs-react-basic project for example usage and the Intro page on using GoJS with React for more information. Some more detail on the implementation of these components can be found here.


gojs-react can be installed via NPM or used via CDN. This package has peer dependencies on GoJS and React, so make sure those are also installed or included on your page.


npm install --save gojs-react


<script src=""></script>


This package provides three components - ReactDiagram, ReactPalette, and ReactOverview - corresponding to the related GoJS classes. The gojs-react-basic repository provides example usage. Feel free to use these components as examples for setting up your own React components for GoJS. If you'd like to do so, we suggest reading more about the implementation of these components here.


  nodeDataArray={[{ key: 0, text: 'Alpha' }]}


Component Props


Specifies a function that is reponsible for initializing and returning a GoJS Diagram, Palette, or Overview. In the case of an Overview, this is an optional property and when not provided, an Overview with default properties and centered content will be created.

function initDiagram() {
  const $ = go.GraphObject.make;

  const diagram = $(go.Diagram,
      'undoManager.isEnabled': true,
      model: $(go.GraphLinksModel, {
        linkKeyProperty: 'key'  // this should always be set when using a GraphLinksModel

  diagram.nodeTemplate =
    $(go.Node, 'Auto',  // the Shape will go around the TextBlock
      $(go.Shape, 'RoundedRectangle', { strokeWidth: 0, fill: 'white' },
        // Shape.fill is bound to
        new go.Binding('fill', 'color')),
        { margin: 8 },  // some room around the text
        // TextBlock.text is bound to
        new go.Binding('text', 'key'))

  return diagram;


Specifies the CSS classname to add to the rendered div. This should usually specify a width/height.

.diagram-component {
  width: 400px;
  height: 400px;
  border: 1px solid black;

nodeDataArray (ReactDiagram and ReactPalette only)

Specifies the array of nodes for the Diagram's model.

nodeDataArray: [
  { key: 'Alpha', color: 'lightblue' },
  { key: 'Beta', color: 'orange' },
  { key: 'Gamma', color: 'lightgreen' },
  { key: 'Delta', color: 'pink' }

Optional - linkDataArray (ReactDiagram and ReactPalette only)

Specifies the array of links for the Diagram's model.

linkDataArray: [
  { key: -1, from: 'Alpha', to: 'Beta' },
  { key: -2, from: 'Alpha', to: 'Gamma' },
  { key: -3, from: 'Beta', to: 'Beta' },
  { key: -4, from: 'Gamma', to: 'Delta' },
  { key: -5, from: 'Delta', to: 'Alpha' }

Optional - modelData (ReactDiagram and ReactPalette only)

Specifies a modelData object for the Diagram's model.

skipsDiagramUpdate (ReactDiagram only)

Specifies whether the component should skip updating, often set when updating state from a GoJS model change. This flag is checked during shouldComponentUpdate.

onModelChange (ReactDiagram only)

Specifies a function to be called when a GoJS transaction has completed. This function will typically be responsible for updating React/Redux state.

function handleModelChange(data) {
  const insertedNodeKeys = data.insertedNodeKeys;
  const modifiedNodeData = data.modifiedNodeData;
  const removedNodeKeys = data.removedNodeKeys;
  const insertedLinkKeys = data.insertedLinkKeys;
  const modifiedLinkData = data.modifiedLinkData;
  const removedLinkKeys = data.removedLinkKeys;

  // ... make state changes

observedDiagram (ReactOverview only)

Specifies the go.Diagram which the Overview will observe.


This project is intended to be used alongside GoJS, and is covered by the GoJS software license.

Copyright 1998-2019 by Northwoods Software Corporation.

You can’t perform that action at this time.