Utility Classes

Svelte Flow provides several built-in utility CSS classes to help you fine-tune how interactions work within your custom elements.

nodrag

Adding the class nodrag to an element ensures that interacting with it doesn’t trigger a drag. This is particularly useful for elements like buttons or inputs that should not initiate a drag operation when clicked.

Nodes have a drag class name in place by default. However, this class name can affect the behaviour of the event listeners inside your custom nodes. To prevent unexpected behaviours, add a nodrag class name to elements with an event listener. This prevents the default drag behavior as well as the default node selection behavior when elements with this class are clicked.

<div>
  <input class="nodrag" type="range" min={0} max={100} />
</div>

nopan

If an element in the canvas does not stop mouse events from propagating, clicking and dragging that element will pan the viewport. Adding the nopan class prevents this behavior. You can change the class name with the noPanClass prop on <SvelteFlow />.

<div class="nopan">
  <p>fixed content...</p>
</div>

nowheel

If your custom element contains scrollable content, you can apply the nowheel class. This disables the canvas’ default pan behavior when you scroll inside your custom node, ensuring that only the content scrolls instead of moving the entire canvas. You can change the class name with the noWheelClass prop on <SvelteFlow />.

<div class="nowheel" style:overflow="auto">
  <p>Scrollable content...</p>
</div>

Applying these utility classes helps you control interaction on a granular level. You can customize these class names on <SvelteFlow /> via the style props.