--- title: Canvas Overview slug: canvas-overview createdAt: 2026-01-20T15:59:35.435Z --- ## Overview The Floyo canvas is where you build, edit, and run ComfyUI workflows. It provides a node-based visual editor with all the tools you need to create AI-powered image and video generation pipelines. *** ## Accessing the Canvas 1. Go to [floyo.ai](https://floyo.ai) 2. Click **LAUNCH APP** in the top-right corner 3. The canvas opens with a starter workflow *** ## Interface Layout The canvas interface is divided into four main areas: | Area | Location | Purpose | | ------------------ | ------------- | -------------------------------------------------------------- | | **Top Header** | Top of screen | Team selection, workflow tabs, settings, publishing | | **Left Sidebar** | Left edge | Quick access to Run History, File Browser, Workflows, Discover | | **Main Canvas** | Center | Node-based workflow editor | | **Bottom Toolbar** | Bottom center | Run controls, queue management, status | *** ## Top Header | Element | Description | | ------------------- | ----------------------------------------------------------- | | **Floyo Logo** | Returns to Discover page | | **Team Selector** | Switch between Personal Team and other teams | | **Workflow Tabs** | Open workflows appear as tabs; click to switch between them | | **+ Button** | Open a new workflow tab | | **Settings Icon** | Access canvas and workflow settings | | **Save Icon** | Save current workflow | | **PUBLISH TO TEAM** | Publish workflow (dropdown with team/community options) | ### Workflow Dropdown Click the workflow name (below the tabs) to access workflow options and details. ### Publishing After running a workflow, the **PUBLISH TO TEAM** button becomes active. Click the dropdown arrow to choose: - **Publish to Team** — Share with your team members - **Publish to Community** — Share publicly on Floyo :::BlockQuote **💡 Tip:** See [Publishing Workflows](https://docs.floyo.ai/publishing-workflows) for detailed publishing instructions. ::: *** ## Left Sidebar Four icons provide quick access to key features: | Icon | Name | Function | | ------- | ---------------- | ------------------------------------------------- | | 🕐 | **Run History** | View currently running and past workflow runs | | 📁 | **File Browser** | Manage files, uploads, models, and outputs | | 📊 | **Workflows** | Search and manage your saved workflows | | **Yo!** | **Discover** | Browse community workflows without leaving canvas | :::BlockQuote **💡 Tip:** Click any sidebar icon to open its panel. Click again to close it. ::: ### Run History Panel The Run History panel shows your workflow execution history: | Section | Description | | ----------- | ---------------------------------- | | **NOW** | Currently running workflows | | **HISTORY** | Past runs with status and duration | **Tabs:** - **MY RUNS** — Your personal run history - **TEAM RUNS** — Runs from your team members **Status Badges:** | Status | Meaning | | ---------------------- | ------------------------------ | | **COMPLETED** (green) | Workflow finished successfully | | **CANCELLED** (orange) | Run was manually cancelled | | **FAILED** (red) | Workflow encountered an error | Each run shows: thumbnail, workflow name, status, date, and duration. :::BlockQuote **💡 Tip:** Drag a thumbnail from Run History onto the canvas to reuse a previous output in your current workflow. ::: ### Workflows Panel The Workflows panel lets you manage your saved workflows: - **Search bar** — Find workflows by name - **Import buttons** — Upload workflow files - **Workflow list** — Your saved workflows Click any workflow to open it in a new tab. ### Discover Panel (In-Canvas) Browse community workflows without leaving your current work: - **Filters** — Filter by category or type - **Search** — Find workflows by name, tags, or creator - **Sort** — Order by Most Views or other criteria - **Workflow cards** — Click to view details or run :::BlockQuote **💡 Tip:** Use the in-canvas Discover to quickly find and load workflows while keeping your current work open. ::: *** ## Main Canvas The main canvas is a node-based visual editor where you build workflows by connecting nodes. ### Canvas Navigation | Action | How To | | ---------------- | ------------------------------------------- | | **Pan** | Click and drag on empty canvas space | | **Zoom** | Scroll wheel up/down | | **Select node** | Click on a node | | **Multi-select** | Ctrl+Click and drag to create selection box | | **Move node** | Click and drag a selected node | ### Adding Nodes Right-click on empty canvas space to open the context menu, then select **Add Node** to browse available nodes. :::BlockQuote **💡 Tip:** Use the search function in the node browser to quickly find specific nodes by name. ::: *** ## Bottom Toolbar The bottom toolbar controls workflow execution: | Element | Description | | -------------------- | ------------------------------------------ | | **Drag Handle** | Reposition the toolbar on the canvas | | **Play Button (▶)** | Run the current workflow | | **Queue Counter** | Number of items to queue | | **X Button** | Cancel current run | | **Status Indicator** | Shows current state (Ready, Running, etc.) | | **Eye Icon** | Toggle focus mode | ### Status States | Status | Meaning | | ------------ | ------------------------------- | | **Ready** | Workflow is ready to run | | **Running** | Workflow is currently executing | | **In queue** | Workflow is waiting to run | *** ## Tips & Best Practices - **Organize your canvas:** Arrange nodes left-to-right following the data flow - **Use the sidebar:** Quick access to files and workflows without leaving the canvas - **Check status:** Always verify "Ready" status before running *** ## Related Documentation - [Nodes](https://docs.floyo.ai/nodes) - [File Browser](https://docs.floyo.ai/file-browser) - [Running Workflows](https://docs.floyo.ai/running-workflows)