is a visual editor for [Dataflow programming][dataflow_wikipedia], powered by [React]

Description | Installation | API | Examples | License

The image below is an SVG generated server side by flow-view Canvas: click it to see [online example][online_example].

[![sample view][sample_view_svg]][online_example]

The following animated gif represents a family tree. You can use autocompletion thanks to nodeList option parameter.

![The Simpsons][simpsons_gif]

Whatchers Stargazers Forks

NPM version Build Status Dependency Status Change log




flow-view is a reusable visual editor you can use to provide a GUI to your dataflow project. I am using it for a minimal Dataflow programming engine: [dflow].

The following features are implemented:

Let’s give Node.js a common visual interface. Use flow-view!

Any feedback is welcome!


Using npm

Note that flow-view requires [React] as a peer dependency. If they are not already installed, with npm do

npm install react react-dom --save-dev

I guess you need it as a development dependency to build your project, so probably you need to launch

npm install flow-view --save-dev

Using a CDN

Adding this to your HTML page

<script src="https:[email protected]/dist/flow-view.min.js"></script>


new Canvas()

flow-view Canvas constructor

Suppose your containerId is drawing. In your HTML, optionally place a div where you want to mount the canvas.

<div id="drawing"></div>

If flow-view finds a document and does not exist a DOM element with given containerId, a brand new div is created and appended to the page body.

Create an empty canvas

var Canvas = require('flow-view').Canvas

var canvas = new Canvas('drawing')

Note that nothing will happen until you call the canvas.render(view) method.


It is the DOM element container, if any. On server side, this attribute is null.


Draws a view, that is a collection of nodes and links. On server side it generates an SVG output like the one you see on top of this README.md, see [render/serverside.js example][example_render_serverside].

Follows a basic example.

  node: {
    a: {
      x: 80, y: 100,
      text: 'Drag me',
      outs: ['out1', 'out2', 'out3']
    b: {
      x: 180, y: 200,
      text: 'Click me',
      ins: ['in0', { name: 'in1', type: 'bool' }],
      outs: ['return']
  link: {
    c: {
      from: ['a', 0],
      to: ['b', 1]


Theme is a prop object with the following attributes


See [event/emitter.js][example_event_emitter] example. The following events are emitted by canvas:

name arguments
createLink link, linkId
createNode node, nodeId
createInputPin nodeId, position, pin
createOutputPin nodeId, position, pin
deleteLink linkId
deleteNode nodeId
deleteInputPin nodeId, position
deleteOutputPin nodeId, position
endDragging { nodeId: { x, y } }
selectLink linkId
selectNode nodeId


Few hotkyes are defined.

Arrows translate currently selected nodes, if also SHIFT is pressed translation is performed pixel by pixel.

ESC</kbd> cancel current selection. Keys i</kbd> and o create respectively input and output pins from current selected node. If also SHIFT is pressed, pins are deleted. ### Node spec A node describes an element and has the following attributes: * [email protected]** `Number` *x* coordinate of top left vertex * [email protected]** `Number` *y* coordinate of top left vertex * [email protected]** `String` *text* * [email protected]** `Array | undefined` *ins* list of input pins * [email protected]** `Array | undefined` *outs* list of output pins * [email protected]** `Number` *[width]*, defaults to a value depending on text lenght and number of pins. An pin can be either a string or an object with the `name` attribute which must be a string. Input pins default to string `in${position}`. Output pins default to string `out${position}`. If *ins* is undefined, the node is a root. If *outs* is undefined, the node is a leaf. ### Link spec A link describes a connection between elements and has the following attributes: * [email protected]** `Array` *from* has exactly two elements * [email protected]** `String` *from[0]* is the key of the source node * [email protected]** `Number` *from[1]* is the output pin position * [email protected]** `Array` *to* has exactly two elements * [email protected]** `String` *to[0]* is the key of the target node * [email protected]** `Number` *to[1]* is the input pin position ## Examples Try [online example][online_example]. You can also clone this repo and install dependencies to run examples locally ```bash git clone https://github.com/fibo/flow-view cd flow-view npm install ``` Every example has its homonym npm script, for example [basic/usage.js][example_basic_usage] example is launched by command ```bash npm run example_basic_usage ``` Available examples are: * [basic/usage.js][example_basic_usage] `npm run example_basic_usage` * [custom/item.js][example_custom_item] `npm run example_custom_item` * [event/emitter.js][example_event_emitter]: `npm run example_event_emitter` * [empty/canvas.js][example_empty_canvas]: `npm run example_empty_canvas` * [genealogic/tree.js][example_genealogic_tree]: `npm run example_genealogic_tree` * [render/serverside.js][example_render_serverside]: `npm run example_render_serverside` Note that examples are intended to be used for development, hence there is an overhead at start time. For instance: client side examples use hot reload, and are transpiled on the fly; also server side example will launch babel before starting. ## License [MIT](http://g14n.info/mit-license) [dflow]: http://g14n.info/dflow "dflow" [dataflow_wikipedia]: https://en.wikipedia.org/wiki/Dataflow_programming "Dataflow programming" [React]: https://facebook.github.io/react/ [example_basic_usage]: https://github.com/fibo/flow-view/blob/master/examples/basic/usage.js [example_custom_item]: https://github.com/fibo/flow-view/blob/master/examples/custom/item.js [example_empty_canvas]: https://github.com/fibo/flow-view/blob/master/examples/empty/canvas.js [example_event_emitter]: https://github.com/fibo/flow-view/blob/master/examples/event/emitter.js [example_genealogic_tree]: https://github.com/fibo/flow-view/blob/master/examples/genealogic/tree.js [example_render_serverside]: https://github.com/fibo/flow-view/blob/master/examples/render/serverside.js [online_example]: http://g14n.info/flow-view/example "Online example" [sample_view_svg]: https://g14n.info/flow-view/svg/sample-view.svg [simpsons_gif]: https://g14n.info/flow-view/media/TheSimspons.gif