<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 />.

Name	Type	Default
`nodeId`	`string` Id of the node it is resizing
`handleClass`	`string` Class applied to handle
`handleStyle`	`string` Style applied to handle
`lineClass`	`string` Class applied to line
`lineStyle`	`string` Style applied to line
`isVisible`	`boolean` Are the controls visible
`minWidth`	`number` Minimum width of node
`minHeight`	`number` Minimum height of node
`maxWidth`	`number` Maximum width of node
`maxHeight`	`number` Maximum height of node
`keepAspectRatio`	`boolean` Keep aspect ratio when resizing
`autoScale`	`boolean` Automatically scale the node when resizing
`shouldResize`	`(event: ResizeDragEvent, params: ResizeParamsWithDirection) => boolean` Callback to determine if node should resize
`onResizeStart`	`OnResizeStart` Callback called when resizing starts
`onResize`	`OnResize` Callback called when resizing
`onResizeEnd`	`OnResizeEnd` Callback called when resizing ends
`resizeDirection`	`'horizontal' \| 'vertical'` The direction the user can resize the node
`...props`	`HTMLAttributes<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.