{"id":13534384,"url":"https://github.com/sunag/flow","last_synced_at":"2025-11-13T22:50:41.327Z","repository":{"id":59460089,"uuid":"418201206","full_name":"sunag/flow","owner":"sunag","description":"JavaScript UI library","archived":false,"fork":false,"pushed_at":"2024-11-26T02:27:18.000Z","size":11507,"stargazers_count":93,"open_issues_count":2,"forks_count":15,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-09T00:25:23.807Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sunag.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-10-17T17:11:18.000Z","updated_at":"2025-02-06T08:49:22.000Z","dependencies_parsed_at":"2024-01-03T04:06:29.401Z","dependency_job_id":"104a7665-6cb1-4cd8-b12a-139ad7ac861f","html_url":"https://github.com/sunag/flow","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sunag%2Fflow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sunag%2Fflow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sunag%2Fflow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sunag%2Fflow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sunag","download_url":"https://codeload.github.com/sunag/flow/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246989498,"owners_count":20865306,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T07:01:31.855Z","updated_at":"2025-11-13T22:50:36.307Z","avatar_url":"https://github.com/sunag.png","language":"HTML","readme":"\u003ch1 align=\"center\"\u003e\n  \u003cimg alt=\"flow\" height=\"350px\" src=\"https://raw.githack.com/sunag/flow/master/media/flow-box-shadow.png\"/\u003e\n\u003c/h1\u003e\n\n\u003ch3 align=\"center\"\u003e\n   Node-Graph, lightweight, cross-browser UI library. \n\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n  Flow is basead on native components of \u003cb\u003eHTML5\u003c/b\u003e and the code on \u003cb\u003eES6\u003c/b\u003e. It is modular, three-shaking and class-based.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/build-passing-green\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/flow.min.js-17kB-0099FF\"\u003e\n\u003c/p\u003e\n\n:rocket: Examples\n===\n\n- [x] [Inputs](https://raw.githack.com/sunag/flow/master/examples/index.html)\n- [x] [Events](https://raw.githack.com/sunag/flow/master/examples/events.html)\n- [x] [Pure HTML5 ( No JavaScript )](https://raw.githack.com/sunag/flow/master/examples/pure.html)\n- [x] [WIP: Node-Graph Editor](https://raw.githack.com/sunag/flow/master/examples/nodes.html)\n- [x] [WIP: Loader / Serializer](https://raw.githack.com/sunag/flow/master/examples/loader.html)\n\n### :keyboard: JavaScript\n\n```javascript\nimport * as Flow from '../build/flow.module.js';\n\nconst object = {\n\t'string': 'Hello World!',\n\t'color': 0x339933,\n\t'number': 100,\n\t'slider': .5,\n\t'text': 'Text Area'\n};\n\nconst node = new Flow.PanelNode( 'Panel', 'center' );\nnode.addString( object, 'string' );\nnode.addColor( object, 'color' );\nnode.addNumber( object, 'number' );\nnode.addSlider( object, 'slider', 0, 1 );\nnode.addText( object, 'text' );\nnode.addButton( 'My Button' );\n\ndocument.body.appendChild( node.dom );\n```\n\n[Open example](https://raw.githack.com/sunag/flow/master/examples/index.html)\n\n### :art: HTML5\n\nUse your own JavaScript with Flow layout and style.\n\n```html\n\u003cf-node class=\"center rounded\"\u003e\n\t\u003cf-element class=\"title left\"\u003e\n\t\t\u003cspan\u003eMade With Love ❤\u003c/span\u003e\n\t\t\u003cf-toolbar\u003e\n\t\t\t\u003cspan class=\"button\"\u003e✖\u003c/span\u003e\n\t\t\u003c/f-toolbar\u003e\n\t\u003c/f-element\u003e\n\t\u003cf-element\u003e\n\t\t\u003cf-label\u003eNode\u003c/f-label\u003e\n\t\t\u003cf-inputs\u003e\n\t\t\t\u003cinput type=\"text\" value=\"Hello World!\"/\u003e\n\t\t\u003c/f-inputs\u003e\n\t\u003c/f-element\u003e\n\t...\n\u003c/f-node\u003e\n```\n\n[Open example](https://raw.githack.com/sunag/flow/master/examples/pure.html)\n\n## :footprints: Inspiration and special thanks\n\n- [Three.js and Mr.doob](https://github.com/mrdoob/three.js/)\n- [UIL and Lo-th](https://github.com/lo-th/uil)\n","funding_links":[],"categories":["Libraries"],"sub_categories":["JavaScript"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsunag%2Fflow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsunag%2Fflow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsunag%2Fflow/lists"}