CtrlK
BlogDocsLog inGet started
Tessl Logo

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

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

workflow-management.mddocs/

Workflow Management

Core workflow operations for creating, editing, executing, and managing automated workflows in the n8n Editor UI.

Capabilities

Workflow Store

Central Pinia store for managing workflow state and operations.

/**
 * Main workflow store providing centralized workflow state management
 */
interface WorkflowsStore {
  // State properties
  workflow: IWorkflowDb;
  workflowObject: Workflow;
  activeWorkflows: string[];
  workflowExecutionData: IExecutionResponse | null;
  nodeMetadata: NodeMetadataMap;
  chatMessages: string[];
  
  // Computed getters
  workflowName: string;
  workflowId: string;
  allNodes: INodeUi[];
  isNewWorkflow: boolean;
  isWorkflowRunning: boolean;
  nodesIssuesExist: boolean;
  
  // Actions - Core Workflow Operations
  setWorkflow(workflow: IWorkflowDb): void;
  resetWorkflow(): void;
  resetState(): void;
  createNewWorkflow(data: WorkflowDataCreate): Promise<IWorkflowDb>;
  updateWorkflow(id: string, data: WorkflowDataUpdate): Promise<IWorkflowDb>;
  fetchWorkflow(id: string): Promise<IWorkflowDb>;
  fetchAllWorkflows(): Promise<IWorkflowDb[]>;
  fetchWorkflowsPage(params: WorkflowSearchParams): Promise<IWorkflowsListResponse>;
  deleteWorkflow(id: string): Promise<void>;
  archiveWorkflow(id: string): Promise<void>;
  unarchiveWorkflow(id: string): Promise<void>;
  
  // Actions - Workflow State Management
  setWorkflowActive(targetWorkflowId: string): void;
  setWorkflowInactive(targetWorkflowId: string): void;
  setWorkflowName(data: { newName: string; setStateDirty: boolean }): void;
  setWorkflowSettings(settings: IWorkflowSettings): void;
  setWorkflowPinData(data: IPinData): void;
  setWorkflowTagIds(tags: string[]): void;
  setWorkflowScopes(scopes: Scope[]): void;
  setWorkflowMetadata(metadata: WorkflowMetadata): void;
  
  // Actions - Node Operations
  addNode(node: INodeUi): void;
  removeNode(node: INodeUi): void;
  removeNodeById(id: string): void;
  updateNodeAtIndex(index: number, node: INodeUi): void;
  updateNodeProperties(data: INodeUpdatePropertiesInformation): void;
  setNodeValue(updateInfo: IUpdateInformation): void;
  setNodeParameters(updateInfo: IUpdateInformation): void;
  setNodePositionById(id: string, position: XYPosition): void;
  
  // Actions - Connection Operations
  addConnection(data: { connection: IConnection[] }): void;
  removeConnection(data: { connection: IConnection[] }): void;
  removeAllConnections(): void;
  removeAllNodeConnection(data: { node: INodeUi }): void;
  
  // Actions - Execution Operations
  runWorkflow(data: IStartRunData): Promise<IExecutionPushResponse>;
  setWorkflowExecutionData(executionData: IExecutionResponse | null): void;
  fetchExecutionDataById(executionId: string): Promise<IExecutionFlattedResponse>;
  deleteExecution(executionId: string): Promise<void>;
  
  // Actions - Pin Data Operations
  pinData(payload: { node: INodeUi; data: INodeExecutionData[] }): void;
  unpinData(payload: { node: INodeUi }): void;
}

/**
 * Access the workflows store instance
 */
function useWorkflowsStore(): WorkflowsStore;

Usage Example:

import { useWorkflowsStore } from '@/stores/workflows.store';

const workflowsStore = useWorkflowsStore();

// Create new workflow
const workflow = await workflowsStore.createNewWorkflow({
  name: 'Data Processing Pipeline',
  nodes: [],
  connections: {}
});

// Add a node
workflowsStore.addNode({
  id: 'start-node',
  name: 'When clicking "Test workflow"',
  type: 'n8n-nodes-base.manualTrigger',
  position: [240, 300],
  parameters: {}
});

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

Workflow Creation

Create new workflows with initial configuration.

/**
 * Create a new workflow with specified configuration
 * @param data - Workflow creation data
 * @returns Promise resolving to created workflow
 */
function createNewWorkflow(data: WorkflowDataCreate): Promise<IWorkflowDb>;

interface WorkflowDataCreate {
  name: string;
  nodes?: INodeUi[];
  connections?: IConnections;
  settings?: IWorkflowSettings;
  tags?: string[];
  meta?: WorkflowMetadata;
}

interface WorkflowMetadata {
  templateId?: string;
  instanceId?: string;
  templateCredsSetupCompleted?: boolean;
  category?: string;
}

Workflow Updates

Update existing workflows with new data.

/**
 * Update an existing workflow
 * @param id - Workflow ID to update
 * @param data - Updated workflow data
 * @returns Promise resolving to updated workflow
 */
function updateWorkflow(id: string, data: WorkflowDataUpdate): Promise<IWorkflowDb>;

interface WorkflowDataUpdate {
  name?: string;
  nodes?: INodeUi[];
  connections?: IConnections;
  settings?: IWorkflowSettings;
  tags?: string[];
  active?: boolean;
  pinData?: IPinData;
  versionId?: string;
  meta?: WorkflowMetadata;
}

Node Management

Add, remove, and modify nodes within workflows.

/**
 * Add a new node to the current workflow
 * @param node - Node data to add
 */
function addNode(node: INodeUi): void;

/**
 * Remove a node from the current workflow
 * @param node - Node to remove
 */
function removeNode(node: INodeUi): void;

/**
 * Update a node parameter value
 * @param updateInfo - Parameter update information
 */
function setNodeValue(updateInfo: IUpdateInformation): void;

interface INodeUi extends INode {
  position: XYPosition;
  color?: string;
  notes?: string;
  issues?: INodeIssues;
  name: string;
  pinData?: IDataObject;
  draggable?: boolean;
}

interface IUpdateInformation<T = NodeParameterValueType> {
  name: string;        // Node name
  key?: string;        // Parameter key path
  value: T;           // New parameter value
  node?: string;      // Target node name
  oldValue?: string | number;
  type?: 'optionsOrderChanged';
}

Connection Management

Manage connections between workflow nodes.

/**
 * Add a connection between nodes
 * @param data - Connection data
 */
function addConnection(data: { connection: IConnection[] }): void;

/**
 * Remove a connection between nodes
 * @param data - Connection data to remove
 */
function removeConnection(data: { connection: IConnection[] }): void;

interface IConnection {
  node: string;
  type: NodeConnectionType;
  index: number;
}

interface IConnections {
  [key: string]: {
    [key: string]: IConnection[][];
  };
}

Workflow Execution

Execute workflows and manage execution state.

/**
 * Execute a workflow with specified configuration
 * @param data - Execution configuration
 * @returns Promise resolving to execution response
 */
function runWorkflow(data: IStartRunData): Promise<IExecutionPushResponse>;

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

interface IExecutionPushResponse {
  executionId?: string;
  waitingForWebhook?: boolean;
}

interface StartNodeData {
  name: string;
  sourceData?: ITaskData;
}

Usage Example:

// Execute workflow from specific node
await workflowsStore.runWorkflow({
  workflowData: workflowsStore.workflow,
  startNodes: [{ name: 'HTTP Request' }],
  destinationNode: 'Data Processing'
});

// Execute with custom run data
await workflowsStore.runWorkflow({
  workflowData: workflowsStore.workflow,
  runData: {
    'HTTP Request': [
      {
        startTime: new Date().getTime(),
        executionTime: 0,
        data: { main: [[{ json: { id: 1, name: 'test' } }]] }
      }
    ]
  }
});

Workflow Helpers

Utility functions for common workflow operations.

/**
 * Composable providing workflow helper functions
 */
function useWorkflowHelpers(): {
  getWorkflowDataToSave(): IWorkflowDataUpdate;
  saveCurrentWorkflow(options?: { tags?: string[] }): Promise<void>;
  getCurrentWorkflow(copyData?: boolean): Workflow;
  getWorkflowDataToSave(): IWorkflowDataUpdate;
};

/**
 * Get workflow data prepared for saving
 * @returns Workflow data ready for API submission
 */
function getWorkflowDataToSave(): IWorkflowDataUpdate;

/**
 * Save the current workflow to backend
 * @param options - Save options including tags
 */
function saveCurrentWorkflow(options?: { tags?: string[] }): Promise<void>;

/**
 * Get current workflow object instance
 * @param copyData - Whether to copy workflow data
 * @returns Workflow execution object
 */
function getCurrentWorkflow(copyData?: boolean): Workflow;

Workflow Settings

Configure workflow execution and behavior settings.

interface IWorkflowSettings extends IWorkflowSettingsWorkflow {
  errorWorkflow?: string;
  timezone?: string;
  executionTimeout?: number;
  maxExecutionTimeout?: number;
  callerIds?: string;
  callerPolicy?: WorkflowSettings.CallerPolicy;
  executionOrder: NonNullable<IWorkflowSettingsWorkflow['executionOrder']>;
}

interface IWorkflowSettingsWorkflow {
  executionOrder: 'v0' | 'v1';
  saveDataErrorExecution: 'all' | 'none';
  saveDataSuccessExecution: 'all' | 'none';
  saveManualExecutions: boolean;
  saveExecutionProgress: boolean;
  callerPolicy?: string;
  callerIds?: string;
}

Types

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

interface NodeMetadataMap {
  [nodeName: string]: INodeMetadata;
}

interface INodeMetadata {
  parametersLastUpdatedAt?: number;
  pinnedDataLastRemovedAt?: number;
  pristine: boolean;
}

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

docs

api-client.md

canvas-operations.md

component-system.md

composables.md

index.md

state-management.md

workflow-management.md

tile.json