Workflow HQ

View Live Project →

WorkflowHQ is a React TypeScript dashboard that brings organization and clarity to N8N workflow management. It provides a centralised view of all workflow triggers with sophisticated parsing and real-time filtering capabilities.

Key Features

Intelligent Workflow Parser

  • Custom parsing engine that handles N8N's variable JSON structures across multiple versions
  • Connection graph traversal to identify trigger nodes (nodes with no incoming connections)
  • Flexible connection parsing supporting arrays, objects, and string reference formats
  • Comprehensive cron expression extraction for interval-based, triggerTimes, mode-based, and recurrence rule formats

Trigger Classification System

  • Cron Triggers: Extracts schedule expressions, timezones, and recurrence patterns
  • Webhook Triggers: Displays URLs, HTTP methods, and authentication status
  • AI Agents: Finds LangChain agents/chains anywhere in workflows with connected language models
  • LangChain Tools: Separate display of tool nodes with descriptions and metadata
  • Manual Triggers: Identifies workflows triggered on-demand

Developer Experience

  • CLI debugging tool (npm run debug:workflow) for troubleshooting workflow parsing
  • Real-time filtering by trigger type, active status, and search text
  • Multiple view modes (grouped by workflow, flat list, and sidebar navigation)
  • Guided CORS proxy setup wizard for seamless N8N API integration

Data Management

  • Direct N8N REST API integration with environment-based configuration
  • CORS solution using N8N workflow as proxy with header authentication
  • LocalStorage persistence for user configuration
  • Type-safe architecture with discriminated unions for trigger details

Tech Stack

  • Frontend: React 18, TypeScript 5, Vite 5
  • Build Tools: TypeScript compiler, Vite for fast development and optimized production builds
  • State Management: React hooks and context (no external state library)
  • API Integration: Native fetch with environment variables
  • Development: ESLint, TypeScript strict mode

Technical Highlights

  • Type Safety: Discriminated unions for trigger details, comprehensive interfaces for N8N data structures
  • Flexible Parsing: Handles multiple N8N data format variations with extensive fallback logic
  • Connection Traversal: Sophisticated graph analysis using node names (not IDs) across different connection formats
  • CORS Architecture: Innovative proxy solution using N8N workflow itself as authenticated middleware
  • Performance: Optimized workflow parsing with intelligent trigger detection and duplicate removal
  • Developer Tools: CLI debugging interface for troubleshooting complex workflow structures

More Work