n8n Editor UI Design Pattern

n8n logo
n8n Editor

Artificial Intelligence

This is the editor design from n8n, a artificial intelligence application. n8n n8n is a workflow automation platform for building AI agents and multi-step automations with a visual node editor, 1,000+ integrations and custom code. Its UI covers an AI assistant that drafts workflows from a prompt, a canvas editor with trigger and node pickers, an AI Agent node with chat model, memory and tools, credentials, executions and variables, a workflow template library, Cloud onboarding and instance settings, and Starter, Pro, Business and Enterprise plans priced by workflow executions, with a self-hosted option. Editor UI designs from leading SaaS products. Rich text editors, code editors, drag-and-drop builders, and canvas tools. We have 2 editor screenshots from n8n showing different states and variations of this pattern.

n8n workflow editor canvas with Add first step and Build with AI buttons and Editor, Executions and Evaluations tabs

Workflow editor — empty canvas

n8n AI Agent node settings with prompt source, input and output panels and chat model, memory and tool slots

AI Agent node — parameters, input and output

View all n8n screenshotsVisit n8nBrowse all editor patterns →