Meta tags:
description= A customizable Svelte component for building node-based editors and interactive diagrams;
keywords= svelte,node-based UI,graph,diagram,workflow,svelte-flow,xyflow;
Headings (most frequently used words):
svelte, flow, by, the, xyflow, wire, your, ideas, with, customizable, component, for, building, node, based, editors, and, interactive, diagrams, 86k, mit, ready, out, of, box, powered, us, designed, you, all, right, plugins, see, in, action, project, react,
Text of the page (most frequently used words):
the (22), flow (22), node (20), #svelte (19), and (16), press (16), you (13), edge (12), can (10), then (9), delete (9), remove (9), enter (8), space (8), select (8), escape (8), cancel (8), xyflow (7), examples (7), are (7), custom (7), nodes (7), with (6), use (6), all (5), open (5), source (5), reference (5), based (5), interactive (5), around (5), components (5), edges (5), blog (4), support (4), quickstart (4), building (4), for (4), react (4), types (4), see (4), arrow (4), keys (4), move (4), more (4), website (3), mit (3), contact (3), about (3), showcase (3), api (3), guide (3), team (3), component (3), out (3), started (3), connect (3), connection (3), license (2), github (2), discord (2), project (2), visit (2), read (2), development (2), customizable (2), editors (2), diagrams (2), box (2), subflows (2), feature (2), overview (2), make (2), advanced (2), background (2), minimap (2), controls (2), panel (2), tailwind (2), full (2), built (2), npm (2), install (2), getting (2), collisions (2), drag (2), drop (2), flows (2), handle (2), layouting (2), learn (2), copyright, 2026, rights, reserved, design, facu, montanaro, webkid, gmbh, info, com, code, conduct, legal, careers, bluesky, twitter, social, docs, maintaining, software, uis, since, 2019, behind, updates, posts, from, how, approach, small, passionate, developers, berlin, maintainers, communities, them, comes, set, common, supports, nested, graphs, many, features, require, zero, configuration, capabilities, check, which, regularly, updated, action, mini, map, apps, right, plugins, play, nice, good, old, css, just, create, have, control, powered, designed, get, things, need, already, there, dragging, zooming, panning, selecting, multiple, adding, removing, ready, sure, installed, pnpm, yarn, via, licensed, library, help, ensure, further, maintenance, supporting, weekly, installs, 86k, current, version, wire, your, ideas, changelog, hello, world, threlte, download, image, transitions, misc, rectangle, lasso, selection, eraser, whiteboard, turbo, dark, mode, base, style, styling, horizontal, elkjs, dagre, layout, validation, contextual, zoom, context, menu, computing, interaction, click, reconnect, floating, markers, labels, line, update, stress, proximity, resizer, intersections, easy, middle, limit, add, isnode, isedge, getviewportforbounds, getstraightpath, getsmoothsteppath, getoutgoers, getnodesbounds, getincomers, getconnectededges, getbezierpath, addedge, utils, zindexmode, xyposition, viewport, svelteflowstore, snapgrid, selectionmode, rect, position, panelposition, panonscrollmode, onselectiondrag, onreconnectstart, onreconnectend, onreconnect, onmove, onerror, ondelete, onconnectstart, onconnectend, onconnect, onbeforereconnect, onbeforedelete, onbeforeconnect, nodetypes, nodetargeteventwithpointer, nodeprops, nodeorigin, nodeeventwithpointer, nodeconnection, markertype, keydefinition, isvalidconnection, internalnode, fitviewoptions, edgetypes, edgeprops, edgemarker, defaultedgeoptions, coordinateextent, connectionmode, connectionlinetype, colormode, backgroundvariant, arialabelconfig, align, useupdatenodeinternals, usesvelteflow, usestore, useonselectionchange, usenodesinitialized, usenodesdata, usenodes, usenodeconnections, useinternalnode, useedges, useconnection, hooks, viewportportal, nodetoolbar, noderesizer, noderesizecontrol, edgetoolbar, edgereconnectanchor, edgelabel, controlbutton, baseedge, svelteflowprovider, svelteflow, attribution, migrate, troubleshooting, server, side, rendering, typescript, sub, libraries, theming, customizing, installation, key, concepts, search, new, example, handling, skip, content,
Text of the page (random words):
the node based ui for svelte svelte flow skip to content new example handling node collisions svelte flow learn reference examples showcase more search github discord support us learn quickstart getting started key concepts installation building a flow built in components customizing svelte flow custom nodes custom edges theming layouting layouting libraries sub flows advanced use typescript server side rendering api reference troubleshooting migrate to v1 remove attribution reference api reference svelteflow svelteflowprovider components background baseedge controlbutton controls edgelabel edgereconnectanchor edgetoolbar handle minimap noderesizecontrol noderesizer nodetoolbar panel viewportportal hooks useconnection useedges useinternalnode usenodeconnections usenodes usenodesdata usenodesinitialized useonselectionchange usestore usesvelteflow useupdatenodeinternals types align arialabelconfig backgroundvariant colormode connection connectionlinetype connectionmode coordinateextent defaultedgeoptions edge edgemarker edgeprops edgetypes fitviewoptions internalnode isvalidconnection keydefinition markertype node nodeconnection nodeeventwithpointer nodeorigin nodeprops nodetargeteventwithpointer nodetypes onbeforeconnect onbeforedelete onbeforereconnect onconnect onconnectend onconnectstart ondelete onerror onmove onreconnect onreconnectend onreconnectstart onselectiondrag panonscrollmode panelposition position rect selectionmode snapgrid svelteflowstore viewport xyposition zindexmode utils addedge getbezierpath getconnectededges getincomers getnodesbounds getoutgoers getsmoothsteppath getstraightpath getviewportforbounds isedge isnode examples examples feature overview nodes add node on edge drop connection limit custom node delete middle node drag handle easy connect intersections node resizer proximity connect stress update node edges custom connection line custom edges edge labels edge markers edge types floating edges reconnect edge click connect interaction computing flows context menu contextual zoom drag and drop validation layout dagre elkjs horizontal flow node collisions subflows styling base style dark mode tailwind turbo flow whiteboard eraser lasso selection rectangle misc transitions download image threlte flow hello world use svelte flow showcase more changelog blog contact us wire your ideas with svelte flow a customizable svelte component for building node based editors and interactive diagrams quickstart support us press enter or space to select a node you can then use the arrow keys to move the node around press delete to remove it and escape to cancel press enter or space to select an edge you can then press delete to remove it or escape to cancel 1 5 0 current version 86k weekly installs mit license svelte flow is a mit licensed open source library you can help us to ensure the further development and maintenance by supporting us support us getting started with svelte flow make sure you ve installed npm pnpm or yarn then you can install svelte flow via npm install xyflow svelte see full quickstart guide ready out of the box the things you need are already there dragging nodes zooming panning selecting multiple nodes and adding removing edges are all built in get started press enter or space to select a node you can then use the arrow keys to move the node around press delete to remove it and escape to cancel press enter or space to select an edge you can then press delete to remove it or escape to cancel powered by us designed by you we play nice with tailwind and good old css svelte flow nodes are just svelte components create custom nodes to have full control with interactive components custom nodes guide press enter or space to select a node you can then use the arrow keys to move the node around press delete to remove it and escape to cancel press enter or space to select an edge you can then press delete to remove it or escape to cancel all the right plugins make more advanced apps with the background minimap controls and panel components read more mini map press enter or space to select a node you can then use the arrow keys to move the node around press delete to remove it and escape to cancel press enter or space to select an edge you can then press delete to remove it or escape to cancel interactive examples see svelte flow in action to see all the capabilities of svelte flow check out the interactive examples which are regularly updated see all examples feature overview many features of svelte flow require zero configuration subflows svelte flow supports nested graphs out of the box edge types the component comes with a set of common edge types a project by xyflow we are xyflow a small team of passionate developers based in berlin we are the maintainers of react flow svelte flow and the communities around them blog about us open source contact us react flow a customizable react component for building node based editors and interactive diagrams visit website xyflow the team behind react flow and svelte flow read updates and blog posts from us and about how we approach open source development visit website a project by the xyflow team we are building and maintaining open source software for node based uis since 2019 docs quickstart guide api reference examples showcase support us social discord github x twitter bluesky xyflow blog open source about contact careers legal mit license code of conduct info xyflow com copyright 2026 webkid gmbh all rights reserved website design by facu montanaro
|
