- Infinite grid with pan/zoom
- Auto grid-snapping
- Ultra-smooth feeling UI
- Type-aware nodes
You can check out various usage examples located in examples folder
-
Run
npm ito install dependencies. -
Create
testingdirectory in project root and addindex.htmlfile with following contents:Details
Show contents
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Testing</title> </head> <body> <div id="editor"> <div id="viewport"> <svg id="connections"></svg> </div> </div> <script type="module"> import { Editor, Node, Connection } from "/src/lib.js"; const editor = new Editor('editor'); const nodeA = new Node('Node A', 100, 100); const nodeB = new Node('Node B', 300, 250); editor.addNode(nodeA); editor.addNode(nodeB); nodeA.connect(nodeB); </script> </body> </html>
- Now you can run
npm run devand it will open previously added page in browser which will auto-reload on any code changes.