tessl/npm-n8n-editor-ui

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

n8n Editor UI

Name: tessl/npm-n8n-editor-ui
Author: tessl

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;
}

Workspace: tessl
Visibility: Public
Created: 7 months ago
Last updated: 2 months ago
Describes: pkg:npm/n8n-editor-ui@1.110.x
Publish Source: CLI
Badge