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

Download [16.5KB]

Nodes

+3

💪 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

Generate your n8n API key
Set up GitHub repository & access tokens
Create Generic Basic Auth credentials
Create Generic Header Auth credentials
Set the workflow variables
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.