Frontend Architecture
Relevant source files
The following files were used as context for generating this wiki page:
- packages/frontend/editor-ui/src/main.ts
- packages/frontend/editor-ui/src/App.vue
- packages/frontend/editor-ui/src/stores/builder.store.ts
- packages/frontend/editor-ui/src/router.ts
- packages/frontend/editor-ui/src/constants.ts
- packages/frontend/editor-ui/src/components/HtmlEditor/HtmlEditor.vue
- CLAUDE.md
- CONTRIBUTING.md
The n8n frontend is a modern, single-page application (SPA) built with Vue 3. It serves as the primary user interface for creating, managing, and executing workflows. Located in the packages/frontend/editor-ui directory, it leverages a technology stack that includes TypeScript for type safety, Vite for the build tooling, and Pinia for state management.
The architecture is designed to be modular and maintainable, with a clear separation of concerns between UI components, application state, and routing logic. It makes extensive use of a centralized design system (@n8n/design-system) to ensure UI consistency. The application is structured around a component-based model, with a well-defined routing system to handle different views and a reactive state management pattern for handling application data.
Sources: CLAUDE.md, CONTRIBUTING.md
Application Bootstrap
The application's entry point is packages/frontend/editor-ui/src/main.ts. This file is responsible for initializing the Vue application, setting up essential plugins like Pinia for state management and Vue Router for navigation, and mounting the root App component to the DOM.
The bootstrap process follows these steps:
- Create a Vue application instance.
- Create and install a Pinia instance for state management.
- Install the Vue Router.
- Mount the root
Appcomponent to the#appelement in the HTML.
This flow is visualized in the diagram below.
This diagram shows the initialization sequence of the Vue.js application.
Sources: packages/frontend/editor-ui/src/main.ts
Routing
Routing is managed by vue-router and configured in packages/frontend/editor-ui/src/router.ts. This file defines all the possible navigation paths within the application, mapping each path to a specific Vue component. The routes are organized in a flat array, but logically represent different sections of the application such as workflows, credentials, and settings.
A VIEWS enum, defined in packages/frontend/editor-ui/src/constants.ts, is used to provide standardized names for routes, which helps in maintaining consistency when navigating programmatically.
Sources: packages/frontend/editor-ui/src/router.ts, packages/frontend/editor-ui/src/constants.ts:400-452
Key Routes
The table below lists some of the core application routes and the views they render.
| Path | View Name | Description |
|---|---|---|
/ | Homepage | The main landing page or dashboard. |
/workflow/new | NodeViewNew | The canvas for creating a new workflow. |
/workflow/:id | NodeViewExisting | The canvas for editing an existing workflow. |
/workflows | WorkflowsView | The list of all workflows. |
/credentials | CredentialsView | The page for managing credentials. |
/settings/personal | PersonalSettings | The user's personal settings page. |
/users | UsersSettings | The user management page for administrators. |
Sources: packages/frontend/editor-ui/src/router.ts:25-200, packages/frontend/editor-ui/src/constants.ts:400-452
Route Loading Diagram
The router uses dynamic imports (() => import(...)) for lazy-loading components. This means that the code for a specific view is only downloaded when the user navigates to it, improving the initial load time of the application.
This diagram illustrates how the Vue Router dynamically loads and renders components within the main App.vue's <router-view>.
Sources: packages/frontend/editor-ui/src/router.ts, packages/frontend/editor-ui/src/App.vue
State Management with Pinia
The application uses Pinia for centralized state management. Stores are defined to manage specific domains of the application's state, such as UI state, user information, or feature-specific data. A good example is the AI workflow builder store.
Sources: CLAUDE.md, packages/frontend/editor-ui/src/stores/builder.store.ts
Example: builder.store.ts
This store manages the state for the AI-powered workflow builder feature. It encapsulates state, getters, and actions related to the AI assistant.
- State: Holds the raw reactive data, such as
isAssistantOpen. - Getters: Computed properties derived from the state.
- Actions: Methods that can be called to modify the state, such as
openAssistantandcloseAssistant.
The structure of the builder.store is shown below.
This class diagram represents the structure of the builder Pinia store, including its state and actions.
Sources: packages/frontend/editor-ui/src/stores/builder.store.ts
Core Components
The frontend is built from a hierarchy of Vue components.
App.vue
This is the root component of the application, located at packages/frontend/editor-ui/src/App.vue. It serves as the main layout container and is responsible for:
- Rendering the
<router-view>, which displays the component for the current route. - Including global components like
AppModalsfor managing all modals in the application. - Handling application-wide concerns such as theme loading from local storage.
Sources: packages/frontend/editor-ui/src/App.vue
Specialized Editors
For complex input fields like code or rich text, the application integrates specialized editor libraries. An example is the HtmlEditor.vue component, which provides a rich HTML editing experience.
HtmlEditor.vue
This component wraps the CodeMirror 6 editor to provide a full-featured HTML editor with syntax highlighting, auto-completion, and formatting capabilities.
Key features of its implementation include:
- CodeMirror Integration: It uses
useExpressionEditorcomposable to set up and manage the CodeMirror instance. - Props and Events: It accepts a
modelValueand emitsupdate:model-valueevents, following standard Vue conventions forv-model. - Extensions: It configures CodeMirror with a rich set of extensions for features like bracket matching, autocompletion (
n8nAutocompletion), auto-closing HTML tags, and keymaps. - Event Bus: It listens to a global
htmlEditorEventBusto trigger actions like formatting the code. - Drag and Drop: It integrates with the application's drag-and-drop system to allow mapping data into the editor.
Sources: packages/frontend/editor-ui/src/components/HtmlEditor/HtmlEditor.vue
Constants and Configuration
A central constants.ts file (packages/frontend/editor-ui/src/constants.ts) defines a wide range of constants used throughout the frontend. This centralizes configuration and magic strings, making the codebase more maintainable.
Key categories of constants include:
| Constant Category | Examples | Description |
|---|---|---|
| Modal Keys | WHATS_NEW_MODAL_KEY, CREDENTIAL_EDIT_MODAL_KEY | Unique identifiers for opening and managing modals. |
| Node Types | HTTP_REQUEST_NODE_TYPE, CODE_NODE_TYPE | String identifiers for different n8n nodes. |
| Local Storage Keys | LOCAL_STORAGE_THEME, LOCAL_STORAGE_NDV_DIMENSIONS | Keys for persisting UI state in the browser's local storage. |
| API & Docs URLs | DOCS_DOMAIN, N8N_PRICING_PAGE_URL | Centralized URLs for documentation and external services. |
| View Names | VIEWS.WORKFLOW, VIEWS.CREDENTIALS | An enum mapping route names to components, used by the router. |
Sources: packages/frontend/editor-ui/src/constants.ts
Summary
The n8n frontend architecture is a well-structured Vue 3 application that emphasizes modularity and maintainability. Key architectural pillars include a clear application entrypoint, a centralized routing system with lazy loading, reactive state management with Pinia, and a component-based UI with specialized editors for complex tasks. The use of a central constants file further enhances code consistency and maintainability. This structure provides a solid foundation for building and extending the n8n user interface.