0
# n8n Editor UI
1

2
n8n Editor UI is a sophisticated Vue.js-based workflow editor that provides a visual, drag-and-drop interface for creating and managing automated workflows. Built with Vue 3, TypeScript, and Pinia, it offers a comprehensive suite of components, stores, composables, and utilities for workflow automation development.
3

4
## Package Information
5

6
- **Package Name**: n8n-editor-ui
7
- **Package Type**: npm (Vue.js Application)
8
- **Language**: TypeScript/Vue.js
9
- **Installation**: This is a frontend application component of n8n, not a standalone installable package. It's used as part of the n8n monorepo.
10

11
## Core Imports
12

13
Since this is a Vue.js application rather than a traditional library, direct imports are not the primary interface. However, developers extending the application can access internal APIs:
14

15
```typescript
16
// Stores (Pinia)
17
import { useWorkflowsStore } from '@/stores/workflows.store';
18
import { useNDVStore } from '@/stores/ndv.store';
19
import { useUIStore } from '@/stores/ui.store';
20

21
// Composables
22
import { useCanvasNode } from '@/composables/useCanvasNode';
23
import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
24
import { useKeybindings } from '@/composables/useKeybindings';
25

26
// Utilities
27
import { nodeViewUtils } from '@/utils/nodeViewUtils';
28
import { mapLegacyConnectionsToCanvasConnections, mapCanvasConnectionToLegacyConnection } from '@/utils/canvasUtils';
29

30
// Types
31
import type { IWorkflowDb, INodeUi, CanvasNodeData } from '@/Interface';
32
```
33

34
## Basic Usage
35

36
As a Vue.js application, n8n Editor UI is primarily used by mounting the application and interacting with its stores and composables:
37

38
```typescript
39
// Creating and managing workflows
40
const workflowsStore = useWorkflowsStore();
41

42
// Create a new workflow
43
await workflowsStore.createNewWorkflow({
44
  name: 'My Workflow',
45
  nodes: [],
46
  connections: {}
47
});
48

49
// Add nodes to workflow
50
workflowsStore.addNode({
51
  id: 'node-1',
52
  name: 'HTTP Request',
53
  type: 'n8n-nodes-base.httpRequest',
54
  position: [100, 100],
55
  parameters: {}
56
});
57

58
// Execute workflow
59
await workflowsStore.runWorkflow({
60
  workflowData: workflowsStore.workflow
61
});
62
```
63

64
## Architecture
65

66
The n8n Editor UI is built around several key architectural components:
67

68
- **Vue 3 Application**: Modern frontend framework with Composition API and TypeScript support
69
- **Pinia State Management**: Centralized stores for workflow, UI, and application state
70
- **Canvas System**: Vue Flow-based workflow canvas with drag-and-drop node operations
71
- **Component Library**: Extensive Vue component library with Element Plus integration
72
- **Composables System**: Reusable Vue 3 composables for common functionality
73
- **Plugin Architecture**: Extensible plugin system for icons, components, and functionality
74
- **API Client Layer**: HTTP client methods for backend communication
75

76
## Capabilities
77

78
### Workflow Management
79

80
Core workflow operations including creation, editing, execution, and management of automated workflows.
81

82
```typescript { .api }
83
interface IWorkflowDb {
84
  id: string;
85
  name: string;
86
  active: boolean;
87
  isArchived: boolean;
88
  createdAt: number | string;
89
  updatedAt: number | string;
90
  nodes: INodeUi[];
91
  connections: IConnections;
92
  settings?: IWorkflowSettings;
93
  tags?: ITag[] | string[];
94
  pinData?: IPinData;
95
  sharedWithProjects?: ProjectSharingData[];
96
  homeProject?: ProjectSharingData;
97
  scopes?: Scope[];
98
  versionId: string;
99
  usedCredentials?: IUsedCredential[];
100
  meta?: WorkflowMetadata;
101
  parentFolder?: { id: string; name: string };
102
}
103

104
function createNewWorkflow(data: WorkflowDataCreate): Promise<IWorkflowDb>;
105
function updateWorkflow(id: string, data: WorkflowDataUpdate): Promise<IWorkflowDb>;
106
function runWorkflow(data: IStartRunData): Promise<IExecutionPushResponse>;
107
```
108

109
[Workflow Management](./workflow-management.md)
110

111
### Canvas Operations
112

113
Interactive canvas functionality for visual workflow editing with drag-and-drop node placement and connection management.
114

115
```typescript { .api }
116
interface CanvasNodeData {
117
  id: string;
118
  name: string;
119
  type: string;
120
  position: [number, number];
121
  disabled: boolean;
122
  inputs: CanvasConnectionPort[];
123
  outputs: CanvasConnectionPort[];
124
}
125

126
interface CanvasConnectionPort {
127
  type: NodeConnectionType;
128
  index: number;
129
  required?: boolean;
130
  maxConnections?: number;
131
}
132
```
133

134
[Canvas Operations](./canvas-operations.md)
135

136
### State Management
137

138
Pinia-based state management system providing centralized stores for workflow, UI, and application state.
139

140
```typescript { .api }
141
interface WorkflowsStore {
142
  // State
143
  workflow: IWorkflowDb;
144
  activeWorkflows: string[];
145
  workflowExecutionData: IExecutionResponse | null;
146
  
147
  // Getters
148
  workflowName: string;
149
  allNodes: INodeUi[];
150
  isWorkflowRunning: boolean;
151
  
152
  // Actions
153
  setWorkflow(workflow: IWorkflowDb): void;
154
  addNode(node: INodeUi): void;
155
  removeNode(node: INodeUi): void;
156
  addConnection(connection: IConnection[]): void;
157
}
158
```
159

160
[State Management](./state-management.md)
161

162
### Component System
163

164
Vue component library providing UI elements for workflow editing, node configuration, and user interface.
165

166
```typescript { .api }
167
interface NodeDetailsViewProps {
168
  workflowObject: Workflow;
169
  readOnly?: boolean;
170
  renaming?: boolean;
171
  isProductionExecutionPreview?: boolean;
172
}
173

174
interface ParameterInputProps {
175
  parameter: INodeProperties;
176
  value: NodeParameterValueType;
177
  path: string;
178
  isReadOnly?: boolean;
179
}
180
```
181

182
[Component System](./component-system.md)
183

184
### Composables
185

186
Vue 3 composables providing reusable functionality for canvas operations, workflow helpers, and UI interactions.
187

188
```typescript { .api }
189
interface UseCanvasNodeReturn {
190
  node: InjectedCanvasNode;
191
  id: ComputedRef<string>;
192
  name: ComputedRef<string>;
193
  inputs: ComputedRef<CanvasConnectionPort[]>;
194
  outputs: ComputedRef<CanvasConnectionPort[]>;
195
  isSelected: ComputedRef<boolean>;
196
  isDisabled: ComputedRef<boolean>;
197
}
198

199
function useCanvasNode(): UseCanvasNodeReturn;
200
function useWorkflowHelpers(): WorkflowHelpersReturn;
201
function useKeybindings(keymap: KeyMap, options?: KeybindingOptions): void;
202
```
203

204
[Composables](./composables.md)
205

206
### API Client
207

208
HTTP client methods for communication with the n8n backend API, handling workflows, credentials, executions, and more.
209

210
```typescript { .api }
211
interface WorkflowsAPI {
212
  getWorkflow(id: string): Promise<IWorkflowDb>;
213
  createWorkflow(data: WorkflowDataCreate): Promise<IWorkflowDb>;
214
  updateWorkflow(id: string, data: WorkflowDataUpdate): Promise<IWorkflowDb>;
215
  deleteWorkflow(id: string): Promise<void>;
216
  executeWorkflow(data: IStartRunData): Promise<IExecutionPushResponse>;
217
}
218

219
interface CredentialsAPI {
220
  getAllCredentials(): Promise<ICredentialsResponse[]>;
221
  createCredential(data: ICredentialsDecrypted): Promise<ICredentialsResponse>;
222
  updateCredential(id: string, data: ICredentialsDecrypted): Promise<ICredentialsResponse>;
223
  testCredential(data: ICredentialsDecrypted): Promise<INodeCredentialTestResult>;
224
}
225
```
226

227
[API Client](./api-client.md)
228

229
## Types
230

231
```typescript { .api }
232
// Core workflow types
233
interface INodeUi extends INode {
234
  position: XYPosition;
235
  color?: string;
236
  notes?: string;
237
  issues?: INodeIssues;
238
  name: string;
239
  pinData?: IDataObject;
240
}
241

242
interface IStartRunData {
243
  workflowData: WorkflowData;
244
  startNodes?: StartNodeData[];
245
  destinationNode?: string;
246
  runData?: IRunData;
247
  dirtyNodeNames?: string[];
248
}
249

250
interface IUpdateInformation<T extends NodeParameterValueType = NodeParameterValueType> {
251
  name: string;
252
  key?: string;
253
  value: T;
254
  node?: string;
255
  oldValue?: string | number;
256
  type?: 'optionsOrderChanged';
257
}
258

259
// UI-specific types
260
interface NotificationOptions {
261
  message: string;
262
  title?: string;
263
  type?: 'success' | 'warning' | 'info' | 'error';
264
  duration?: number;
265
}
266

267
interface ModalState {
268
  open: boolean;
269
  mode?: string;
270
  data?: Record<string, unknown>;
271
  activeId?: string;
272
}
273

274
// Canvas types
275
type XYPosition = [number, number];
276
type DraggableMode = 'mapping' | 'panel-resize' | 'move';
277

278
interface TargetItem {
279
  nodeName: string;
280
  itemIndex: number;
281
  runIndex: number;
282
  outputIndex: number;
283
}
284
```