Implementation:FlowiseAI Flowise AgentflowMarketplaceCanvas
| Knowledge Sources | |
|---|---|
| Domains | Marketplace, Agent Flow Editor |
| Last Updated | 2026-02-12 07:00 GMT |
Overview
MarketplaceCanvasV2 is a read-only ReactFlow canvas component that renders AgentFlow v2 marketplace templates with interactive viewing, snapping, and background toggling controls.
Description
This component receives flow data and name from React Router location state and initializes a ReactFlow canvas with AgentFlowNode, StickyNote, IterationNode node types and AgentFlowEdge edge types. It provides a fixed AppBar header via MarketplaceCanvasHeader (with a copy-to-canvas action), and interactive controls for toggling snap-to-grid (25x25) and background grid display. Double-clicking a node (except sticky notes) opens an EditNodeDialog in disabled/read-only mode. The canvas supports fit-view and a minimum zoom of 0.1.
Usage
Use this component as the route handler for viewing AgentFlow v2 templates from the marketplace. Users can inspect node configurations and copy the template to their own canvas for editing.
Code Reference
Source Location
- Repository: FlowiseAI Flowise
- File: packages/ui/src/views/agentflowsv2/MarketplaceCanvas.jsx
- Lines: 1-166
Signature
const MarketplaceCanvasV2 = () => { ... }
export default MarketplaceCanvasV2
Import
import MarketplaceCanvasV2 from '@/views/agentflowsv2/MarketplaceCanvas'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| location.state.flowData | string (JSON) | Yes | Serialized JSON string of the flow containing nodes and edges arrays |
| location.state.name | string | Yes | The display name of the marketplace flow template |
Outputs
| Name | Type | Description |
|---|---|---|
| JSX.Element | React element | A full-screen ReactFlow canvas with AppBar header, control buttons (snap, background toggle), and an EditNodeDialog for read-only node inspection |
Usage Examples
Basic Usage
import { useNavigate } from 'react-router-dom'
const MarketplaceList = () => {
const navigate = useNavigate()
const viewTemplate = (template) => {
navigate('/v2/marketplace/agentcanvas', {
state: {
flowData: template.flowData,
name: template.name
}
})
}
return <button onClick={() => viewTemplate(selectedTemplate)}>View Template</button>
}