I am new to n8n and trying to see if I can use it in my org. I must say it looks impressive.
In an effort to create a simiar kind of automation framework for my employer, I was trying to see if I could use any open source framework already and I came across n8n.
The constraint with me in my organization is we need to start very simple and n8n is very comprehensive. We would have, initially, mostly one “kind” of workflow (and not just one workflow) but connecting different services/integrations/apps within my organization. The UI has to be very minimal meeting the org standards/themes. This workflow would almost always be using my custom nodes to connect to trigger and action services.
So I waned to customize majority of n8n as follows:
Remove most, if not all, nodes provided by n8n and provide only the new custom nodes that I create. I may inherit from nodes provided by n8n or use them internally to not expose the technical bits to end users. For e.g., I want to create a node that always connects to user selected service to do something. The service is exposed via a REST API (which is a different setup). THe users don’t know the technical API details, they just select the service. The node should then behind the scenes use http request node to do its job.
Not use the default UI but customize it to hide/show panels, change styling etc
Extend the canvas where nodes can be dropped to have some custom functionality
What is the error message (if any)?
Please share the workflow
(Select the nodes and use the keyboard shortcuts CMD+C/CTRL+C and CMD+V/CTRL+V to copy and paste the workflow respectively)
Share the output returned by the last node
Information on your n8n setup
n8n version:
Database you’re using (default: SQLite):
Running n8n with the execution process [own(default), main]:
Running n8n via [Docker, npm, n8n.cloud, desktop app]:
For e.g., I want to create a node that always connects to user selected service to do something. The service is exposed via a REST API (which is a different setup). THe users don’t know the technical API details, they just select the service. The node should then behind the scenes use http request node to do its job.
You can create and package custom nodes as described here. This custom node could then be installed on your internal instances.
Not use the default UI but customize it to hide/show panels, change styling etc
This currently requires customizing the code and there is no documented path yet I am afraid. That said, a team was working on a PoC for this last week (Jan briefly mentioned this over here), so this hopefully changes soon.
Extend the canvas where nodes can be dropped to have some custom functionality
I am not sure I fully understand this one. This will most likely involve re-writing a part of n8n’s code. Perhaps you can explain in a bit more detail what you have in mind, just to make sure I understand you correctly here?
Hey @Atul_Lohiya, I am afraid I am not at all familiar with customizing n8n (and was also not involved in the project mentioned above) so wouldn’t be able to help much here.
As per the linked thread, it shouldn’t be long before the PoC is released, so you might simply want to wait until this happens.
No worries. Please see my answers below to your queries:
When using NODES_EXCLUDE, is it possible to exclude all with (*) wildcard characters and then include only the ones that I need?
If I understand it right, if I create a new node, it will get loaded into UI only at startup. It means everytime I have to make a new node or make any changes to existing one, I have to redeploy entire framework again? It is only at startup after deployment shall the node changes be visible?
Above point also means that I will have to use the default UI that n8n provides so that the node changes become visible. Is it possible to simply not use the default UI at all and instead hook up my own UI?
This also means there should be REST APIs available in n8n for “everything” so that I can call them from my custom UI. Are there any such APIs available to do things like creating triggers, actions (nodes) or anything else?
I understand your point about customizing the default UI that it would require code changes and there is no documentation available for that yet. I will wait for the POC changes to be live, hopefully, soon!
By “extend the canvas” I meant what I mentioned in point 3 above - create an entire UI from scratch that hooks up with n8n APIs. That is obviously a huge task. It would be easier if I can simple inherit from existing UI related code creating my own UI. That should allow me to hook up my custom UI rather easily. By canvas I meant the UI editor where you can drag-drop nodes and connect them. I am hoping that canvas is what supports all this drag-drop functionality.
So summing all above points, I could just derive my custom UI classes from this default canvas thus inheriting all the drag-drop capabilities and then exclude all the default nodes and include only the ones needed along with any custom nodes that I create. Further call any n8n REST APIs to do whatever I want.
You can use NODES_INCLUDE to opt-in nodes instead of using NODES_EXCLUDE to opt-out.
Right now you have to redeploy your custom nodes with n8n for your production environments. We are working on a sideloading approach to install nodes from npm packages using the UI, but I am not sure if this is helpful to your use case.
Yes it is possible to hookup your own UI using our n8n public REST API. Using our latest n8n version look at the settings menu to create an api key.
To customize the editor-ui you should look into packages/editor-ui and packages/design-system. As already mentioned we are preparing a poc that will be released with other styling improvements soon.
