A web application that automatically generates clean, shareable frontend UIs for n8n workflows. This tool allows technical users to expose their n8n workflows to non-technical clients without building custom interfaces each time.
- Configure your n8n instance connection
- Secure API key storage (localStorage only)
- Connection testing and validation
- Browse all workflows from your n8n instance
- Filter workflows with webhook triggers
- Search and filter by status (active/inactive)
- Real-time workflow synchronization
- Smart field detection from webhook parameters
- Multiple field types support (text, email, number, textarea, select, date, file, etc.)
- Automatic form generation based on workflow input schema
- Responsive design for mobile and desktop
- Branding: Custom colors, titles, and descriptions
- Field Customization: Rename labels, add help text, reorder fields
- Layout Options: Single or two-column layouts
- Validation: Required fields, custom validation rules
- Success Messages: Customizable success and error messages
- Generate unique shareable URLs
- Public-facing clean UI (no app navigation)
- Copy link functionality
- Preview mode before publishing
- List of all generated UIs
- Usage statistics (submission counts)
- Quick actions (preview, copy link, delete)
- Workflow management
- Light and dark mode toggle
- Persistent theme preference
- Modern, clean design inspired by Linear and Notion
- Frontend Framework: React 18 with TypeScript
- Build Tool: Vite
- Styling: Tailwind CSS
- Routing: React Router v6
- State Management: Zustand with persistence
- Form Handling: React Hook Form
- Icons: Lucide React
- ID Generation: nanoid
n8nuimaker/
├── src/
│ ├── components/
│ │ ├── Layout.tsx # Main app layout with navigation
│ │ └── FormRenderer.tsx # Dynamic form rendering component
│ ├── pages/
│ │ ├── Dashboard.tsx # Main dashboard with UI list
│ │ ├── Settings.tsx # n8n connection configuration
│ │ ├── Workflows.tsx # Browse n8n workflows
│ │ ├── Generator.tsx # UI customization panel
│ │ ├── Preview.tsx # Preview generated UI
│ │ └── ShareableUI.tsx # Public shareable form page
│ ├── store/
│ │ └── useStore.ts # Zustand store with persistence
│ ├── types/
│ │ └── index.ts # TypeScript type definitions
│ ├── utils/
│ │ ├── nodeValidator.js # Node validation utilities
│ │ └── nodeValidator.test.js # Comprehensive test suite
│ ├── App.tsx # Main app component with routes
│ ├── main.tsx # App entry point
│ └── index.css # Global styles and Tailwind
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── tailwind.config.js
- Node.js 18+ and npm
- An n8n instance with API access
- API key from your n8n instance
- Clone the repository:
git clone <repository-url>
cd n8nuimaker- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser and navigate to
http://localhost:3000
npm run buildThe built files will be in the dist/ directory.
npm testRun tests in watch mode:
npm run test:watchGenerate coverage report:
npm run test:coverage- Navigate to Settings
- Enter your n8n base URL (e.g.,
https://my-n8n.example.com) - Enter your n8n API key
- Click "Test Connection" to verify
- Click "Save Settings"
- Navigate to Workflows
- Browse your n8n workflows that have webhook triggers
- Use the search bar to filter workflows
- Filter by status (all/active/inactive)
- Click "Create UI" on any workflow
-
Fields Tab:
- Add, remove, or reorder fields
- Customize labels, placeholders, and help text
- Set field types and validation rules
- Mark fields as required or optional
-
Branding Tab:
- Set a custom title and description
- Choose a primary color for your form
- Add a logo (coming soon)
-
Layout Tab:
- Choose between single or two-column layout
- Customize submit button text
- Set success/error messages
-
Click "Preview" to test your form
-
Click "Save & Finish" when ready
- From the Dashboard, find your generated UI
- Click the copy icon to copy the shareable link
- Share the link with your users
- Users can fill out the form, which will trigger your n8n workflow
- View submission counts on the Dashboard
- Track which workflows are most used
- See when UIs were last used
The application includes mock workflows for development and demonstration purposes. In production, these would be replaced with actual API calls to your n8n instance.
To implement real n8n API integration, update the following in src/store/useStore.ts:
// testConnection function
const response = await fetch(`${connection.baseUrl}/api/v1/workflows`, {
headers: {
'X-N8N-API-KEY': connection.apiKey,
},
});
// fetchWorkflows function
const response = await fetch(`${connection.baseUrl}/api/v1/workflows`, {
headers: {
'X-N8N-API-KEY': connection.apiKey,
},
});
const data = await response.json();
set({ workflows: data.data });And in src/components/FormRenderer.tsx:
// onSubmit function
const response = await fetch(ui.webhookUrl, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data),
});
const result = await response.json();- API keys are stored in localStorage only
- No data is sent to external servers
- All communication is direct between browser and n8n instance
- Consider implementing additional authentication for shareable UIs in production
- Logo upload for branding
- Export as standalone HTML file
- QR code generation for share links
- Embed code snippet (iframe)
- Form analytics and detailed submission logs
- Conditional field visibility
- Multi-step forms
- File upload support
- Email notifications
- Custom CSS injection
- Webhook response handling improvements
The project includes comprehensive tests for the nodeValidator utility module with 100+ test cases covering:
- Valid and invalid node configurations
- Edge cases and error conditions
- Boundary testing
- Workflow validation
- Node name sanitization
All tests are located in src/utils/nodeValidator.test.js.
MIT
Contributions are welcome! Please feel free to submit a Pull Request.
For issues or questions, please open an issue on GitHub.