Custom Nodes

Creating a custom node is as easy as building a regular Vue component and registering it with a #node-<type> slot. You can render any content and add any behavior you need, with full access to the node’s props. For more, see the Custom Nodes guide.


import type { BuiltInNode, Node, NodeProps } from '@xyflow/vue';
 
export type ColorSelectorNodeData = {
  color: string;
};
export type ColorSelectorNode = Node<ColorSelectorNodeData, 'selectorNode'>;
export type ColorSelectorNodeProps = NodeProps<ColorSelectorNode>;
 
export type CustomNodeExampleNode = ColorSelectorNode | BuiltInNode;