Overview
Marketplace is the main React view component for the Flowise template marketplace, providing browsable community and custom templates with filtering by tag, type, framework, and use case, displayed in either card or list view.
Description
This component implements the full marketplace browsing experience with two tabs: Community Templates and My Templates (custom). It supports multi-criteria filtering (badge/tag, type such as Chatflow/AgentflowV2/Tool, framework such as Langchain/LlamaIndex, and use-case categories), full-text search across name/description/categories, and toggleable card or list display modes persisted to localStorage. Community templates load on mount, while custom templates load on tab switch. The component handles navigation to canvas/assistant/agentflow views, tool import dialogs, custom template deletion with confirmation, and workspace sharing for custom templates.
Usage
Use this component as the main route-level view for the /marketplace path. It requires no props and manages all state internally, fetching data from the marketplace API endpoints.
Code Reference
Source Location
Signature
const Marketplace = () => {
// ... component logic (958 lines)
}
export default Marketplace
Import
import Marketplace from '@/views/marketplaces'
I/O Contract
Inputs
| Name |
Type |
Required |
Description
|
| (none) |
- |
- |
Route-level component with no props; fetches all data from marketplace APIs
|
Outputs
| Name |
Type |
Description
|
| Rendered JSX |
React.Element |
A full marketplace view with search, filters, tabs, card/list grid, and dialogs
|
Key Internal State
| State Variable |
Type |
Description
|
| isLoading |
Boolean |
Loading state for API requests
|
| view |
String |
Display mode: 'card' or 'list', persisted to localStorage
|
| search |
String |
Search text for filtering templates
|
| badgeFilter |
Array |
Selected badge/tag filters (POPULAR, NEW)
|
| typeFilter |
Array |
Selected type filters (Chatflow, AgentflowV2, Tool)
|
| frameworkFilter |
Array |
Selected framework filters (Langchain, LlamaIndex)
|
| selectedUsecases |
Array |
Selected use case filters for community templates
|
| selectedTemplateUsecases |
Array |
Selected use case filters for custom templates
|
| activeTabValue |
Number |
Active tab index (0=Community, 1=Custom)
|
| images |
Object |
Map of template ID to array of node icon image sources
|
| icons |
Object |
Map of template ID to array of agentflow icon objects
|
Key Functions
| Function |
Description
|
| handleBadgeFilterChange(event) |
Updates badge filter and recalculates eligible use cases
|
| handleTypeFilterChange(event) |
Updates type filter and recalculates eligible use cases
|
| handleFrameworkFilterChange(event) |
Updates framework filter and recalculates eligible use cases
|
| onSearchChange(event) |
Updates search text and recalculates eligible use cases
|
| getEligibleUsecases(data, filter) |
Computes which use cases are still selectable given current filters
|
| filterFlows(data) |
Filters templates by search text against categories, name, and description
|
| filterByBadge/filterByType/filterByFramework/filterByUsecases |
Individual filter predicates applied to template arrays
|
| goToCanvas(selectedChatflow) |
Navigates to the appropriate canvas view based on template type
|
| goToTool(selectedTool) |
Opens the tool preview dialog for a tool template
|
| onUseTemplate(selectedTool) |
Opens the tool import dialog with IMPORT type
|
| onDeleteCustomTemplate(template) |
Confirms and deletes a custom template
|
| share(template) |
Opens the workspace sharing dialog for a custom template
|
Usage Examples
Basic Usage
import Marketplace from '@/views/marketplaces'
// In route configuration
<Route path="/marketplace" element={<Marketplace />} />
Related Pages
Page Connections
Double-click a node to navigate. Hold to expand connections.
