{"_id":"@aleksanderbodurri/ng-flow","name":"@aleksanderbodurri/ng-flow","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@aleksanderbodurri/ng-flow","version":"0.0.1","description":"Angular library for building node-based editors and interactive flow charts. An Angular port of React Flow (@xyflow), built on the framework-agnostic @xyflow/system core. Standalone, zoneless, signal-based.","keywords":["angular","ng-flow","flow","node-based","node-editor","diagram","flowchart","graph","workflow","react-flow","xyflow","signals","standalone"],"license":"MIT","author":{"name":"Aleksander Bodurri"},"homepage":"https://ng-flow.web.app","repository":{"type":"git","url":"git+https://github.com/AleksanderBodurri/ng-flow.git"},"bugs":{"url":"https://github.com/AleksanderBodurri/ng-flow/issues"},"peerDependencies":{"@angular/common":"^22.0.0","@angular/core":"^22.0.0","@angular/cdk":"^22.0.1","@xyflow/system":"^0.0.77","classcat":"^5.0.5","zustand":"^4.5.7"},"dependencies":{"tslib":"^2.3.0"},"sideEffects":false,"module":"fesm2022/aleksanderbodurri-ng-flow.mjs","typings":"types/aleksanderbodurri-ng-flow.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./types/aleksanderbodurri-ng-flow.d.ts","default":"./fesm2022/aleksanderbodurri-ng-flow.mjs"}},"type":"module","_id":"@aleksanderbodurri/ng-flow@0.0.1","_nodeVersion":"22.22.0","_npmVersion":"10.9.4","dist":{"integrity":"sha512-XrHpVv2FRx+YzrAOK0XfucSHc8MyHdfKUdnSS5mmGwbCUykitG5eFDwSc8TDZDTrPyyK3OTeq1kPgqTZINhRwQ==","shasum":"e00daddb890a2df234ca3bf6ad1fe1e429496ef6","tarball":"https://registry.npmjs.org/@aleksanderbodurri/ng-flow/-/ng-flow-0.0.1.tgz","fileCount":8,"unpackedSize":1548868,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIHrS4fQbVND/nBetVtKDusmvQzPEJmrXBnSu1NJ7qH4RAiEA91FpGCZw+nfQZJZkNKa2aD6zggVdHnRlUIJgtDyZLVU="}]},"_npmUser":{"name":"aleksanderbodurri","email":"alexbodurri1117@gmail.com"},"directories":{},"maintainers":[{"name":"aleksanderbodurri","email":"alexbodurri1117@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ng-flow_0.0.1_1781654199644_0.16342562872847588"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-16T23:56:39.504Z","0.0.1":"2026-06-16T23:56:39.811Z","modified":"2026-06-16T23:56:40.085Z"},"maintainers":[{"name":"aleksanderbodurri","email":"alexbodurri1117@gmail.com"}],"description":"Angular library for building node-based editors and interactive flow charts. An Angular port of React Flow (@xyflow), built on the framework-agnostic @xyflow/system core. Standalone, zoneless, signal-based.","homepage":"https://ng-flow.web.app","keywords":["angular","ng-flow","flow","node-based","node-editor","diagram","flowchart","graph","workflow","react-flow","xyflow","signals","standalone"],"repository":{"type":"git","url":"git+https://github.com/AleksanderBodurri/ng-flow.git"},"author":{"name":"Aleksander Bodurri"},"bugs":{"url":"https://github.com/AleksanderBodurri/ng-flow/issues"},"license":"MIT","readme":"# ng-flow\n\nA highly customizable **Angular** library for building node-based editors and interactive flow charts — nodes, edges, handles, pan & zoom, minimap, controls, background, selection, and more. Built the modern Angular way: standalone components, zoneless change detection, signals, `input()`/`output()`, new control flow (`@if`/`@for`), and `inject()`.\n\n## Origin\n\nThis library is an Angular port of [React Flow (`@xyflow/react`)](https://github.com/xyflow/xyflow), part of the [xyflow](https://github.com/xyflow/xyflow) project by webkid GmbH. Like React Flow and Svelte Flow, `ng-flow` is a thin binding layer over the framework-agnostic [`@xyflow/system`](https://github.com/xyflow/xyflow/tree/main/packages/system) core, which it reuses directly — so edge-path math, pan/zoom, dragging, and handle/connection logic are byte-for-byte identical to React Flow.\n\n## Built with reangular\n\nThis library was generated using the [reangular](https://github.com/aleksanderbodurri/reangular) skill — an automated React-to-Angular conversion harness for coding agents.\n\n## Install\n\n```bash\nnpm install @aleksanderbodurri/ng-flow @xyflow/system classcat zustand @angular/cdk\n```\n\nImport the theme once (e.g. in your global `styles.scss`):\n\n```scss\n@use '@aleksanderbodurri/ng-flow/styles/style.scss'; /* or the structural-only base.scss */\n```\n\n## Quick start\n\n```ts\nimport { Component, signal } from '@angular/core';\nimport {\n  NgFlow, Background, BackgroundVariant, Controls, MiniMap,\n  type Node, type Edge, type NodeChange, applyNodeChanges,\n} from '@aleksanderbodurri/ng-flow';\n\n@Component({\n  selector: 'app-flow',\n  imports: [NgFlow, Background, Controls, MiniMap],\n  template: `\n    <ng-flow\n      [nodes]=\"nodes()\"\n      [edges]=\"edges\"\n      [onNodesChange]=\"onNodesChange\"\n      [fitView]=\"true\"\n    >\n      <ng-flow-background [variant]=\"BackgroundVariant.Dots\" />\n      <ng-flow-controls />\n      <ng-flow-minimap />\n    </ng-flow>\n  `,\n  styles: `:host { display: block; height: 100vh; }`,\n})\nexport class FlowComponent {\n  protected readonly BackgroundVariant = BackgroundVariant;\n  protected readonly nodes = signal<Node[]>([\n    { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },\n    { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },\n  ]);\n  protected readonly edges: Edge[] = [{ id: 'e1-2', source: '1', target: '2' }];\n  protected readonly onNodesChange = (changes: NodeChange[]) =>\n    this.nodes.update((ns) => applyNodeChanges(changes, ns));\n}\n```\n\n### Key differences from React Flow\n\n- **Components instead of JSX:** `<ng-flow>` (≈ `<ReactFlow>`), `<ng-flow-background>`, `<ng-flow-controls>`, `<ng-flow-minimap>`, `<ng-flow-panel>`, `<ng-flow-handle>`, `<ng-flow-node-toolbar>`, `<ng-flow-edge-toolbar>`, `<ng-flow-node-resizer>`, `<ng-flow-provider>` (≈ `<ReactFlowProvider>`).\n- **Events are callback inputs** named exactly as React Flow (`[onConnect]`, `[onNodesChange]`, `[onNodeClick]`, `[onInit]`, …) so existing React Flow code migrates directly.\n- **Hooks return Signals.** `useReactFlow()`, `useNodes()`, `useViewport()`, `useNodesState()`, etc. are called in an injection context (inside a component under `<ng-flow>`/`<ng-flow-provider>`).\n- **Custom node/edge types** are Angular component classes registered via `[nodeTypes]`/`[edgeTypes]` and rendered with the right dynamic-component mechanism (HTML for nodes, SVG-namespaced for edges).\n\n## Demo\n\nA demo app exercising every feature (65 routes mirroring the React Flow examples) lives in `projects/demo`:\n\n```bash\nnpm install\nnpm run start   # ng serve demo → http://localhost:4200\n```\n\n## Original contributors\n\nContributors to [React Flow / xyflow](https://github.com/xyflow/xyflow), sorted by commit count (extracted via `git -C xyflow shortlog -sn --no-merges HEAD`; automated bot accounts omitted):\n\n1. moklick (2527 commits)\n2. peterkogo (578 commits)\n3. Christopher Möller (142 commits)\n4. Moritz Klack (96 commits)\n5. Peter (93 commits)\n6. Christopher Möller (52 commits)\n7. Dimitri POSTOLOV (50 commits)\n8. Abbey Yacoe (47 commits)\n9. Alessandro (40 commits)\n10. braks (40 commits)\n11. Moritz (37 commits)\n12. Jack Fishwick (35 commits)\n13. Ze-Zheng Wu (15 commits)\n14. Eugene Samonenko (12 commits)\n15. Hayleigh Thompson (9 commits)\n16. AndyLnd (8 commits)\n17. Artyom Sovetnikov (8 commits)\n18. Ivan Akulov (8 commits)\n19. Nate Amack (8 commits)\n20. Yaroslav Halchenko (8 commits)\n21. Solomon Astley (7 commits)\n22. printer_scanner (7 commits)\n23. Alessandro Cheli (6 commits)\n24. Alireza Sheikholmolouki (6 commits)\n25. Clément Loridan (6 commits)\n26. Furkan Kalaycioglu (6 commits)\n27. GeoffreyLiu (6 commits)\n28. Peter Kogo (6 commits)\n29. Robin Goupil (6 commits)\n30. Sebastián Alvarez (6 commits)\n31. RunDevelopment (5 commits)\n32. Himself65 (4 commits)\n33. Joey Ballentine (4 commits)\n34. Karlo Bistrički (4 commits)\n35. ShaMan123 (4 commits)\n36. Wenchen Li (4 commits)\n37. fdnklg (4 commits)\n38. jasonpul (4 commits)\n39. Alaric Baraou (3 commits)\n40. Andreas Schultz (3 commits)\n41. Andy (3 commits)\n42. Coen (3 commits)\n43. Daniel Darabos (3 commits)\n44. Matt Huggins (3 commits)\n45. Rhys Lloyd (3 commits)\n46. chang_su (3 commits)\n47. Alexey Volkov (2 commits)\n48. CRIMX (2 commits)\n49. Christopher Hiester (2 commits)\n50. David Lounsbrough (2 commits)\n51. DiamondDrake (2 commits)\n52. GHOST (2 commits)\n53. Jakub Majorek (2 commits)\n54. Jeffrey Gordon (2 commits)\n55. John Robb (2 commits)\n56. Kenny Williams (2 commits)\n57. Long Nguyen (2 commits)\n58. Mahdi Esbati (2 commits)\n59. Noam Neeman (2 commits)\n60. Orlando (2 commits)\n61. Paula Stachova (2 commits)\n62. Przemysław Żydek (2 commits)\n63. Shlomo Galle (2 commits)\n64. Spencer Whitehead (2 commits)\n65. Veniamin Krol (2 commits)\n66. andreyworkspace (2 commits)\n67. artemtam (2 commits)\n68. ysds (2 commits)\n69. 4t145 (1 commits)\n70. = (1 commits)\n71. Abinadi Cordova (1 commits)\n72. Adam Krebs (1 commits)\n73. Aidan Barrett (1 commits)\n74. Akihiro Kiuchi (1 commits)\n75. Alex Dawes (1 commits)\n76. Amir Ali (1 commits)\n77. Amr-Shams (1 commits)\n78. Ashwanth Kumar (1 commits)\n79. Ben Chidlow (1 commits)\n80. Bjørn Olav Salvesen (1 commits)\n81. Braks (1 commits)\n82. Campbell Wass (1 commits)\n83. Christian Lagerkvist (1 commits)\n84. Connie (1 commits)\n85. Damian Stasik (1 commits)\n86. Daniel Leal (1 commits)\n87. Daniel Sanchez (1 commits)\n88. DenizUgur (1 commits)\n89. Dylan Middendorf (1 commits)\n90. Edson Miguel Dewes (1 commits)\n91. Emiel Wit (1 commits)\n92. Eric (1 commits)\n93. Fabian Bieler (1 commits)\n94. Fawad Shaikh (1 commits)\n95. Felipe Emos (1 commits)\n96. Ikko Eltociear Ashimine (1 commits)\n97. Ilia (1 commits)\n98. Ilya Moroz (1 commits)\n99. Ivan S (1 commits)\n100. Jaan (1 commits)\n101. Jakob Hofer (1 commits)\n102. James Moynihan (1 commits)\n103. Jeff Jenner (1 commits)\n104. Jeremiasz Major (1 commits)\n105. John Weis (1 commits)\n106. Luis Carlos (1 commits)\n107. Mahdi (1 commits)\n108. Marc Vila (1 commits)\n109. Michael Schmidt (1 commits)\n110. Michael Spiss (1 commits)\n111. Michael Theobald (1 commits)\n112. Michal Srb (1 commits)\n113. Miri Dagan (1 commits)\n114. Mustafa Kemal Tuna (1 commits)\n115. Nick Lawrence (1 commits)\n116. Niels Kaspers (1 commits)\n117. Philipp Garbowsky (1 commits)\n118. RedPhoenixQ (1 commits)\n119. Rein van Haaren (1 commits)\n120. Richard Schulz (1 commits)\n121. Ryan Kois (1 commits)\n122. Ryan Welch (1 commits)\n123. Sahil Mane (1 commits)\n124. Samuel Degueldre (1 commits)\n125. Serhii Holinei (1 commits)\n126. Stephan Eggermont (1 commits)\n127. Stojan Stamkov (1 commits)\n128. Svilen Ivanov (1 commits)\n129. Tiago Costa (1 commits)\n130. Tony Francis (1 commits)\n131. Tornado Softwares (1 commits)\n132. Totoro-moroku (1 commits)\n133. Tristan Brewster (1 commits)\n134. Tzu-Yu Lee (1 commits)\n135. Vincent Driessen (1 commits)\n136. Ward Oosterlijnck (1 commits)\n137. Wayne Tee (1 commits)\n138. clifford (1 commits)\n139. datoslabs (1 commits)\n140. dfblhmm (1 commits)\n141. doctoroyy (1 commits)\n142. dongqiang.02 (1 commits)\n143. fezproof (1 commits)\n144. filippo-one (1 commits)\n145. himself65 (1 commits)\n146. hiyangguo (1 commits)\n147. justn-hyeok (1 commits)\n148. moretall (1 commits)\n149. pengfu (1 commits)\n150. saswata (1 commits)\n151. spky (1 commits)\n152. stffabi (1 commits)\n153. timhwang21 (1 commits)\n154. timo (1 commits)\n155. zhbhun (1 commits)\n156. Émilien Leroux (1 commits)\n157. Ítalo Andrade (1 commits)\n158. Анна Кузнецова (1 commits)\n159. 栗嘉男 (1 commits)\n\n## License\n\nMIT — same as the upstream [xyflow](https://github.com/xyflow/xyflow) project.\n","readmeFilename":"README.md","_rev":"1-1c26ef8180df3a52a667397835cdd39a"}