Node-Graph, lightweight, cross-browser UI library.

Flow is basead on native components of HTML5 and the code on ES6. It is modular, three-shaking and class-based.

🚀 Examples

• Inputs
• Events
• Pure HTML5 ( No JavaScript )
• WIP: Node-Graph Editor
• WIP: Loader / Serializer

⌨️ JavaScript

import * as Flow from '../build/flow.module.js';

const object = {
	'string': 'Hello World!',
	'color': 0x339933,
	'number': 100,
	'slider': .5,
	'text': 'Text Area'
};

const node = new Flow.PanelNode( 'Panel', 'center' );
node.addString( object, 'string' );
node.addColor( object, 'color' );
node.addNumber( object, 'number' );
node.addSlider( object, 'slider', 0, 1 );
node.addText( object, 'text' );
node.addButton( 'My Button' );

document.body.appendChild( node.dom );

Open example

🎨 HTML5

Use your own JavaScript with Flow layout and style.

<f-node class="center rounded">
	<f-element class="title left">
		<span>Made With Love ❤</span>
		<f-toolbar>
			<span class="button">✖</span>
		</f-toolbar>
	</f-element>
	<f-element>
		<f-label>Node</f-label>
		<f-inputs>
			<input type="text" value="Hello World!"/>
		</f-inputs>
	</f-element>
	...
</f-node>

Open example

👣 Inspiration and special thanks

• Three.js and Mr.doob
• UIL and Lo-th