The Interface: Canvas, Nodes, and Menus

Your First Look at the Canvas

When ComfyUI loads, you see a dark canvas with a collection of connected boxes arranged from left to right. This is the default text-to-image workflow — seven nodes that form a complete image generation pipeline. Everything in ComfyUI happens on this canvas.

Before you change anything or run a generation, spend a few minutes navigating the interface. Understanding where things are and how to move around will save you a lot of frustration later when workflows grow larger and more complex.

Navigating the Canvas

The canvas is a large, zoomable workspace. Here is how to move around it:

• Pan (move around): Hold the middle mouse button and drag, or hold the Space bar and drag. On a trackpad, use two-finger scroll.
• Zoom: Scroll the mouse wheel up to zoom in, down to zoom out. Pinch to zoom on a trackpad.
• Fit all nodes in view: Press Ctrl+Shift+H (or click the fit-view button in the bottom-right canvas controls). This resets the view so the entire workflow is visible — useful when you have accidentally panned too far.
• Select a node: Click it once. A blue highlight appears around the selected node.
• Select multiple nodes: Hold Shift and click, or drag a selection box over an area.
• Move a node: Click and drag it. Wires connecting it will follow.
• Delete a node: Select it and press the Delete key (or Backspace on Mac).

Right-clicking on an empty area of the canvas opens the Add Node menu — this is how you add any node to the canvas. Nodes are organized into categories like sampling, loaders, conditioning, image, and more. You will use this menu constantly as you build workflows.

The Left Sidebar

The left side of the interface has a collapsible sidebar with five panels. Click any tab to open it.

• Assets: Shows generated images, videos, and other output files from your current session. Click any thumbnail to preview the full result. This is where you review output without opening a file browser.
• Nodes: A searchable list of every node available in your installation — both built-in ComfyUI nodes and any custom nodes you have installed. Drag a node from this panel onto the canvas, or double-click an empty area on the canvas and type the node name to search and add it.
• Models: Shows every model file ComfyUI has detected in its models folder. Organized by type (checkpoints, VAEs, LoRAs, etc.). Useful for confirming that a model downloaded correctly before trying to load it in a workflow.
• Workflows: Lists saved workflow files. Workflows you save from the File menu appear here for quick reload.
• Templates: Built-in workflow templates provided by ComfyUI. This is the fastest way to start with a new task type — the templates include text-to-image, image-to-image, inpainting, and more, each pre-wired and ready to run.

The Top Header Bar

The top bar spans the width of the interface. From left to right:

• Workflow name: Shows the name of the currently open workflow file. Click it to rename the workflow.
• New Workflow button: Creates a blank canvas. You will be prompted to save the current workflow if you have unsaved changes.
• Run button: Starts the generation process for the current workflow. The keyboard shortcut is Ctrl+Enter (or Cmd+Enter on Mac) — you will use this constantly.
• Queue controls: Shows how many pending jobs are in the queue. You can add a workflow to the queue without waiting for the current one to finish, and stop or clear the queue here.

The Bottom Toolbar

Four buttons sit at the bottom of the interface:

• Help: Opens the ComfyUI documentation in a new tab.
• Console: Opens a panel showing ComfyUI's runtime logs. When something goes wrong, the Console is the first place to look — error messages appear here with enough detail to diagnose the problem.
• Shortcuts: Displays a reference panel of all keyboard shortcuts. Worth checking once so you know what is available.
• Settings: Opens the settings panel. Key options include changing the UI language (ComfyUI supports English, Chinese, Russian, French, Japanese, and Korean), adjusting canvas behavior, and toggling legacy UI mode.

Canvas Navigation Tools (Bottom Right)

The bottom-right corner of the canvas has three small controls:

• Pan/Select toggle: Switches between pan mode (click and drag moves the canvas) and select mode (click and drag draws a selection box). The keyboard shortcut V toggles between them.
• Minimap: Opens a small overview of the entire canvas with a rectangle showing your current view. Click anywhere in the minimap to jump to that area. Essential for large workflows.
• Connection display toggle: Shows or hides the wire labels on node connections. Useful when the canvas gets crowded.

At this point you can navigate the interface confidently. In the next lesson you will run your first generation using the default workflow that is already loaded on the canvas.