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

State Management

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

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

Capabilities

Workflows Store

Central store for workflow state and operations.

interface WorkflowsStore {
  // State
  workflow: IWorkflowDb;
  workflowObject: Workflow;
  activeWorkflows: string[];
  workflowExecutionData: IExecutionResponse | null;
  nodeMetadata: NodeMetadataMap;
  
  // Getters
  workflowName: string;
  workflowId: string;
  allNodes: INodeUi[];
  isWorkflowRunning: boolean;
  nodesIssuesExist: boolean;
  
  // Actions
  setWorkflow(workflow: IWorkflowDb): void;
  addNode(node: INodeUi): void;
  removeNode(node: INodeUi): void;
  runWorkflow(data: IStartRunData): Promise<IExecutionPushResponse>;
}

function useWorkflowsStore(): WorkflowsStore;

NDV Store

Node Details View state management.

interface NDVStore {
  // State
  activeNodeName: string | null;
  input: InputPanel;
  output: OutputPanel;
  focusedMappableInput: string;
  draggable: Draggable;
  
  // Getters
  activeNode: INodeUi | null;
  ndvInputData: INodeExecutionData[];
  hasInputData: boolean;
  isNDVOpen: boolean;
  
  // Actions
  setActiveNodeName(nodeName: string, source?: string): void;
  unsetActiveNodeName(): void;
  setPanelDisplayMode(params: { panel: 'input' | 'output'; mode: IRunDataDisplayMode }): void;
  draggableStartDragging(params: DragStartParams): void;
}

function useNDVStore(): NDVStore;

interface InputPanel {
  nodeName?: string;
  run?: number;
  branch?: number;
  data: { isEmpty: boolean };
}

interface OutputPanel {
  run?: number;
  branch?: number;
  data: { isEmpty: boolean };
  editMode: { enabled: boolean; value: string };
}

UI Store

General UI state management.

interface UIStore {
  // State
  stateIsDirty: boolean;
  lastSelectedNode: string;
  modals: Record<string, ModalState>;
  sidebarMenuCollapsed: boolean;
  isPageLoading: boolean;
  
  // Getters
  isReadOnlyRoute: boolean;
  contextBasedTranslationKeys: string[];
  
  // Actions
  setStateIsDirty(isDirty: boolean): void;
  setLastSelectedNode(nodeName: string): void;
  openModal(key: string, data?: any): void;
  closeModal(key: string): void;
}

function useUIStore(): UIStore;

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

Settings Store

Application settings and configuration.

interface SettingsStore {
  // State
  settings: FrontendSettings;
  userManagement: IUserManagementSettings;
  templatesEndpointHealthy: boolean;
  
  // Getters
  isUserManagementEnabled: boolean;
  isLdapLoginEnabled: boolean;
  isSamlLoginEnabled: boolean;
  
  // Actions
  setSettings(settings: FrontendSettings): void;
  setUserManagementSettings(settings: IUserManagementSettings): void;
}

function useSettingsStore(): SettingsStore;

Node Types Store

Node type definitions and metadata.

interface NodeTypesStore {
  // State
  nodeTypes: NodeTypesByTypeNameAndVersion;
  
  // Getters
  allNodeTypes: INodeTypeDescription[];
  visibleNodeTypes: INodeTypeDescription[];
  
  // Actions
  setNodeTypes(nodeTypes: INodeTypeDescription[]): void;
  removeNodeTypes(nodeTypes: string[]): void;
}

function useNodeTypesStore(): NodeTypesStore;

interface NodeTypesByTypeNameAndVersion {
  [nodeType: string]: {
    [version: number]: INodeTypeDescription;
  };
}

Credentials Store

Credential management state.

interface CredentialsStore {
  // State
  credentialTypes: ICredentialTypeMap;
  credentials: ICredentialMap;
  
  // Getters
  allCredentials: ICredentialsResponse[];
  allCredentialTypes: ICredentialType[];
  
  // Actions
  setCredentials(credentials: ICredentialsResponse[]): void;
  setCredentialTypes(credentialTypes: ICredentialType[]): void;
  deleteCredential(id: string): void;
  updateCredential(credential: ICredentialsResponse): void;
}

function useCredentialsStore(): CredentialsStore;

Users Store

User authentication and profile management.

interface UsersStore {
  // State
  users: Record<string, IUser>;
  currentUser: IUser | null;
  personalizedNodeTypes: string[];
  
  // Getters
  allUsers: IUser[];
  currentUserCloudInfo: IUserCloudInfo | null;
  isDefaultUser: boolean;
  
  // Actions
  addUsers(users: IUser[]): void;
  deleteUser(userId: string): Promise<void>;
  updateUser(params: { id: string; data: Partial<IUser> }): Promise<void>;
  updateCurrentUser(data: Partial<IUser>): Promise<void>;
}

function useUsersStore(): UsersStore;

Projects Store

Project and team management.

interface ProjectsStore {
  // State
  projects: Record<string, Project>;
  currentProjectId: string | null;
  
  // Getters
  allProjects: Project[];
  currentProject: Project | null;
  personalProject: Project | null;
  
  // Actions
  setProjects(projects: Project[]): void;
  setCurrentProjectId(projectId: string): void;
  createProject(data: ProjectCreateRequest): Promise<Project>;
  updateProject(data: ProjectUpdateRequest): Promise<Project>;
}

function useProjectsStore(): ProjectsStore;

Usage Examples

Basic Store Usage:

import { useWorkflowsStore, useUIStore } from '@/stores';

const workflowsStore = useWorkflowsStore();
const uiStore = useUIStore();

// Access state
console.log(workflowsStore.workflowName);
console.log(uiStore.stateIsDirty);

// Use getters
if (workflowsStore.isWorkflowRunning) {
  console.log('Workflow is executing...');
}

// Call actions
workflowsStore.setWorkflow(newWorkflow);
uiStore.setStateIsDirty(true);

Reactive Store Access:

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

const workflowsStore = useWorkflowsStore();

// Reactive computed values
const nodeCount = computed(() => workflowsStore.allNodes.length);
const hasUnsavedChanges = computed(() => workflowsStore.stateIsDirty);
const currentStatus = computed(() => {
  return workflowsStore.isWorkflowRunning ? 'Running' : 'Idle';
});

Types

interface IWorkflowDb {
  id: string;
  name: string;
  active: boolean;
  nodes: INodeUi[];
  connections: IConnections;
  settings?: IWorkflowSettings;
  tags?: ITag[];
  versionId: string;
}

interface FrontendSettings {
  isDocker: boolean;
  databaseType: 'sqlite' | 'mariadb' | 'postgresdb' | 'mysqldb';
  previewMode: boolean;
  endpointWebhook: string;
  endpointWebhookTest: string;
  saveDataErrorExecution: string;
  saveDataSuccessExecution: string;
  saveManualExecutions: boolean;
  timezone: string;
  executionTimeout: number;
  maxExecutionTimeout: number;
  workflowCallerPolicyDefaultOption: string;
  variables: {
    ui: boolean;
  };
  expressions: {
    evaluator: string;
  };
  publicApi: {
    enabled: boolean;
    latestVersion: number;
    path: string;
    swaggerUi: {
      enabled: boolean;
    };
  };
  workflowTagsDisabled: boolean;
  logLevel: string;
  hiringBannerEnabled: boolean;
  templates: {
    enabled: boolean;
    host: string;
  };
  onboardingCallPromptEnabled: boolean;
  executionMode: string;
  pushBackend: string;
  communityNodesEnabled: boolean;
  deployment: {
    type: string;
  };
  personalizationSurveyEnabled: boolean;
  defaultLocale: string;
  userManagement: {
    enabled: boolean;
    smtpSetup: boolean;
    authenticationMethod: string;
  };
  sso: {
    saml: {
      enabled: boolean;
      loginEnabled: boolean;
      loginLabel: string;
    };
    ldap: {
      enabled: boolean;
      loginEnabled: boolean;
      loginLabel: string;
    };
  };
  mfa: {
    enabled: boolean;
  };
  enterprise: Record<string, boolean>;
}

interface Draggable {
  isDragging: boolean;
  type: string;
  data: string;
  dimensions: DOMRect | null;
  activeTarget: { id: string; stickyPosition: null | XYPosition } | null;
}

type IRunDataDisplayMode = 'table' | 'json' | 'binary' | 'schema' | 'html' | 'ai';