<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 } from '@xyflow/svelte';
 
  export let data;
</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

For TypeScript users, the props type for the <NodeResizer /> component is exported as NodeResizerProps.

Name	Type
#`nodeId?`	`string`
#`color?`	`string`
#`handleClass?`	`string`
#`handleStyle?`	`string`
#`lineClass?`	`string`
#`lineStyle?`	`string`
#`isVisible?`	`boolean`
#`minWidth?`	`number`
#`minHeight?`	`number`
#`maxWidth?`	`number`
#`maxHeight?`	`number`
#`keepAspectRatio?`	`boolean`
#`shouldResize?`	`(event: D3.DragEvent, params: ResizeParams & { direction: number[]; }) => boolean`
#`onResizeStart?`	`(event: D3.DragEvent, params: ResizeParams) => void`
#`onResize?`	`(event: D3.DragEvent, params: ResizeParams & { direction: number[]; }) => void`
#`onResizeEnd?`	`(event: D3.DragEvent, params: ResizeParams) => void`

Examples

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


<script lang="ts">
  import { writable } from 'svelte/store';
  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 },
      style: nodeStyle
    },
    {
      id: '2',
      type: 'ResizableNodeSelected',
      data: { label: 'NodeResizer when selected' },
      position: { x: 100, y: 300 },
      style: nodeStyle
    },
    {
      id: '3',
      type: 'CustomResizerNode',
      data: { label: 'Custom Resize Icon' },
      position: { x: 150, y: 150 },
      style: nodeStyle + 'padding: 5px; height: 100px;'
    }
  ];
 
  const nodes = writable<Node[]>(initialNodes);
  const edges = writable<Edge[]>(initialEdges);
 
  const nodeTypes = {
    ResizableNode,
    CustomResizerNode,
    ResizableNodeSelected
  };
</script>
 
<div style="height:100vh;">
  <SvelteFlow {nodes} {nodeTypes} {edges} fitView>
    <Background />
  </SvelteFlow>
</div>

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.