or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

api-client.mdcanvas-operations.mdcomponent-system.mdcomposables.mdindex.mdstate-management.mdworkflow-management.md
tile.json

tessl/npm-n8n-editor-ui

Workflow Editor UI for n8n - a comprehensive Vue.js-based visual workflow editor with drag-and-drop functionality.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/n8n-editor-ui@1.110.x

To install, run

npx @tessl/cli install tessl/npm-n8n-editor-ui@1.110.0

index.mddocs/

n8n Editor UI

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.

Package Information

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

Core Imports

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:

// Stores (Pinia)
import { useWorkflowsStore } from '@/stores/workflows.store';
import { useNDVStore } from '@/stores/ndv.store';
import { useUIStore } from '@/stores/ui.store';

// Composables
import { useCanvasNode } from '@/composables/useCanvasNode';
import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
import { useKeybindings } from '@/composables/useKeybindings';

// Utilities
import { nodeViewUtils } from '@/utils/nodeViewUtils';
import { mapLegacyConnectionsToCanvasConnections, mapCanvasConnectionToLegacyConnection } from '@/utils/canvasUtils';

// Types
import type { IWorkflowDb, INodeUi, CanvasNodeData } from '@/Interface';

Basic Usage

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

// Creating and managing workflows
const workflowsStore = useWorkflowsStore();

// Create a new workflow
await workflowsStore.createNewWorkflow({
  name: 'My Workflow',
  nodes: [],
  connections: {}
});

// Add nodes to workflow
workflowsStore.addNode({
  id: 'node-1',
  name: 'HTTP Request',
  type: 'n8n-nodes-base.httpRequest',
  position: [100, 100],
  parameters: {}
});

// Execute workflow
await workflowsStore.runWorkflow({
  workflowData: workflowsStore.workflow
});

Architecture

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

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

Capabilities

Workflow Management

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

interface IWorkflowDb {
  id: string;
  name: string;
  active: boolean;
  isArchived: boolean;
  createdAt: number | string;
  updatedAt: number | string;
  nodes: INodeUi[];
  connections: IConnections;
  settings?: IWorkflowSettings;
  tags?: ITag[] | string[];
  pinData?: IPinData;
  sharedWithProjects?: ProjectSharingData[];
  homeProject?: ProjectSharingData;
  scopes?: Scope[];
  versionId: string;
  usedCredentials?: IUsedCredential[];
  meta?: WorkflowMetadata;
  parentFolder?: { id: string; name: string };
}

function createNewWorkflow(data: WorkflowDataCreate): Promise<IWorkflowDb>;
function updateWorkflow(id: string, data: WorkflowDataUpdate): Promise<IWorkflowDb>;
function runWorkflow(data: IStartRunData): Promise<IExecutionPushResponse>;

Workflow Management

Canvas Operations

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

interface CanvasNodeData {
  id: string;
  name: string;
  type: string;
  position: [number, number];
  disabled: boolean;
  inputs: CanvasConnectionPort[];
  outputs: CanvasConnectionPort[];
}

interface CanvasConnectionPort {
  type: NodeConnectionType;
  index: number;
  required?: boolean;
  maxConnections?: number;
}

Canvas Operations

State Management

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

interface WorkflowsStore {
  // State
  workflow: IWorkflowDb;
  activeWorkflows: string[];
  workflowExecutionData: IExecutionResponse | null;
  
  // Getters
  workflowName: string;
  allNodes: INodeUi[];
  isWorkflowRunning: boolean;
  
  // Actions
  setWorkflow(workflow: IWorkflowDb): void;
  addNode(node: INodeUi): void;
  removeNode(node: INodeUi): void;
  addConnection(connection: IConnection[]): void;
}

State Management

Component System

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

interface NodeDetailsViewProps {
  workflowObject: Workflow;
  readOnly?: boolean;
  renaming?: boolean;
  isProductionExecutionPreview?: boolean;
}

interface ParameterInputProps {
  parameter: INodeProperties;
  value: NodeParameterValueType;
  path: string;
  isReadOnly?: boolean;
}

Component System

Composables

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

interface UseCanvasNodeReturn {
  node: InjectedCanvasNode;
  id: ComputedRef<string>;
  name: ComputedRef<string>;
  inputs: ComputedRef<CanvasConnectionPort[]>;
  outputs: ComputedRef<CanvasConnectionPort[]>;
  isSelected: ComputedRef<boolean>;
  isDisabled: ComputedRef<boolean>;
}

function useCanvasNode(): UseCanvasNodeReturn;
function useWorkflowHelpers(): WorkflowHelpersReturn;
function useKeybindings(keymap: KeyMap, options?: KeybindingOptions): void;

Composables

API Client

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

interface WorkflowsAPI {
  getWorkflow(id: string): Promise<IWorkflowDb>;
  createWorkflow(data: WorkflowDataCreate): Promise<IWorkflowDb>;
  updateWorkflow(id: string, data: WorkflowDataUpdate): Promise<IWorkflowDb>;
  deleteWorkflow(id: string): Promise<void>;
  executeWorkflow(data: IStartRunData): Promise<IExecutionPushResponse>;
}

interface CredentialsAPI {
  getAllCredentials(): Promise<ICredentialsResponse[]>;
  createCredential(data: ICredentialsDecrypted): Promise<ICredentialsResponse>;
  updateCredential(id: string, data: ICredentialsDecrypted): Promise<ICredentialsResponse>;
  testCredential(data: ICredentialsDecrypted): Promise<INodeCredentialTestResult>;
}

API Client

Types

// Core workflow types
interface INodeUi extends INode {
  position: XYPosition;
  color?: string;
  notes?: string;
  issues?: INodeIssues;
  name: string;
  pinData?: IDataObject;
}

interface IStartRunData {
  workflowData: WorkflowData;
  startNodes?: StartNodeData[];
  destinationNode?: string;
  runData?: IRunData;
  dirtyNodeNames?: string[];
}

interface IUpdateInformation<T extends NodeParameterValueType = NodeParameterValueType> {
  name: string;
  key?: string;
  value: T;
  node?: string;
  oldValue?: string | number;
  type?: 'optionsOrderChanged';
}

// UI-specific types
interface NotificationOptions {
  message: string;
  title?: string;
  type?: 'success' | 'warning' | 'info' | 'error';
  duration?: number;
}

interface ModalState {
  open: boolean;
  mode?: string;
  data?: Record<string, unknown>;
  activeId?: string;
}

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

interface TargetItem {
  nodeName: string;
  itemIndex: number;
  runIndex: number;
  outputIndex: number;
}