https://github.com/hydrocarbons/react-flo
React-Flo is a React based visual node graph editor
https://github.com/hydrocarbons/react-flo
bezier-curves circuit device-graph diagram graph hydrocarbons iot node ports react-draggable react-flo svg visual webpack
Last synced: 3 months ago
JSON representation
React-Flo is a React based visual node graph editor
- Host: GitHub
- URL: https://github.com/hydrocarbons/react-flo
- Owner: HydroCarbons
- License: apache-2.0
- Created: 2018-05-23T08:31:55.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-05-24T08:05:34.000Z (over 7 years ago)
- Last Synced: 2025-04-14T19:21:35.408Z (6 months ago)
- Topics: bezier-curves, circuit, device-graph, diagram, graph, hydrocarbons, iot, node, ports, react-draggable, react-flo, svg, visual, webpack
- Language: JavaScript
- Size: 586 KB
- Stars: 13
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-flo
*React-Flo* is a React based visual node graph editor
## Prepare
1. **NodeJS**
``` https://nodejs.org/en/download/ ```
2. **Webpack**
``` npm install --global webpack ```
3. **Clone this repository**
``` $ https://github.com/HydroCarbons/react-flo.git ```
4. **Switch to project***
```cd react-flo```
5. **Install Depedencies***
``` npm install ```
## Development Environment
1. Start
```
npm start
```
2. App running in your broswer
```
http://localhost:8081
```
3. Click "File>>" and post the contents of "https://github.com/HydroCarbons/react-flo/blob/master/doc/flo-graph.json" to Content input box and click "Upload" to render it in Flo.
## Production Environment
1. Create build
```
npm run build
```
2. On successful completion, 'dist' folder will be created with app files.
```
1. bundle.js
2. bundle.js.map
3. index.html
```
## License
This project is licensed under the Apache License 2.0, Copyright (c) 2018 HydroCarbons. For more information see LICENSE.md.