Node Graph - Josh Warren
joshw.io · 3,547 words · saved by 1 readers
A node graph component built with Pixi.js, Matter.js, and React. Allows users to see relationships between nodes and interact with them.
Node Graph - Josh Warren Overview We're going to build a graph similar to the one Obsidian uses to show relationships between notes. I personally use this graph on my website to show relationships between blog posts. Setup First, we can start a new react project. You can use any method you like to create a new project. I'd recommend vite . npx create-vite@latest node-graph Next, we're going to need a few packages to get started. We'll be using pixi.js and matter-js to handle the canvas. For state management I'll be using atom.io but any state library will work. npm install @pixi/events @pixi/r
saved by
related reading
- GitHub - vasturiano/force-graph: Force-directed graph rendered on HTML5 canvasgithub.com
- GitHub - crubier/react-graph-vis: A react component to render nice graphs using vis.jsgithub.com
- Node-Based UIs in React - React Flowreactflow.dev
- GitHub - blakeshao/a-psychos-gd-tool: a node-based graphic design toolgithub.com
- Chloe's Gardenchloeyan.me
- React graph viscrubier.github.io
- javascript - React: Adding click listener to Neovis.js - Stack Overflowstackoverflow.com
- Grainradgrainrad.com
- Motion (prev Framer Motion): JavaScript & React animation librarymotion.dev
- Rachel Weirachelqrwei.ca
- The Engineering behind Figma’s Vector Networksalexharri.com
- Canvas UI: Creative Canvas, WebGL and WebGPU Component Librarycanvasui.dev