Custom Nodes

In Flow, a node is more than just a rectangle with a border; it is fundamentally a scoped slot container that can host any Vue component or HTML structure. This allows you can leverage CSS animations, complex gradients, and third-party UI libraries to create stunning node interfaces.

Premium Custom Node Demo

The following example demonstrates a professional-grade node featuring a "glassmorphism" aesthetic, dynamic glow effects, and internal layout logic using slots.

ID: premium-1

Cluster Core

Manages aggregate request streams from edge computing nodes.

ProductionUptime: 99.9%

Glassmorphism Premium Node

Implementation Notes

When building custom nodes via slots, keep these core behaviors in mind:

1. Event Bubbling: standard DOM events (click, mousedown) bubble to the Flow engine for selection; canvas interactions (click to select, drag to move, Ctrl+wheel to zoom, drag empty area to pan) are provided by default. Use .stop only when you need to prevent that (e.g. @click.stop on a node-internal button).
2. Selection Feedback: Use the slot’s node.selected boolean to apply highlighted styles (e.g. border or glow). The example above uses node.selected so the node border and shadow change when selected—click the node to see the highlight.
3. Dimensions: Always specify width and height in your node data if your internal layout is complex. This is mandatory for predictable virtualization and edge-routing calculations.

TIP

Looking for multiple connection points on a single side? Check the Custom Handles section under Node Types.