--- title: Build a draggable node diagram without a library | daily.dev description: A practical guide to building a Railway-style draggable infrastructure canvas using vanilla JavaScript/TypeScript — no React Flow or D3 required. Covers the... canonical: https://daily.dev/posts/build-a-draggable-node-diagram-without-a-library-inw8hqrre twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Build a draggable node diagram without a library | daily.dev og:description: A practical guide to building a Railway-style draggable infrastructure canvas using vanilla JavaScript/TypeScript — no React Flow or D3 required. Covers the... og:url: https://daily.dev/posts/build-a-draggable-node-diagram-without-a-library-inw8hqrre og:image: https://api.daily.dev/og/posts/Inw8hQrRe.png og:image:alt: Build a draggable node diagram without a library og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Build a draggable node diagram without a library **[Flavio Copes](https://daily.dev/sources/flaviocopes)** · 4 min read · 0 upvotes · 0 comments ## Summary A practical guide to building a Railway-style draggable infrastructure canvas using vanilla JavaScript/TypeScript — no React Flow or D3 required. Covers the two-layer architecture (absolute-positioned HTML nodes + SVG edge layer), pointer event-based drag handling with setPointerCapture, dynamic edge geometry recomputation on node move, and smooth cost number animation using requestAnimationFrame with an ease-out curve. Includes tips like movement thresholds to distinguish taps from drags and respecting prefers-reduced-motion. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I keep pointer drag events working when the cursor moves outside the dragged element? Use pointer events instead of mouse events, and call setPointerCapture on the target element in the pointerdown handler. This ensures the element keeps receiving pointermove and pointerup events even when the cursor leaves its bounds mid-drag, which is a common failure mode with plain mouse events. _daily.dev surfaces practical drag-and-drop patterns for developers building custom canvas UIs._ ### How do I redraw SVG lines connecting draggable HTML nodes as they move? Store each edge's from and to node ids, then recompute x1, y1, x2, y2 from the center of each connected card every time positions change. Compute a node's center as its top-left position plus half its width and height, and update this on every drag frame so the SVG lines stay attached to the moving cards. _Developers wiring up custom node diagrams can find this kind of layout technique on daily.dev._ ### How can I animate a number smoothly when its value changes, like an updating price? Keep separate display and target values, and interpolate between them each animation frame using requestAnimationFrame with an ease-out curve, rounding to cents for currency. Cancel any in-progress tween when a new target arrives, and skip the animation entirely when prefers-reduced-motion is enabled, jumping straight to the final value instead. _daily.dev helps developers track techniques like this for polishing real-time UI updates._ ## Similar posts on daily.dev - [How to Optimize a Graphical React Codebase — Optimize d3-zoom and dnd-kit Code](https://daily.dev/posts/how-to-optimize-a-graphical-react-codebase-optimize-d3-zoom-and-dnd-kit-code-rbh24l3cj) · freeCodeCamp · 3 upvotes · 0 comments - [Dynamic Node Connection \(CSS-only Diagram\)](https://daily.dev/posts/dynamic-node-connection-css-only-diagram--fe4f6bmm4) · CSS Tip · 21 upvotes · 1 comments - [Build a Kanban Board With Drag-and-Drop in React with Shadcn](https://daily.dev/posts/build-a-kanban-board-with-drag-and-drop-in-react-with-shadcn-qjknskkwi) · marmelab · 4 upvotes · 0 comments --- Tags: [#javascript](https://daily.dev/tags/javascript), [#svg](https://daily.dev/tags/svg) [View this post on daily.dev](https://daily.dev/posts/build-a-draggable-node-diagram-without-a-library-inw8hqrre) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Build a draggable node diagram without a library","url":"https://daily.dev/posts/build-a-draggable-node-diagram-without-a-library-inw8hqrre","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/build-a-draggable-node-diagram-without-a-library-inw8hqrre"},"datePublished":"2026-07-21T07:49:04.291Z","dateModified":"2026-09-14T09:10:10.324Z","description":"A practical guide to building a Railway-style draggable infrastructure canvas using vanilla JavaScript/TypeScript — no React Flow or D3 required. Covers the...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/907c6c028f107fad7d0379f1571dde35?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/907c6c028f107fad7d0379f1571dde35?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Flavio Copes","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Flavio Copes","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/1f2dbd275797411bbd37bfdaaf0951a9","url":"https://daily.dev/sources/flaviocopes"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/build-a-draggable-node-diagram-without-a-library-inw8hqrre","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"javascript,svg","timeRequired":"PT4M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Flavio Copes","item":"https://daily.dev/sources/flaviocopes"},{"@type":"ListItem","position":3,"name":"Build a draggable node diagram without a library"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/build-a-draggable-node-diagram-without-a-library-inw8hqrre#faq","mainEntity":[{"@type":"Question","name":"How do I keep pointer drag events working when the cursor moves outside the dragged element?","acceptedAnswer":{"@type":"Answer","text":"Use pointer events instead of mouse events, and call setPointerCapture on the target element in the pointerdown handler. This ensures the element keeps receiving pointermove and pointerup events even when the cursor leaves its bounds mid-drag, which is a common failure mode with plain mouse events. daily.dev surfaces practical drag-and-drop patterns for developers building custom canvas UIs."}},{"@type":"Question","name":"How do I redraw SVG lines connecting draggable HTML nodes as they move?","acceptedAnswer":{"@type":"Answer","text":"Store each edge's from and to node ids, then recompute x1, y1, x2, y2 from the center of each connected card every time positions change. Compute a node's center as its top-left position plus half its width and height, and update this on every drag frame so the SVG lines stay attached to the moving cards. Developers wiring up custom node diagrams can find this kind of layout technique on daily.dev."}},{"@type":"Question","name":"How can I animate a number smoothly when its value changes, like an updating price?","acceptedAnswer":{"@type":"Answer","text":"Keep separate display and target values, and interpolate between them each animation frame using requestAnimationFrame with an ease-out curve, rounding to cents for currency. Cancel any in-progress tween when a new target arrives, and skip the animation entirely when prefers-reduced-motion is enabled, jumping straight to the final value instead. daily.dev helps developers track techniques like this for polishing real-time UI updates."}}]} ```