[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-10189":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":23,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":41,"readmeContent":42,"aiSummary":43,"trendingCount":16,"starSnapshotCount":16,"syncStatus":44,"lastSyncTime":45,"discoverSource":46},10189,"litegraph.js","jagenjo\u002Flitegraph.js","jagenjo","A graph node engine and editor written in Javascript similar to PD or UDK Blueprints, comes with its own editor in HTML5 Canvas2D. The engine can run client side or server side using Node. It allows to export graphs as JSONs to be included in applications independently.","",null,"JavaScript",8043,836,143,130,0,1,12,52,8,39.77,"MIT License",false,"master",true,[27,28,29,30,31,32,33,34,35,36,37,38,39,40],"blueprints","canvas2d","editor","graph","graphs","javascript","modular","nocode","node-graph","nodejs","nodes","visual","visual-programming","workflow","2026-06-12 02:02:18","# litegraph.js\r\n\r\nA library in Javascript to create graphs in the browser similar to Unreal Blueprints. Nodes can be programmed easily and it includes an editor to construct and tests the graphs.\r\n\r\nIt can be integrated easily in any existing web applications and graphs can be run without the need of the editor.\r\n\r\nTry it in the [demo site](https:\u002F\u002Ftamats.com\u002Fprojects\u002Flitegraph\u002Feditor).\r\n\r\n![Node Graph](imgs\u002Fnode_graph_example.png \"WebGLStudio\")\r\n\r\n## Features\r\n- Renders on Canvas2D (zoom in\u002Fout and panning, easy to render complex interfaces, can be used inside a WebGLTexture)\r\n- Easy to use editor (searchbox, keyboard shortcuts, multiple selection, context menu, ...)\r\n- Optimized to support hundreds of nodes per graph (on editor but also on execution)\r\n- Customizable theme (colors, shapes, background)\r\n- Callbacks to personalize every action\u002Fdrawing\u002Fevent of nodes\r\n- Subgraphs (nodes that contain graphs themselves)\r\n- Live mode system (hides the graph but calls nodes to render whatever they want, useful to create UIs)\r\n- Graphs can be executed in NodeJS\r\n- Highly customizable nodes (color, shape, slots vertical or horizontal, widgets, custom rendering)\r\n- Easy to integrate in any JS application (one single file, no dependencies)\r\n- Typescript support\r\n\r\n## Nodes provided\r\nAlthough it is easy to create new node types, LiteGraph comes with some default nodes that could be useful for many cases:\r\n- Interface (Widgets)\r\n- Math (trigonometry, math operations)\r\n- Audio (AudioAPI and MIDI)\r\n- 3D Graphics (Postprocessing in WebGL)\r\n- Input (read Gamepad)\r\n\r\n## Installation\r\n\r\nYou can install it using npm \r\n```\r\nnpm install litegraph.js\r\n```\r\n\r\nOr downloading the ```build\u002Flitegraph.js``` and ```css\u002Flitegraph.css``` version from this repository.\r\n\r\n## First project ##\r\n\r\n```html\r\n\u003Chtml>\r\n\u003Chead>\r\n\t\u003Clink rel=\"stylesheet\" type=\"text\u002Fcss\" href=\"litegraph.css\">\r\n\t\u003Cscript type=\"text\u002Fjavascript\" src=\"litegraph.js\">\u003C\u002Fscript>\r\n\u003C\u002Fhead>\r\n\u003Cbody style='width:100%; height:100%'>\r\n\u003Ccanvas id='mycanvas' width='1024' height='720' style='border: 1px solid'>\u003C\u002Fcanvas>\r\n\u003Cscript>\r\nvar graph = new LGraph();\r\n\r\nvar canvas = new LGraphCanvas(\"#mycanvas\", graph);\r\n\r\nvar node_const = LiteGraph.createNode(\"basic\u002Fconst\");\r\nnode_const.pos = [200,200];\r\ngraph.add(node_const);\r\nnode_const.setValue(4.5);\r\n\r\nvar node_watch = LiteGraph.createNode(\"basic\u002Fwatch\");\r\nnode_watch.pos = [700,200];\r\ngraph.add(node_watch);\r\n\r\nnode_const.connect(0, node_watch, 0 );\r\n\r\ngraph.start()\r\n\u003C\u002Fscript>\r\n\u003C\u002Fbody>\r\n\u003C\u002Fhtml>\r\n```\r\n\r\n## How to code a new Node type\r\n\r\nHere is an example of how to build a node that sums two inputs:\r\n\r\n```javascript\r\n\u002F\u002Fnode constructor class\r\nfunction MyAddNode()\r\n{\r\n  this.addInput(\"A\",\"number\");\r\n  this.addInput(\"B\",\"number\");\r\n  this.addOutput(\"A+B\",\"number\");\r\n  this.properties = { precision: 1 };\r\n}\r\n\r\n\u002F\u002Fname to show\r\nMyAddNode.title = \"Sum\";\r\n\r\n\u002F\u002Ffunction to call when the node is executed\r\nMyAddNode.prototype.onExecute = function()\r\n{\r\n  var A = this.getInputData(0);\r\n  if( A === undefined )\r\n    A = 0;\r\n  var B = this.getInputData(1);\r\n  if( B === undefined )\r\n    B = 0;\r\n  this.setOutputData( 0, A + B );\r\n}\r\n\r\n\u002F\u002Fregister in the system\r\nLiteGraph.registerNodeType(\"basic\u002Fsum\", MyAddNode );\r\n\r\n```\r\n\r\nor you can wrap an existing function:\r\n\r\n```js\r\nfunction sum(a,b)\r\n{\r\n   return a+b;\r\n}\r\n\r\nLiteGraph.wrapFunctionAsNode(\"math\u002Fsum\",sum, [\"Number\",\"Number\"],\"Number\");\r\n```\r\n\r\n## Server side\r\n\r\nIt also works server-side using NodeJS although some nodes do not work in server (audio, graphics, input, etc).\r\n\r\n```js\r\nvar LiteGraph = require(\".\u002Flitegraph.js\").LiteGraph;\r\n\r\nvar graph = new LiteGraph.LGraph();\r\n\r\nvar node_time = LiteGraph.createNode(\"basic\u002Ftime\");\r\ngraph.add(node_time);\r\n\r\nvar node_console = LiteGraph.createNode(\"basic\u002Fconsole\");\r\nnode_console.mode = LiteGraph.ALWAYS;\r\ngraph.add(node_console);\r\n\r\nnode_time.connect( 0, node_console, 1 );\r\n\r\ngraph.start()\r\n```\r\n\r\n\r\n## Projects using it\r\n\r\n### [comfyUI](https:\u002F\u002Fgithub.com\u002Fcomfyanonymous\u002FComfyUI)\r\n![screenshot](https:\u002F\u002Fgithub.com\u002Fcomfyanonymous\u002FComfyUI\u002Fblob\u002F6efe561c2a7321501b1b27f47039c7616dda1860\u002Fcomfyui_screenshot.png)\r\n\r\n### [webglstudio.org](http:\u002F\u002Fwebglstudio.org)\r\n\r\n![WebGLStudio](imgs\u002Fwebglstudio.gif \"WebGLStudio\")\r\n\r\n### [MOI Elephant](http:\u002F\u002Fmoiscript.weebly.com\u002Felephant-systegraveme-nodal.html)\r\n\r\n![MOI Elephant](imgs\u002Felephant.gif \"MOI Elephant\")\r\n\r\n### Mynodes\r\n\r\n![MyNodes](imgs\u002Fmynodes.png \"MyNodes\")\r\n\r\n## Utils\r\n-----\r\n\r\nIt includes several commands in the utils folder to generate doc, check errors and build minifyed version.\r\n\r\n\r\n## Demo\r\n-----\r\nThe demo includes some examples of graphs. In order to try them you can visit [demo site](http:\u002F\u002Ftamats.com\u002Fprojects\u002Flitegraph\u002Feditor) or install it on your local computer, to do so you need `git`, `node` and `npm`. Given those dependencies are installed, run the following commands to try it out:\r\n```sh\r\n$ git clone https:\u002F\u002Fgithub.com\u002Fjagenjo\u002Flitegraph.js.git\r\n$ cd litegraph.js\r\n$ npm install\r\n$ node utils\u002Fserver.js\r\nExample app listening on port 80!\r\n```\r\nOpen your browser and point it to http:\u002F\u002Flocalhost:8000\u002F. You can select a demo from the dropdown at the top of the page.\r\n\r\n## Feedback\r\n--------\r\n\r\nYou can write any feedback to javi.agenjo@gmail.com\r\n\r\n## Contributors\r\n\r\n- atlasan\r\n- kriffe\r\n- rappestad\r\n- InventivetalentDev\r\n- NateScarlet\r\n- coderofsalvation\r\n- ilyabesk\r\n- gausszhou\r\n\r\n\r\n\r\n","litegraph.js 是一个用 JavaScript 编写的图节点引擎和编辑器，类似于 PD 或 UDK Blueprints，并且自带 HTML5 Canvas2D 编辑器。其核心功能包括支持在浏览器或 NodeJS 环境下运行，提供易用的编辑器界面以构建和测试图形，以及将图形导出为 JSON 格式以便独立集成到其他应用中。技术特点涵盖高效的性能优化、丰富的自定义选项（如主题定制、节点样式调整）和支持多种内置节点类型（接口、数学运算、音频处理等）。该工具非常适合需要可视化编程或工作流管理的场景，特别是在游戏开发、音频处理及WebGL项目中。",2,"2026-06-11 03:27:06","top_topic"]