https://github.com/NorthwoodsSoftware/gojs-react-basic
An example project demonstrating usage of GoJS and React together
https://github.com/NorthwoodsSoftware/gojs-react-basic
diagram gojs gojs-react react
Last synced: 11 months ago
JSON representation
An example project demonstrating usage of GoJS and React together
- Host: GitHub
- URL: https://github.com/NorthwoodsSoftware/gojs-react-basic
- Owner: NorthwoodsSoftware
- Created: 2019-09-04T18:03:29.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2025-05-07T20:45:59.000Z (about 1 year ago)
- Last Synced: 2025-06-19T12:44:17.566Z (12 months ago)
- Topics: diagram, gojs, gojs-react, react
- Language: TypeScript
- Homepage:
- Size: 713 KB
- Stars: 94
- Watchers: 6
- Forks: 42
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# gojs-react-basic
### By Northwoods Software for [GoJS](https://gojs.net)
This project provides a basic example of using GoJS in a React app.
Check out the [Intro page on using GoJS with React](https://gojs.net/latest/intro/react.html) for more information.
It makes use of the [gojs-react](https://github.com/NorthwoodsSoftware/gojs-react) package to handle some boilerplate for setting up and tearing down a Diagram component.
When running the sample, try moving around nodes, editing text, relinking, undoing (Ctrl-Z), etc. within the diagram
and you'll notice the changes are reflected in the inspector area. You'll also notice that changes
made in the inspector are reflected in the diagram. If you use the React dev tools,
you can inspect the React state and see it updated as changes happen.
For additional samples, see [gojs-react-samples](https://github.com/NorthwoodsSoftware/gojs-react-samples).
This project uses [immer](https://immerjs.github.io/immer/) to simplify state update operations.
## Installation
Start by running npm install to install all necessary dependencies.
## Available Scripts
In the project directory, you can run:
### `npm run dev`
Runs the app in the development mode.
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.