Adding a Node from the Palette

Description

This guide shows how to add fNode to the f-canvas using the fExternalItem directive. The directive allows placing elements outside the canvas and moving them onto it while preserving metadata through fData.

This pattern is useful in real workflow builders where users pick a node type from a sidebar or command palette, then drop it onto the canvas to create a new graph element.

Example

What this solves

• Build a node toolbox without coupling the palette to node rendering.
• Keep node creation explicit and easy to understand.
• Add previews and placeholders during drag operations.

Directive Features

• fExternalItem links an element to the canvas so it can create nodes on drop.
• fPlaceholder and fPreview let you render dedicated drag states.
• fPreviewMatchSize keeps the preview aligned with the original palette item.

Related docs

• External Item
• Flow
• AI Low-Code Platform Example