{"id":13459781,"url":"https://github.com/thedmd/imgui-node-editor","last_synced_at":"2025-05-14T16:13:54.732Z","repository":{"id":39986098,"uuid":"113756383","full_name":"thedmd/imgui-node-editor","owner":"thedmd","description":"Node Editor built using Dear ImGui","archived":false,"fork":false,"pushed_at":"2024-07-21T23:47:56.000Z","size":13566,"stargazers_count":3913,"open_issues_count":105,"forks_count":578,"subscribers_count":87,"default_branch":"master","last_synced_at":"2025-04-03T06:07:09.506Z","etag":null,"topics":["blueprint","blueprints","dear-imgui","game-development","gamedev","imgui","immediate-gui","middleware","node-editor"],"latest_commit_sha":null,"homepage":"","language":"C++","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/thedmd.png","metadata":{"files":{"readme":"docs/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":"2017-12-10T14:25:36.000Z","updated_at":"2025-04-01T18:15:45.000Z","dependencies_parsed_at":"2022-07-14T08:17:13.465Z","dependency_job_id":"bfc144c9-1368-4857-b99f-117bd3602199","html_url":"https://github.com/thedmd/imgui-node-editor","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thedmd%2Fimgui-node-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thedmd%2Fimgui-node-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thedmd%2Fimgui-node-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thedmd%2Fimgui-node-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thedmd","download_url":"https://codeload.github.com/thedmd/imgui-node-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248202561,"owners_count":21064370,"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":["blueprint","blueprints","dear-imgui","game-development","gamedev","imgui","immediate-gui","middleware","node-editor"],"created_at":"2024-07-31T10:00:29.008Z","updated_at":"2025-04-10T10:49:25.706Z","avatar_url":"https://github.com/thedmd.png","language":"C++","readme":"# Node Editor in ImGui\n\n[![build](https://github.com/thedmd/imgui-node-editor/actions/workflows/build.yml/badge.svg)](https://github.com/thedmd/imgui-node-editor/actions/workflows/build.yml)\n\n## About\n\nAn implementation of node editor with ImGui-like API.\n\nProject purpose is to serve as a basis for more complex solutions like blueprint editors.\n\n![node_editor_overview](https://user-images.githubusercontent.com/1197433/89328475-c01bc680-d68d-11ea-88bf-8c4155480927.gif)\n\nNode Editor is build around an idea \"draw your content, we do the rest\", which mean interactions are handled by editor, content rendering is handled by user. Editor will take care of:\n * placing your node in the word\n * dragging nodes\n * zoom and scrolling\n * selection\n * various interaction that can be queried by API (creation, deletion, selection changes, etc.)\n\nHere are some highlights:\n * Node movement and selection is handled internally\n * Node and pin contents are fully customizable\n * Fully styled, default theme is modeled after UE4 blueprints\n    - Flexible enough to produce such nodes:\n\n        ![image](https://user-images.githubusercontent.com/1197433/60381408-c3895b00-9a54-11e9-8312-d9fc9af63347.png)\n        ![image](https://user-images.githubusercontent.com/1197433/60381400-a3599c00-9a54-11e9-9c51-a88f25f7db07.png)\n        ![image](https://user-images.githubusercontent.com/1197433/60381589-7d81c680-9a57-11e9-87b1-9f73ec33bea4.png)\n    - Customizable links based on Bézier curves:\n\n        ![image](https://user-images.githubusercontent.com/1197433/60381475-ac973880-9a55-11e9-9ad9-5862975cd2b8.png)\n        ![image](https://user-images.githubusercontent.com/1197433/60381467-9db08600-9a55-11e9-9868-2ae849f67de9.png)\n        ![image](https://user-images.githubusercontent.com/1197433/60381488-cd5f8e00-9a55-11e9-8346-1f4c8d6bea22.png)\n * Automatic highlights for nodes, pins and links:\n\n    ![image](https://user-images.githubusercontent.com/1197433/60381536-9e95e780-9a56-11e9-80bb-dad0d3d9557a.png)\n * Smooth navigation and selection\n * Node state can be saved in user context, so layout will not break\n * Selection rectangles and group dragging\n * Context menu support\n * Basic shortcuts support (cut/copy/paste/delete)\n * ImGui style API\n\nEditor is used to implement blueprint editor in Spark CE engine, it proved itself there by allowing to do everything we needed. Therefore it is now slowly moving into stable state from beeing a prototype.\n\nNote: Project recently was restructured to mimic ImGui layout.\n\nPlease report issues or questions if something isn't clear.\n\n## Dependencies\n\n * Vanilla ImGui 1.72+\n * C++14\n\n### Dependencies for examples:\n * https://github.com/thedmd/imgui/tree/feature/layout (used in blueprints sample only)\n\n### Optional extension you can pull into your local copy of ImGui node editor can take advantage of:\n * ~~https://github.com/thedmd/imgui/tree/feature/draw-list-fringe-scale (for sharp rendering, while zooming)~~ It is part of ImGui since 1.80 release\n * https://github.com/thedmd/imgui/tree/feature/extra-keys (for extra shortcuts)\n\n## Building / Installing\n\nNode Editor sources are located in root project directory. To use it, simply copy\u0026paste sources into your project. Exactly like you can do with ImGui.\n\n### Examples\n[Examples](../examples) can be build with CMake:\n```\nWindows:\n    cmake -S examples -B build -G \"Visual Studio 15 2017 Win64\"\n      or\n    cmake -S examples -B build -G \"Visual Studio 16 2019\" -A x64\n\nmacOS:\n    cmake -S examples -B build -G \"Xcode\"\n\nLinux:\n    cmake -S examples -B build -G \"Unix Makefiles\"\n\nBuild:\n    cmake --build build --config Release\n```\nExecutables will be located in `build\\bin` directory.\n\n### Quick Start\n\nMain node editor header is located in [imgui_node_editor.h](../imgui_node_editor.h).\n\nMinimal example of one node can be found in [simple-example.cpp](../examples/simple-example/simple-example.cpp).\nPress 'F' in editor to focus on editor content if you see only grid.\n```cpp\n# include \u003cimgui.h\u003e\n# include \u003cimgui_node_editor.h\u003e\n# include \u003capplication.h\u003e\n\nnamespace ed = ax::NodeEditor;\n\nstruct Example:\n    public Application\n{\n    using Application::Application;\n\n    void OnStart() override\n    {\n        ed::Config config;\n        config.SettingsFile = \"Simple.json\";\n        m_Context = ed::CreateEditor(\u0026config);\n    }\n\n    void OnStop() override\n    {\n        ed::DestroyEditor(m_Context);\n    }\n\n    void OnFrame(float deltaTime) override\n    {\n        auto\u0026 io = ImGui::GetIO();\n\n        ImGui::Text(\"FPS: %.2f (%.2gms)\", io.Framerate, io.Framerate ? 1000.0f / io.Framerate : 0.0f);\n\n        ImGui::Separator();\n\n        ed::SetCurrentEditor(m_Context);\n        ed::Begin(\"My Editor\", ImVec2(0.0, 0.0f));\n        int uniqueId = 1;\n        // Start drawing nodes.\n        ed::BeginNode(uniqueId++);\n            ImGui::Text(\"Node A\");\n            ed::BeginPin(uniqueId++, ed::PinKind::Input);\n                ImGui::Text(\"-\u003e In\");\n            ed::EndPin();\n            ImGui::SameLine();\n            ed::BeginPin(uniqueId++, ed::PinKind::Output);\n                ImGui::Text(\"Out -\u003e\");\n            ed::EndPin();\n        ed::EndNode();\n        ed::End();\n        ed::SetCurrentEditor(nullptr);\n\n        //ImGui::ShowMetricsWindow();\n    }\n\n    ed::EditorContext* m_Context = nullptr;\n};\n\nint Main(int argc, char** argv)\n{\n    Example exampe(\"Simple\", argc, argv);\n\n    if (exampe.Create())\n        return exampe.Run();\n\n    return 0;\n}\n```\n\nResult:\n\n![00-Simple](https://user-images.githubusercontent.com/1197433/89328516-cca01f00-d68d-11ea-9959-2da159851101.png)\n\nFor more details please visit [examples](../examples) folder.\n\n### Blueprints Example\n\n![Preview2](https://user-images.githubusercontent.com/1197433/60053458-2f2b9b00-96d8-11e9-92f9-08aff63b2023.png)\n\n### Here is Node Editor at work in Spark CE\n![image](https://user-images.githubusercontent.com/1197433/60381756-174a7300-9a5a-11e9-9a04-00f10565e05e.png)\n![image](https://user-images.githubusercontent.com/1197433/60381760-2f21f700-9a5a-11e9-9053-c0547a9cc40a.png)\n","funding_links":[],"categories":["Uncategorized","C Libraries","C++","Graphics"],"sub_categories":["Uncategorized","Renderers"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthedmd%2Fimgui-node-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthedmd%2Fimgui-node-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthedmd%2Fimgui-node-editor/lists"}