Workflow Editor UI for n8n - a comprehensive Vue.js-based visual workflow editor with drag-and-drop functionality.
—
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Pending
The risk profile of this skill
Core workflow operations for creating, editing, executing, and managing automated workflows in the n8n Editor UI.
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
});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;
}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;
}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';
}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[][];
};
}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' } }]] }
}
]
}
});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;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;
}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';