Implementation:FlowiseAI Flowise MarketplaceCanvas
| Knowledge Sources | |
|---|---|
| Domains | Marketplace, Canvas |
| Last Updated | 2026-02-12 07:00 GMT |
Overview
MarketplaceCanvas is a React component that renders a read-only ReactFlow canvas for previewing marketplace chatflow and agentflow templates.
Description
This component provides a full-screen ReactFlow visualization of a marketplace template. It receives flow data and a template name through React Router's location state, parses the JSON flow data, and renders the nodes and edges in a non-editable canvas. The canvas includes custom node types (MarketplaceCanvasNode and StickyNote), a header bar with the template name via MarketplaceCanvasHeader, and interactive controls for toggling grid snapping and background visibility. Users can copy a template into a new chatflow or agentflow canvas via the onChatflowCopy handler.
Usage
Use this component as the route destination when a user clicks to preview a marketplace template. It receives the flow data via React Router location state and displays the template in a read-only canvas view with the option to copy it as a new flow.
Code Reference
Source Location
- Repository: FlowiseAI Flowise
- File: packages/ui/src/views/marketplaces/MarketplaceCanvas.jsx
- Lines: 1-139
Signature
const MarketplaceCanvas = () => { ... }
Import
import MarketplaceCanvas from '@/views/marketplaces/MarketplaceCanvas'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| location.state.flowData | string | Yes | JSON string of the flow data containing nodes and edges (received via React Router) |
| location.state.name | string | Yes | Display name for the marketplace template (received via React Router) |
Outputs
| Name | Type | Description |
|---|---|---|
| JSX.Element | ReactFlow Canvas | Renders a full-screen ReactFlow canvas with a fixed AppBar header, custom node types, and toggle controls for snapping and background |
Usage Examples
Basic Usage
// Navigating to the MarketplaceCanvas from a marketplace listing
import { useNavigate } from 'react-router-dom'
const navigate = useNavigate()
navigate('/marketplace/canvas', {
state: {
flowData: JSON.stringify({ nodes: [...], edges: [...] }),
name: 'Customer Support Chatbot'
}
})