0
# Component System
1

2
Vue component library providing UI elements for workflow editing, node configuration, and user interface interactions.
3

4
## Capabilities
5

6
### Core Workflow Components
7

8
Main components for workflow editing and management.
9

10
```typescript { .api }
11
/**
12
 * Node Details View component for node configuration
13
 */
14
interface NodeDetailsViewProps {
15
  workflowObject: Workflow;
16
  readOnly?: boolean;
17
  renaming?: boolean;
18
  isProductionExecutionPreview?: boolean;
19
}
20

21
interface NodeDetailsViewEvents {
22
  'save-keyboard-shortcut': (event: KeyboardEvent) => void;
23
  'value-changed': (data: IUpdateInformation) => void;
24
  'switch-selected-node': (nodeName: string) => void;
25
  'open-connection-node-creator': (data: any) => void;
26
  'stop-execution': () => void;
27
}
28

29
/**
30
 * Canvas component for visual workflow editing
31
 */
32
interface CanvasProps {
33
  id?: string;
34
  nodes: CanvasNode[];
35
  connections: CanvasConnection[];
36
  controlsPosition?: PanelPosition;
37
  readOnly?: boolean;
38
  executing?: boolean;
39
}
40

41
/**
42
 * Parameter Input component for dynamic node configuration
43
 */
44
interface ParameterInputProps {
45
  parameter: INodeProperties;
46
  value: NodeParameterValueType;
47
  path: string;
48
  isReadOnly?: boolean;
49
  hideIssues?: boolean;
50
  documentationUrl?: string;
51
  errorHighlight?: boolean;
52
  isForCredential?: boolean;
53
  eventSource?: string;
54
}
55

56
interface ParameterInputEvents {
57
  'update:value': (value: NodeParameterValueType) => void;
58
  'focus': () => void;
59
  'blur': () => void;
60
  'text-input': (value: string) => void;
61
}
62
```
63

64
### UI Layout Components
65

66
Components for application layout and navigation.
67

68
```typescript { .api }
69
/**
70
 * Main Sidebar component for navigation
71
 */
72
interface MainSidebarProps {
73
  collapsed?: boolean;
74
}
75

76
interface MainSidebarEvents {
77
  'toggle-collapse': (collapsed: boolean) => void;
78
  'menu-item-click': (item: string) => void;
79
}
80

81
/**
82
 * Main Header component with workflow controls
83
 */
84
interface MainHeaderProps {
85
  workflowName: string;
86
  workflowStatus: WorkflowTitleStatus;
87
  isReadOnly?: boolean;
88
}
89

90
interface MainHeaderEvents {
91
  'save-workflow': () => void;
92
  'execute-workflow': () => void;
93
  'stop-execution': () => void;
94
  'workflow-settings': () => void;
95
}
96

97
/**
98
 * Modal component for dialogs and overlays
99
 */
100
interface ModalProps {
101
  name: string;
102
  title?: string;
103
  subtitle?: string;
104
  width?: string;
105
  minWidth?: string;
106
  maxWidth?: string;
107
  height?: string;
108
  minHeight?: string;
109
  maxHeight?: string;
110
  showClose?: boolean;
111
  closeOnClickModal?: boolean;
112
  closeOnPressEscape?: boolean;
113
  scrollable?: boolean;
114
  centerVertically?: boolean;
115
  keepAlive?: boolean;
116
}
117
```
118

119
### Input Components
120

121
Specialized input components for parameter configuration.
122

123
```typescript { .api }
124
/**
125
 * Code Editor component with syntax highlighting
126
 */
127
interface CodeEditorProps {
128
  modelValue: string;
129
  language?: string;
130
  readOnly?: boolean;
131
  placeholder?: string;
132
  lineNumbers?: boolean;
133
  foldGutter?: boolean;
134
  autocomplete?: boolean;
135
  resizable?: boolean;
136
}
137

138
/**
139
 * Expression Editor component for n8n expressions
140
 */
141
interface ExpressionEditorProps {
142
  modelValue: string;
143
  path: string;
144
  isReadOnly?: boolean;
145
  rows?: number;
146
  additionalData?: IDataObject;
147
}
148

149
/**
150
 * Resource Locator component for API resource selection
151
 */
152
interface ResourceLocatorProps {
153
  parameter: INodeProperties;
154
  value: INodeParameterResourceLocator;
155
  path: string;
156
  isReadOnly?: boolean;
157
  inputSize?: string;
158
}
159

160
/**
161
 * Credentials Select component
162
 */
163
interface CredentialsSelectProps {
164
  parameter: INodeProperties;
165
  value: string | ICredentialsResponse;
166
  path: string;
167
  isReadOnly?: boolean;
168
  showAll?: boolean;
169
}
170
```
171

172
### Data Display Components
173

174
Components for displaying execution data and results.
175

176
```typescript { .api }
177
/**
178
 * Run Data component for displaying node execution results
179
 */
180
interface RunDataProps {
181
  nodeUi: INodeUi;
182
  runIndex: number;
183
  outputIndex: number;
184
  connectionType: NodeConnectionType;
185
  mode: 'input' | 'output';
186
  dataCount?: number;
187
  hasRunData?: boolean;
188
}
189

190
/**
191
 * JSON View component for structured data display
192
 */
193
interface JsonViewProps {
194
  value: any;
195
  maxDepth?: number;
196
  collapsed?: boolean;
197
  collapseStringsAfterLength?: number;
198
  showLength?: boolean;
199
  showType?: boolean;
200
}
201

202
/**
203
 * Binary Data component for file/binary data display
204
 */
205
interface BinaryDataProps {
206
  binaryData: IBinaryData;
207
  index: number;
208
  totalCount: number;
209
}
210

211
/**
212
 * Table View component for tabular data display
213
 */
214
interface TableViewProps {
215
  data: INodeExecutionData[];
216
  nodeUi: INodeUi;
217
  distanceFromActive?: number;
218
  branch?: number;
219
  isExecuting?: boolean;
220
}
221
```
222

223
### Workflow Creation Components
224

225
Components for creating and configuring workflows.
226

227
```typescript { .api }
228
/**
229
 * Node Creator component for adding new nodes
230
 */
231
interface NodeCreatorProps {
232
  createNodeActive: boolean;
233
  nodeCreatorView?: NodeFilterType;
234
  hasAddedNodes?: boolean;
235
}
236

237
interface NodeCreatorEvents {
238
  'toggle-activation': (active: boolean) => void;
239
  'add-nodes-and-connections': (data: AddedNodesAndConnections) => void;
240
}
241

242
/**
243
 * Node Settings component for node configuration
244
 */
245
interface NodeSettingsProps {
246
  nodeType: INodeTypeDescription;
247
  node: INodeUi;
248
  workflow: Workflow;
249
  isReadOnly?: boolean;
250
  hideDelete?: boolean;
251
}
252

253
/**
254
 * Workflow Settings component
255
 */
256
interface WorkflowSettingsProps {
257
  workflow: IWorkflowDb;
258
}
259

260
interface WorkflowSettingsEvents {
261
  'save-settings': (settings: IWorkflowSettings) => void;
262
}
263
```
264

265
### Specialized Components
266

267
Domain-specific components for advanced functionality.
268

269
```typescript { .api }
270
/**
271
 * AI Assistant component for workflow help
272
 */
273
interface AiAssistantProps {
274
  enabled: boolean;
275
  sessionId?: string;
276
}
277

278
/**
279
 * Execution List component for workflow execution history
280
 */
281
interface ExecutionListProps {
282
  executions: ExecutionSummary[];
283
  loading?: boolean;
284
  autoRefresh?: boolean;
285
}
286

287
/**
288
 * Chat component for chat-based workflows
289
 */
290
interface ChatProps {
291
  sessionId: string;
292
  messages: ChatMessage[];
293
  isLoading?: boolean;
294
}
295

296
/**
297
 * Templates component for workflow templates
298
 */
299
interface TemplatesProps {
300
  categories: string[];
301
  collections: ITemplatesCollection[];
302
  workflows: ITemplatesWorkflow[];
303
}
304
```
305

306
## Usage Examples
307

308
**Using Components in Templates:**
309

310
```vue
311
<template>
312
  <div class="workflow-editor">
313
    <!-- Canvas for workflow editing -->
314
    <Canvas
315
      :nodes="canvasNodes"
316
      :connections="canvasConnections"
317
      :read-only="isReadOnly"
318
      :executing="isExecuting"
319
      @click:node="onNodeClick"
320
      @create:node="onCreateNode"
321
      @save:workflow="onSaveWorkflow"
322
    />
323
    
324
    <!-- Node Details View for configuration -->
325
    <NodeDetailsView
326
      v-if="activeNode"
327
      :workflow-object="workflowObject"
328
      :read-only="isReadOnly"
329
      @value-changed="onParameterChange"
330
      @save-keyboard-shortcut="onSaveShortcut"
331
    />
332
    
333
    <!-- Parameter inputs -->
334
    <ParameterInput
335
      v-for="parameter in nodeParameters"
336
      :key="parameter.name"
337
      :parameter="parameter"
338
      :value="parameterValues[parameter.name]"
339
      :path="parameter.name"
340
      @update:value="updateParameter"
341
    />
342
  </div>
343
</template>
344

345
<script setup lang="ts">
346
import Canvas from '@/components/canvas/Canvas.vue';
347
import NodeDetailsView from '@/components/NodeDetailsView.vue';
348
import ParameterInput from '@/components/ParameterInput.vue';
349

350
// Component logic here
351
</script>
352
```
353

354
**Dynamic Component Rendering:**
355

356
```typescript
357
// Render parameter input based on type
358
const renderParameterInput = (parameter: INodeProperties) => {
359
  switch (parameter.type) {
360
    case 'string':
361
      return resolveComponent('ParameterInputString');
362
    case 'number':
363
      return resolveComponent('ParameterInputNumber');
364
    case 'boolean':
365
      return resolveComponent('ParameterInputBoolean');
366
    case 'collection':
367
      return resolveComponent('ParameterInputCollection');
368
    case 'credentials':
369
      return resolveComponent('CredentialsSelect');
370
    default:
371
      return resolveComponent('ParameterInput');
372
  }
373
};
374
```
375

376
## Types
377

378
```typescript { .api }
379
interface INodeProperties {
380
  displayName: string;
381
  name: string;
382
  type: NodePropertyTypes;
383
  typeOptions?: INodePropertyTypeOptions;
384
  default: NodeParameterValueType;
385
  description?: string;
386
  hint?: string;
387
  displayOptions?: IDisplayOptions;
388
  options?: Array<INodePropertyOptions | INodeProperties | INodePropertyCollection>;
389
  placeholder?: string;
390
  isNodeSetting?: boolean;
391
  noDataExpression?: boolean;
392
  required?: boolean;
393
  routing?: INodePropertyRouting;
394
  credentialTypes?: string[];
395
  extractValue?: INodePropertyValueExtractor;
396
}
397

398
type NodeParameterValueType = 
399
  | string 
400
  | number 
401
  | boolean 
402
  | undefined 
403
  | null 
404
  | GenericValue 
405
  | INodeParameters 
406
  | ResourceLocatorModes 
407
  | Expression;
408

409
interface INodeParameterResourceLocator {
410
  mode: string;
411
  value: NodeParameterValueType;
412
  cachedResultName?: string;
413
  cachedResultUrl?: string;
414
  __rl?: boolean;
415
}
416

417
interface ChatMessage {
418
  id: string;
419
  text: string;
420
  sender: 'user' | 'bot';
421
  timestamp: number;
422
  type?: 'text' | 'code' | 'workflow';
423
}
424

425
interface AddedNodesAndConnections {
426
  nodes: AddedNode[];
427
  connections: AddedNodeConnection[];
428
}
429

430
type NodeFilterType = 
431
  | 'Regular' 
432
  | 'Trigger' 
433
  | 'AI' 
434
  | 'AI_Others' 
435
  | 'AI_Uncategorized' 
436
  | 'AI_Evaluation';
437

438
type WorkflowTitleStatus = 'EXECUTING' | 'IDLE' | 'ERROR' | 'DEBUG';
439

440
type PanelPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
441
```