Back to Templates
  • +8

🔄 Workflow Repos8r: Github Version Control User Interface for n8n Workflows

Last update

Last update 2 months ago

Share

🔥 n8n Members Sale – n8n Community Members Get ideoGener8r for Just $10! (Reg. $15)
Use Coupon Code: FeelinTheFlowgramming
(Valid for n8n community members)

💪 How it works

Seamlessly track, manage, and version-control your n8n workflows with an intuitive Git-style system. Whether you're making updates or creating new workflows, this tool ensures structured commits, detailed change tracking, and seamless GitHub integration—all within a Matrix-inspired UI.

🎯 Who is this for?

Perfect for:

  • n8n Developers & Automation Engineers – Maintain workflow history and prevent accidental overwrites.
  • Teams Collaborating on Automation – Track and commit changes with structured version control.
  • DevOps & IT Professionals – Streamline deployment across multiple n8n environments.

🚀 Key Features

Version Control & Workflow Management

  • Commit changes when editing existing workflows
  • Create & commit new workflows from scratch
  • Detect modifications with deep node comparison
  • Access repo with direct links from changes window
  • Workflow JSON Browser Caching **to avoid large loads on n8n"

Core Features

Workflow Management

  • Workflow Selection: Easy selection of n8n workflows and GitHub workflows from dropdown menus
  • Smart Caching: Client-side caching of workflows for faster loading (1-week cache duration)
  • Cache Control: Manual cache clearing via hard refresh (Cmd+Shift+R)
  • Matrix-Style UI: Terminal-inspired interface with glowing effects and animations

GitHub Integration

  • Push to GitHub: Direct pushing of n8n workflows to GitHub repositories
  • Commit Control: Automated commit message generation with workflow details
  • Branch Management: Automatic branch creation and management
  • Pull from GitHub: Future feature for pulling workflows from GitHub (Coming Soon)

Workflow Comparison

  • Side-by-Side Comparison: Compare n8n workflows with their GitHub counterparts
  • Change Detection: Automatic detection and highlighting of workflow changes
  • Diff Visualization: Clear visualization of additions, deletions, and modifications
  • JSON Validation: Ensures workflow JSON integrity before operations

User Experience

  • System Notifications: Matrix-themed toast notifications for important alerts
    • 30-second duration with manual close option
    • Context-aware messages (e.g., cache refresh hints)
    • Glowing effects matching system console aesthetics
  • Loading Animations: Matrix-style loading indicators during operations
  • Error Handling: Clear error messages and recovery suggestions
  • Responsive Design: Adapts to different screen sizes

Security & Performance

  • Local Storage: Efficient client-side storage for workflow data
  • Header Authentication: Secure API communication with authentication tokens
  • Performance Optimization: Smart caching to reduce server load
  • Data Validation: Input validation and sanitization

Technical Features

Code Organization

  • Modular Structure: Well-organized HTML, CSS, and JavaScript
  • Component Separation: Clear separation of concerns
  • CSS Variables: Consistent styling with CSS custom properties
  • Event Handling: Robust event listeners and handlers

API Integration

  • n8n Integration: Direct communication with n8n workflow API
  • GitHub API: Seamless integration with GitHub repositories
  • RESTful Endpoints: Clean API design for workflow operations
  • Error Handling: Comprehensive error handling and user feedback

Development Features

  • Debug Mode: Console logging for development
  • Code Comments: Well-documented code sections
  • CSS Animations: Smooth transitions and effects
  • Browser Compatibility: Works across modern browsers

Future Enhancements

  • Pull workflows from GitHub repositories
  • Enhanced diff visualization
  • Additional GitHub integration features
  • Extended caching options
  • More customization options for notifications
  • Advanced workflow comparison tools

GitHub Integration

  • Push workflows directly to GitHub
  • Commit new workflows directly to GitHub
  • Auto-generate structured commit messages
  • Pull workflows from GitHub into n8n

Change Detection

  • Identifies node additions, deletions, and property modifications
  • Compares connections, settings, and configurations
  • Real-time visualization of detected changes

Sleek UI for Effortless Control

  • Matrix-style interface for a futuristic feel
  • Clear prompts to prevent accidental overwrites
  • Interactive workflow commit & sync options

🔧 Setup & Usage

  1. Generate your n8n API key
  2. Set up GitHub repository & access tokens
  3. Create Generic Basic Auth credentials
  4. Create Generic Header Auth credentials
  5. Set the workflow variables
  6. Deploy & start tracking your workflow versions

📚 Use Cases

🔹 Workflow Development – Ensure clean versioning and commit history.
🔹 Team Collaboration – Review and track modifications before deployment.
🔹 Audit & Compliance – Maintain an organized change log.

🙌 Built for the n8n Community

Created with ❤️ to bring reliable version control to the n8n community.