Skip to Content
✨ Svelte Flow 1.0 is here! Rewritten for Svelte 5 with many new features and improvements.
ReferenceComponents<NodeResizer />

<NodeResizer />

Source on GitHub 

The <NodeResizer /> component can be used to add a resize functionality to your nodes. It renders draggable controls around the node to resize in all directions.

CustomNode.svelte
<script lang="ts"> import { Handle, Position, NodeResizer, type NodeProps } from '@xyflow/svelte'; let { data } : NodeProps = $props(); </script> <NodeResizer minWidth={100} minHeight={30} /> <Handle type="target" position={Position.Left} /> <div style={{ padding: 10 }}>{data.label}</div> <Handle type="source" position={Position.Right} />

Props

The type for props of <NodeResizer /> component is exported as NodeResizerProps. Additionally, it extends the props of <div />.

NameTypeDefault
nodeIdstring

Id of the node it is resizing

handleClassstring

Class applied to handle

handleStylestring

Style applied to handle

lineClassstring

Class applied to line

lineStylestring

Style applied to line

isVisibleboolean

Are the controls visible

minWidthnumber

Minimum width of node

minHeightnumber

Minimum height of node

maxWidthnumber

Maximum width of node

maxHeightnumber

Maximum height of node

keepAspectRatioboolean

Keep aspect ratio when resizing

shouldResizeShouldResize

Callback to determine if node should resize

onResizeStartOnResizeStart

Callback called when resizing starts

onResizeOnResize

Callback called when resizing

onResizeEndOnResizeEnd

Callback called when resizing ends

...propsHTMLAttributes<HTMLDivElement>

Examples

Head over to the example page to see how this is done.

<script lang="ts"> import { SvelteFlow, Background, type Node, type Edge } from '@xyflow/svelte'; import ResizableNode from './ResizableNode.svelte'; import CustomResizerNode from './CustomResizerNode.svelte'; import ResizableNodeSelected from './ResizableNodeSelected.svelte'; import '@xyflow/svelte/dist/style.css'; // const nodeStyle = // 'background: #fff; border: 1px solid black; border-radius: 15px; font-size: 12px;'; const initialEdges: Edge[] = []; const initialNodes: Node[] = [ { id: '1', type: 'ResizableNode', data: { label: 'NodeResizer' }, position: { x: 0, y: 50 }, }, { id: '2', type: 'ResizableNodeSelected', data: { label: 'NodeResizer when selected' }, position: { x: -100, y: 150 }, }, { id: '3', type: 'CustomResizerNode', data: { label: 'Custom Resize Icon' }, position: { x: 150, y: 150 }, style: ' height: 100px;', }, ]; let nodes = $state.raw<Node[]>(initialNodes); let edges = $state.raw<Edge[]>(initialEdges); const nodeTypes = { ResizableNode, CustomResizerNode, ResizableNodeSelected, }; </script> <SvelteFlow bind:nodes {nodeTypes} bind:edges fitView> <Background /> </SvelteFlow>

Custom Resize Controls

To build custom resize controls, you can use the NodeResizeControl component and customize it.

Notes

  • Take a look at the docs for the NodeProps type or the guide on custom nodes to see how to implement your own nodes.
Last updated on