Controls
The Controls component provides interactive zoom and fit view controls for Svelte Flow canvases. It includes a modern, themed design with backdrop blur and card styling.
Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.
🎯 Use controls: Zoom In (+) | Zoom Out (-) | Fit View (⛶) | Lock (🔒)
Installation
If you prefer using jsrepo, please install via the command below:
Usage
controls-example.svelte
Features
- • Zoom in/out controls
- • Fit view button to center and scale content
- • Rounded pill design with backdrop blur
- • Theme-aware card background
- • Subtle drop shadow for depth
- • Full TypeScript support
- • Compatible with all Svelte Flow control features
Props
className?
string - Additional CSS classes to apply to the controls.
[...props]
ComponentProps<typeof Controls> - Any other props from @xyflow/svelte Controls component (showZoom, showFitView, showInteractive, position, etc.).
Custom Positioning
custom-controls.svelte