Editor UI
Relevant source files
The following files were used as context for generating this wiki page:
Editor UI is the primary frontend application for n8n, built as a Vue.js application. It provides the visual workflow editor where users build, manage, and debug automations by connecting various nodes. The module is located in packages/frontend/editor-ui and utilizes a centralized design system for UI consistency.
Sources: CONTRIBUTING.md:46, AGENTS.md:104
Architecture and Technology Stack
The Editor UI is a single-page application (SPA) that communicates with the n8n backend via a REST API. It is part of a monorepo structure managed by pnpm workspaces.
Core Technologies
- Framework: Vue 3
- State Management: Pinia
- Build Tool: Vite
- Styling: SCSS with design tokens and CSS variables
- Internationalization:
@n8n/i18npackage for all UI text
Sources: AGENTS.md:108-112, packages/frontend/AGENTS.md:18
Development Workflow
Developers use specific commands to run the frontend in development mode. The editor typically runs on port 8080 and supports Hot Module Replacement (HMR).
# Start the Vue frontend editor in development mode
cd packages/frontend/editor-ui
pnpm dev
Sources: CONTRIBUTING.md:113, CONTRIBUTING.md:144
UI Components and Design System
The Editor UI relies on @n8n/design-system for reusable Vue components. This ensures a consistent look and feel across the application.
Design System Integration
The design system includes components such as N8nButton, N8nIcon, N8nInput, and specialized editors like N8nMarkdownEditor.
The diagram shows the relationship between the Editor UI, the shared Design System, and modular frontend features.
Sources: AGENTS.md:113, packages/frontend/editor-ui/src/features/ai/evaluation.ee/components/Tests/TestCaseDetail.vue:10-18
Component Guidelines
- I18n: All UI text must use the internationalization system.
- Styling: Hardcoded pixel values for spacing are prohibited; developers must use CSS variables.
- Testing: Components are tested using Vitest (unit) and Playwright (E2E).
Sources: packages/frontend/AGENTS.md:18-20, AGENTS.md:111
Feature Implementation: AI Evaluation
A concrete example of the Editor UI architecture is found in the AI Evaluation feature. It uses Pinia stores for state management and composables for persistent logic.
State and Persistence Logic
The TestCaseDetail.vue component demonstrates the use of auto-save functionality to prevent data loss during the test case creation process.
| Function/Variable | Description |
|---|---|
wizardStore | Pinia store managing the state of the AI evaluation wizard. |
scheduleSave | A debounced function that persists test case changes to the API. |
onInputEdit | Updates store values and triggers the auto-save schedule. |
persistAndRunCase | Logic to save the current test case and initiate an execution. |
Sources: packages/frontend/editor-ui/src/features/ai/evaluation.ee/components/Tests/TestCaseDetail.vue:29-65
This sequence shows the auto-save flow when a user edits an input in the AI Evaluation UI.
Sources: packages/frontend/editor-ui/src/features/ai/evaluation.ee/components/Tests/TestCaseDetail.vue:49-65
Testing and Quality Assurance
Editor UI quality is maintained through a structured testing approach, primarily using Playwright for End-to-End (E2E) verification.
Playwright Test Layers
The E2E testing architecture uses a four-layer approach to separate concerns:
- Tests (*.spec.ts): High-level readable scenarios.
- *Composables (Composer.ts): Business workflows (e.g.,
WorkflowComposer.createWorkflow). - *Page Objects (Page.ts): UI interactions and locators.
- BasePage: Common utility methods for interacting with the DOM.
Sources: packages/quality/testing/playwright/CONTRIBUTING.md:41-55
Testing Metadata
Tests often rely on data-test-id attributes for stable element selection. These must be single, space-free values.
Sources: packages/frontend/AGENTS.md:21
Summary
The Editor UI is a complex Vue 3 application that serves as the visual heart of n8n. By leveraging a centralized design system, Pinia for state, and a multi-layered testing strategy, it provides a robust environment for building automations. Its architecture emphasizes modularity, internationalization, and reliable data persistence through patterns like debounced auto-saves.