Implementation:FlowiseAI Flowise CanvasRoutes

Knowledge Sources	FlowiseAI Flowise
Domains	Routing, Canvas
Last Updated	2026-02-12 07:00 GMT

Overview

CanvasRoutes is a React Router route configuration object that defines all canvas-related routes (chatflow canvas, agentflow canvas v1/v2, and marketplace canvas v1/v2), each wrapped with RequireAuth permission guards and rendered within a MinimalLayout.

Description

The CanvasRoutes configuration maps eight URL paths to their corresponding lazy-loaded canvas components. The routes are organized under a MinimalLayout wrapper (without the full sidebar/header) and include: /canvas and /canvas/:id for chatflow editing, /agentcanvas and /agentcanvas/:id for v1 agentflow editing, /v2/agentcanvas and /v2/agentcanvas/:id for v2 agentflow editing, and /marketplace/:id and /v2/marketplace/:id for marketplace template viewing. Each route wraps its component in a RequireAuth guard with the appropriate permission (chatflows:view, agentflows:view, or templates:marketplace,templates:custom).

Usage

Use this route configuration as part of the application's router setup. It is typically included alongside MainRoutes in the createBrowserRouter call to register all canvas-related paths.

Code Reference

Source Location

Repository: FlowiseAI Flowise
File: packages/ui/src/routes/CanvasRoutes.jsx
Lines: 1-87

Signature

const CanvasRoutes = {
    path: '/',
    element: <MinimalLayout />,
    children: [ ... ]
}

export default CanvasRoutes

Import

import CanvasRoutes from '@/routes/CanvasRoutes'

I/O Contract

Inputs

Name	Type	Required	Description
(none)	-	-	This is a static route configuration object. Route parameters (:id) are extracted by React Router at runtime.

Outputs

Name	Type	Description
CanvasRoutes	object	A React Router route configuration object with path, element (MinimalLayout), and children array containing eight route definitions.

Route Definitions

Path	Component	Permission
/canvas	Canvas	chatflows:view
/canvas/:id	Canvas	chatflows:view
/agentcanvas	Canvas	agentflows:view
/agentcanvas/:id	Canvas	agentflows:view
/v2/agentcanvas	CanvasV2	agentflows:view
/v2/agentcanvas/:id	CanvasV2	agentflows:view
/marketplace/:id	MarketplaceCanvas	templates:marketplace,templates:custom
/v2/marketplace/:id	MarketplaceCanvasV2	templates:marketplace,templates:custom

Usage Examples

Basic Usage

import { createBrowserRouter } from 'react-router-dom'
import MainRoutes from './MainRoutes'
import CanvasRoutes from './CanvasRoutes'

const router = createBrowserRouter([MainRoutes, CanvasRoutes])

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment