Editor UI & Canvas
Relevant source files
The following files were used as context for generating this wiki page:
The Editor UI & Canvas serves as the primary visual environment within n8n where users design, manage, and execute automated workflows. It is implemented as a Vue 3 frontend application located within the packages/frontend/editor-ui directory. The system provides a node-based interface that allows for the orchestration of complex logic through a graph-based representation of nodes and connections.
The core of this interface is the Canvas, which facilitates interactions such as adding nodes, configuring parameters, and mapping connections. It integrates closely with the workflowDocumentStore to maintain a single source of truth for workflow states, including node positions, pin data, and activation status.
Sources: CONTRIBUTING.md:43, AGENTS.md:65, packages/frontend/editor-ui/src/stores/workflowDocument.store.ts
Architecture and Core Components
The Editor UI is built on a monorepo structure utilizing pnpm workspaces. The frontend architecture leverages Vue 3, TypeScript, and Pinia for state management. The UI is separated into specialized components and stores to handle the complex state of a workflow graph.
Key Directory Structure
| Path | Description |
|---|---|
packages/frontend/editor-ui | The main Vue 3 frontend application. |
packages/frontend/@n8n/design-system | Reusable Vue components and design tokens. |
packages/workflow | Core interfaces and types for workflow definitions. |
Sources: CONTRIBUTING.md:41-45, AGENTS.md:76-85
Workflow Canvas Host
The WorkflowCanvasHost.vue component acts as the primary container for the visual workflow editor. It manages the lifecycle of the canvas and handles high-level user interactions with the workflow graph.
The diagram above illustrates the hierarchy of the primary frontend components responsible for rendering the workflow editor.
Sources: packages/frontend/editor-ui/src/components/WorkflowCanvasHost.vue, packages/frontend/editor-ui/src/views/NodeView.vue
State Management
Workflow state is managed through Pinia stores, specifically transitioning toward the workflowDocumentStore as the single source of truth for workflow documents.
workflowDocumentStore
This store manages the persistence and state of individual workflows. It tracks metadata, configuration, and execution-related data such as pin data and node settings.
Migrated Fields in workflowDocumentStore:
active: Boolean indicating if the workflow is currently enabled.pinData: Mock data pinned to specific nodes for testing.settings: Workflow-wide configuration options.tags: Organizational labels.meta: Metadata regarding the workflow creation and updates.
Sources: packages/frontend/editor-ui/src/stores/workflowDocument.store.ts, cubic.yaml:189-204
Visual Interaction and Node Management
Nodes are the building blocks of any workflow. The Editor UI provides a dedicated NodeView.vue for inspecting and configuring individual node properties.
Node Interaction Model
Users interact with nodes on the canvas through several methods defined in the automated testing and UI interaction patterns:
- Adding Nodes: Utilizing the
addNodefunction or "Add Workflow" button. - Configuring Parameters: Through the Node Display View (NDV), where users fill in parameter inputs.
- Execution and Debugging: A "Debug in Editor" feature allows users to import execution data from failed runs directly into the canvas for troubleshooting.
Sequence of events when a user modifies a node's configuration within the Editor UI.
Sources: packages/testing/playwright/CONTRIBUTING.md:73-85, packages/testing/playwright/CONTRIBUTING.md:175-185
Design and Styling Patterns
The Editor UI adheres to a centralized design system located in packages/frontend/@n8n/design-system. This ensures visual consistency across the canvas and its associated menus.
Technical UI Rules
- i18n: All UI text must utilize the
@n8n/i18npackage for internationalization. - CSS Variables: Hardcoded pixel values for spacing are discouraged; CSS variables should be used directly to maintain design tokens.
- Design Tokens: The system uses a specific set of design system tokens for colors, typography, and spacing.
Sources: AGENTS.md:118-122, cubic.yaml:263-269
Data Flow for Workflow Building
The process of building a workflow involves a sequence of analyzing requirements, selecting nodes, and validating connections. This flow is mirrored in the internal "Code Builder" agent logic used for automated workflow generation.
| Step | Action | Description |
|---|---|---|
| 1 | Analyze | Identify triggers and required external services. |
| 2 | Search | Locate specific nodes for the identified services. |
| 3 | Design | Map node connections (linear, branching, or parallel). |
| 4 | Configuration | Define parameters and credentials (e.g., newCredential). |
| 5 | Validation | Check the workflow code/graph for errors. |
Sources: packages/@n8n/ai-workflow-builder.ee/src/code-builder/prompts/index.ts:315-380
Conclusion
The Editor UI & Canvas is a sophisticated Vue-based system that abstracts complex backend workflow logic into an intuitive visual graph. By leveraging a centralized design system and robust state management via the workflowDocumentStore, it provides a scalable environment for building both simple automation and complex multi-agent AI systems.