n8n Atom VS Code Extension

🚀 n8n Atom is a powerful VS Code extension that brings the n8n workflow automation platform directly into your editor. With this extension, you can create, manage, and monitor your n8n workflows without leaving VS Code.

Features

• 🚀 Integrated n8n Server: Automatically starts and manages the n8n server using npx n8n-atom
• 🌐 Webview Integration: Full n8n interface embedded within VS Code
• ⚡ Auto-start: Automatically starts the server when you open the panel
• 🔄 Server Management: Start, stop, and restart the n8n server with ease
• 📊 Status Monitoring: Real-time server status and health checks
• 🔧 Configuration: Customizable server port and auto-start settings
• 📝 Logging: Comprehensive logging for debugging and monitoring

What is n8n?

n8n is a workflow automation platform that gives technical teams the flexibility of code with the speed of no-code. With 400+ integrations, native AI capabilities, and a fair-code license, n8n lets you build powerful automations while maintaining full control over your data and deployments.

Key Capabilities

• Code When You Need It: Write JavaScript/Python, add npm packages, or use the visual interface
• AI-Native Platform: Build AI agent workflows based on LangChain with your own data and models
• Full Control: Self-host with our fair-code license or use our cloud offering
• Enterprise-Ready: Advanced permissions, SSO, and air-gapped deployments
• Active Community: 400+ integrations and 900+ ready-to-use templates

Installation

1. Install the extension from the VS Code marketplace
2. Ensure you have Node.js installed on your system
3. The extension will automatically handle the n8n-atom package installation

Usage

Quick Start

1. Open the Extension: Click the 🚀 n8n Atom status bar item or use the command palette
2. Auto-start: The server will automatically start (if enabled in settings)
3. Access n8n: The full n8n interface will load in the webview panel

Commands

• n8n-atom.open: Open the n8n Atom panel
• n8n-atom.startServer: Start the n8n server
• n8n-atom.stopServer: Stop the n8n server
• n8n-atom.restartServer: Restart the n8n server
• n8n-atom.showLogs: Show the extension logs

Configuration

The extension provides several configuration options:

{
  "n8n-atom.serverPort": 5678,
  "n8n-atom.autoStartServer": true,
  "n8n-atom.packageVersion": "1.108.4"
}

• serverPort: Port number for the n8n server (default: 5678)
• autoStartServer: Automatically start the server when opening the panel (default: true)
• packageVersion: n8n-atom package version to use (default: latest)

How It Works

1. Package Management: The extension checks if n8n-atom is available and updates it if needed
2. Server Launch: Uses npx n8n-atom to start the server with proper environment configuration
3. Health Monitoring: Continuously monitors server health and readiness
4. Webview Integration: Embeds the n8n interface in a VS Code webview panel
5. Process Management: Handles server lifecycle, startup, and shutdown

Requirements

• VS Code: Version 1.74.0 or higher
• Node.js: Version 18 or higher
• npm/npx: For package management

Troubleshooting

Common Issues

1. Server Won't Start

   • Check if Node.js is installed and accessible
   • Verify the port isn't already in use
   • Check the extension logs for detailed error messages

2. Package Installation Issues

   • Ensure you have internet access for npm downloads
   • Try running npm install -g n8n-atom manually
   • Check npm configuration and permissions

3. Port Conflicts

   • Change the server port in VS Code settings
   • Ensure no other services are using the configured port

Getting Help

• Check the extension logs: n8n-atom.showLogs
• Review the VS Code output panel
• Ensure your system meets the requirements
• Try restarting VS Code

Development

Building from Source

1. Clone the repository
2. Install dependencies: npm install
3. Compile TypeScript: npm run compile
4. Package the extension: npm run package

Project Structure

src/
├── extension.ts      # Main extension entry point
├── server.ts         # Server management and process handling
├── webview.ts        # Webview panel and UI management
└── logger.ts         # Logging utilities

Contributing

Contributions are welcome! Please feel free to submit issues, feature requests, or pull requests.

License

This extension is licensed under the same terms as n8n. See the n8n license for details.

Acknowledgments

• Built on the amazing n8n platform
• Inspired by the httptoolkit-vscode extension architecture
• Powered by the VS Code extension API

Support

• Extension Issues: Use the GitHub issues page
• n8n Support: Visit community.n8n.io
• Documentation: Check docs.n8n.io

Happy automating! 🚀