Implementation:FlowiseAI Flowise MarketplaceCanvasNode
| Knowledge Sources | |
|---|---|
| Domains | Marketplace, Canvas |
| Last Updated | 2026-02-12 07:00 GMT |
Overview
MarketplaceCanvasNode is a React component that renders a single read-only node card within the marketplace canvas ReactFlow view.
Description
This component displays a styled card for each node in a marketplace template preview. It shows the node icon (fetched from the API by node name), the node label, and a LlamaIndex badge when applicable. The card renders disabled NodeInputHandler and NodeOutputHandler components for all input anchors, input parameters, and output anchors. An "Additional Parameters" button is displayed when additional parameters exist, which opens an AdditionalParamsDialog in read-only mode. The CardWrapper is a styled MainCard component with hover border effects.
Usage
This component is used as a custom node type within the MarketplaceCanvas ReactFlow instance. It is registered as the "customNode" node type and receives node data through ReactFlow's data prop. All interactions are disabled since this is a read-only preview.
Code Reference
Source Location
- Repository: FlowiseAI Flowise
- File: packages/ui/src/views/marketplaces/MarketplaceCanvasNode.jsx
- Lines: 1-180
Signature
const MarketplaceCanvasNode = ({ data }) => { ... }
Import
import MarketplaceCanvasNode from '@/views/marketplaces/MarketplaceCanvasNode'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| data | object | Yes | ReactFlow node data object containing name, label, selected, tags, inputAnchors, inputParams, and outputAnchors |
Outputs
| Name | Type | Description |
|---|---|---|
| JSX.Element | CardWrapper | Renders a styled card with node icon, label, input/output handlers, optional additional parameters dialog, and LlamaIndex badge |
Usage Examples
Basic Usage
// Registered as a custom node type in MarketplaceCanvas
const nodeTypes = { customNode: MarketplaceCanvasNode, stickyNote: StickyNote }
// ReactFlow renders each node using this component
<ReactFlow
nodes={nodes}
edges={edges}
nodeTypes={nodeTypes}
nodesDraggable={false}
fitView
/>