https://github.com/juliandavidmr/onboard
Onboard is an extensible framework for visual programming. Onboard allows you to create a node editor from the browser. You can define nodes and events that allow you to create instructions to process data in your editor.
https://github.com/juliandavidmr/onboard
d3 node-editor visual-programming
Last synced: 11 months ago
JSON representation
Onboard is an extensible framework for visual programming. Onboard allows you to create a node editor from the browser. You can define nodes and events that allow you to create instructions to process data in your editor.
- Host: GitHub
- URL: https://github.com/juliandavidmr/onboard
- Owner: juliandavidmr
- License: mit
- Created: 2020-11-01T02:49:20.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2020-11-28T03:17:24.000Z (over 5 years ago)
- Last Synced: 2025-04-07T23:11:23.063Z (about 1 year ago)
- Topics: d3, node-editor, visual-programming
- Language: TypeScript
- Homepage:
- Size: 425 KB
- Stars: 12
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# **Onboard**
Onboard is an extensible framework for visual programming. Onboard allows you to create a node editor from the browser. You can define nodes and events that allow you to create instructions to process data in your editor.
Onboard is based on [d3.js](https://d3js.org/).
## How it works?
- [x] No canvas.
- [x] Based on [d3.js](https://d3js.org/).
## Extensions
- [x] Connectors.
- [ ] Autopositioning.
- [ ] minimap.
## TODO
- [ ] Export/Import JSON.
- [x] Events.
- [x] Node Connector.
- [ ] Pin protection.
- [ ] Control: Input
- [ ] Control: Label.
- [ ] Avoid cyclic connections.
- [ ] Demo website.
## Example
```ts
import { Editor, NodeComponent, Pin } from "./Onboard";
import * as Connector from "./Onboard/extensions/connectors.ext";
const root = "#root";
const Node1 = new NodeComponent({ title: "Node1" });
const Node2 = new NodeComponent({ title: "Node2" });
const Node3 = new NodeComponent({ title: "Node3" });
const editor = new Editor({
name: "schema1",
root,
nodes: [Node1, Node2, Node3]
});
Node1.addInput(new Pin("out1", "Output 1"));
Node2.addInput(new Pin("in1", "Input 1"));
Node2.addInput(new Pin("in2", "Input 2"));
Node2.addOutput(new Pin("out1", "Output 1"));
Node3.addInput(new Pin("in1", "Input 1"));
Node3.addOutput(new Pin("out1", "Output 1"));
Node3.addOutput(new Pin("out2", "Output 2"));
Node3.addOutput(new Pin("out3", "Output 3"));
editor.install(Connector);
```
## Development
1. Clone
2. `npm install`
3. `npm run start`
4. Open http://localhost:1234
**License**
[MIT](./LICENSE)
**You are free to contribute to this project. :)**