https://github.com/sunag/flow

JavaScript UI library
https://github.com/sunag/flow

Last synced: about 1 month ago
JSON representation

JavaScript UI library

• Host: GitHub
• URL: https://github.com/sunag/flow
• Owner: sunag
• License: mit
• Created: 2021-10-17T17:11:18.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2024-09-13T17:09:37.000Z (3 months ago)
• Last Synced: 2024-09-14T15:41:04.968Z (3 months ago)
• Language: HTML
• Homepage:
• Size: 11 MB
• Stars: 89
• Watchers: 4
• Forks: 15
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-game-engine-dev - Flow - Node-graph library. (Libraries / JavaScript)

README

        


  





   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.





  

  



:rocket: Examples

===

- [x] [Inputs](https://raw.githack.com/sunag/flow/master/examples/index.html)

- [x] [Events](https://raw.githack.com/sunag/flow/master/examples/events.html)

- [x] [Pure HTML5 ( No JavaScript )](https://raw.githack.com/sunag/flow/master/examples/pure.html)

- [x] [WIP: Node-Graph Editor](https://raw.githack.com/sunag/flow/master/examples/nodes.html)

- [x] [WIP: Loader / Serializer](https://raw.githack.com/sunag/flow/master/examples/loader.html)

### :keyboard: JavaScript

```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](https://raw.githack.com/sunag/flow/master/examples/index.html)

### :art: HTML5

Use your own JavaScript with Flow layout and style.

```html

	

		Made With Love ❤

		

			✖

		

	

	

		Node

		

			

		

	

	...

```

[Open example](https://raw.githack.com/sunag/flow/master/examples/pure.html)

## :footprints: Inspiration and special thanks

- [Three.js and Mr.doob](https://github.com/mrdoob/three.js/)

- [UIL and Lo-th](https://github.com/lo-th/uil)