Implementation:FlowiseAI Flowise AgentflowMarketplaceCanvas

Knowledge Sources	FlowiseAI Flowise
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>
}

Related Pages

• Principle:FlowiseAI_Flowise_Template_Marketplace