I’m working with n8n for workflow automation and I want to change how the interface looks. I’ve been using the default UI but I need to make some customizations to fit my project better.
I’m wondering if there’s a way to customize the user interface elements in n8n workflows. Maybe through custom CSS or configuration files? I’ve looked through the documentation but couldn’t find clear instructions on this.
Has anyone successfully modified the n8n interface before? What approach did you use? Any tips or examples would be really helpful. I’m open to different methods as long as they work reliably.
Been there, done that. Modifying n8n’s interface directly is a pain. I’ve found it’s way more stable to build custom wrapper interfaces that talk to n8n through its API instead of messing with the core UI files. Your customizations won’t break when updates roll out.
What worked great for me was using browser extensions or user scripts to inject custom CSS. Stylus or Tampermonkey are perfect for this. You get the visual changes you want without touching the original n8n installation.
If you’re dead set on modifying source files, document everything and backup your changes. Trust me - I lost hours of work when an update wiped out my customizations.
for sure! if ur self-hosting, go to the editor-ui folder. you can tweak some env variables for theming too. just keep in mind, using docker can complicate things, since updates may overwrite ur customizations.
Modifying n8n’s UI can be approached by directly changing the CSS variables in the source code. If you’re hosting n8n from source, navigate to packages/editor-ui/src/components and locate the main styling files; the theme variables can be found in the styles directory. For Docker deployments, it’s possible to mount a custom volume that includes your modified CSS files, though you will need to rebuild the frontend to apply your changes. It’s essential to familiarize yourself with n8n’s component structure, which you can do using browser developer tools to inspect elements and find the appropriate selectors. Do note that some UI elements are generated dynamically, requiring you to employ higher specificity CSS or utilize JavaScript for aspects like modals and dropdowns.