Interface Overview

Learn how to navigate and use the Flow Editor interface effectively.

Main Areas

The Flow Editor uses a floating UI layout. All controls are overlaid on a full-screen canvas rather than using fixed sidebars or top bars.

1. Canvas

The main workspace where you build your workflow. It is powered by React Flow and supports an infinite, pannable grid.

Navigation:

• Pan - Click and drag on empty space, or hold Space and drag
• Zoom - Scroll wheel, or use the vertical zoom control on the left side of the canvas
• Fit to view - Click the fit-to-view button in the bottom-left controls
• Reset view - Double-click the mini-map

Actions:

• Add node - Use the Bottom Node Menu, Quick Slots, or the Quick Connect Menu
• Select node - Click on a node
• Multi-select - Hold Shift and click, or drag a selection box
• Delete - Select and press Delete or Backspace
• Right-click a node - Opens a context menu with quick actions (e.g., Upscale, To Video, Extend, Save) based on the node's output type

2. Floating Action Bar

Centered at the top of the screen, the Floating Action Bar provides file management and workflow execution controls:

Button	Function
New	Create a new empty workflow
Save	Smart save — updates the current workflow if it already exists, or opens the Save dialog for new workflows
Save As	Save the current workflow under a new name
Open	Open a previously saved workflow
File	Dropdown with Export as JSON, Import from JSON, Preset Editor (developer mode), and Publish to API (when API mode is enabled)
Auto-save to Library	Toggle that automatically saves all generated media to the Content Library
Workspace	Opens a popover panel with demo flows and activity log; shows a red dot when there are unread errors

When you have unsaved changes and try to create a new flow or import, you will be prompted to confirm before losing your work.

3. Node Inspector

Appears on the right side of the screen when you select a node. It can be collapsed to a small button in the bottom-right corner.

The inspector shows:

• Node status - Idle, running, completed, or error states with visual indicators
• Node configuration - Specialized inspector panels for each node type (e.g., Brain, Batch Processor, Data Feed, Angles, Conditional Switch, Brand Kit, Variant Generator)
• Run controls - Run from this node, or resume after fixing errors
• Cost estimate - Credit cost badge for billable nodes
• Output preview - Results from the last execution (images, video, text, JSON)
• Connected inputs/outputs - Information about what data flows in and out

4. Bottom Node Menu

Docked at the bottom center of the canvas, this is the primary way to add nodes and generate workflows with AI.

Node categories (browse by clicking category icons):

• Sources
• Prompt & Planning
• Generate
• Enhance (Image)
• Enhance (Video)
• Audio & Foley
• Analysis & Control
• Intelligence
• Presets (developer mode only)
• Utility / Debug
• Data & Localization

AI Generation - Type a natural-language prompt to have AI build an entire workflow for you. Supports two modes:

• Create - Build a new workflow from scratch
• Extend - Add nodes to an existing workflow

AI generation includes configurable settings: image-first approach, upscaling, reference search, cinematic mode, cinematography style, story bible, audio, factual research, and more.

5. Floating Quick Slots

Located on the left side of the canvas, Quick Slots provide 5 customizable shortcut buttons. Hold a slot to assign a node type, then click to quickly add that node to the canvas.

6. Zoom Control

A vertical control strip on the left side of the canvas showing:

• Zoom in button
• Current zoom percentage
• Zoom out button

The default zoom level is 65%. Zoom range is 10% to 400%.

7. Mini-Map

A small overview in the bottom-right corner showing your entire workflow. It is pannable and zoomable, allowing quick navigation to any area of a large workflow.

8. Bottom-Left Controls

A compact control group in the bottom-left containing:

• Fit to view - Fits all nodes into the current viewport
• Library shortcut - Opens the Content Library, filtered to the current workflow's artifacts if a workflow is loaded

9. Navigation

Fixed in the top corners of the screen:

• Top-left - DUTO logo (click to return to the home page)
• Top-right - Main navigation links, theme toggle, and mobile navigation drawer
• Low Credit Prompt - Appears below the action bar when credits are running low

Adding Nodes

Method 1: Bottom Node Menu

1. Click a category icon at the bottom of the canvas
2. Browse the available nodes
3. Click a node to add it to the canvas

Method 2: AI Generation

1. Click the text input area in the Bottom Node Menu
2. Type a natural-language description of the workflow you want
3. Press Enter or click the send button
4. The AI will build the workflow and animate nodes onto the canvas

Method 3: Quick Slots

1. Hold one of the 5 Quick Slot buttons on the left side
2. Assign a node type from the searchable node list
3. Click the slot anytime to instantly add that node type

Method 4: Quick Connect Menu

1. Drag a connection from a node's output handle and release on empty canvas
2. A filterable menu appears showing only compatible nodes
3. Select a node to add it and automatically create the connection

Method 5: Right-Click Context Menu

1. Right-click on an existing node
2. Choose a quick action (e.g., Upscale, To Video, Save)
3. The AI will extend the workflow from that node

Connecting Nodes

Creating Connections

1. Click on an output handle (right side of a node)
2. Drag to an input handle (left side of another node)
3. Release to create the connection

Connection Compatibility

Handles are color-coded by type: blue (image), purple (video), green (audio), yellow (text), orange (JSON), and gray (any). You can only connect compatible types. Gray "any" handles accept all types.

If you drag a connection to empty space instead of a target handle, the Quick Connect Menu opens automatically, showing only nodes with compatible input types.

Removing Connections

• Click on an edge to select it, then press Delete
• Or drag the edge away from the handle to disconnect

Batch Scope Edges

Edges within a batch processing scope (between a Batch Processor node and its Batch End node) are displayed as dotted lines to visually distinguish them from regular connections.

Working with Nodes

Selecting Nodes

• Single select - Click on a node
• Multi-select - Shift + Click or drag a selection box
• Select all - Cmd/Ctrl + A

Moving Nodes

• Drag selected nodes to reposition
• Use arrow keys for precise movement

Copying Nodes

1. Select nodes to copy
2. Press Cmd/Ctrl + C
3. Press Cmd/Ctrl + V to paste
4. Connections between copied nodes are preserved

Keyboard Shortcuts

General

Shortcut	Action
Delete / Backspace	Delete selected
Cmd/Ctrl + A	Select all
Cmd/Ctrl + C	Copy
Cmd/Ctrl + V	Paste
Cmd/Ctrl + D	Duplicate
Escape	Deselect / Cancel

Navigation

Shortcut	Action
Space + Drag	Pan canvas
Scroll wheel	Zoom in/out

Execution

Shortcut	Action
Run button	Execute the workflow
Stop button	Cancel execution

Tips & Best Practices

Organization

• Keep related nodes close together
• Leave space between branches for readability
• Use Post-It Note nodes to annotate complex sections
• Use the Mini-Map to navigate large workflows

Workflow Design

• Start simple, add complexity gradually
• Test frequently during development
• Use Preview Media nodes to verify intermediate results
• Name your nodes descriptively using the text fields in node configuration

Performance

• Use batch processing for multiple items (Batch Processor + Batch End nodes)
• Consider parallel execution where possible — the DAG engine runs independent branches concurrently
• Toggle Auto-save to Library on to automatically preserve all generated outputs