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

#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">
const data: string = "world";
</script>

<h1>Hello {data}</h1>

<style>
h1 {
  font-size: 1.5rem;
}
</style>
Read-only

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