We are experimenting with adding a new way of editing nodes without leaving the canvas, and would love your feedback on it!
Context
We are continuing to investigate the building experience of n8n and how we can improve it. This includes some big initiatives, such as AI-powered workflow building (coming soon!), but also smaller ones to make the day-to-day editing of nodes and understanding of workflows easier.
About the focus panel
One of these experiments we’re calling the focus panel. It’s about showing node parameters on the right-hand side of the canvas when you select the node.
We hope that combined with the logs panel, this feature means you’ll need to double-click nodes less often and can keep the workflow diagram visible while editing them. The node details view (the modal that opens when you double-click a node) won’t be going away, though — this is just an alternative.
It’s still an experiment and it doesn’t work perfectly, but it’s at the point where it can be used for most workflow-building situations.
We’d love your feedback on it. Whether we roll it out more generally to all users depends on whether you feel it’s a useful addition.
How to get access
Check you’re on n8n v1.113.0 or higher (in the left menu, go to ‘Help’ > ‘About n8n’)
Open your browser’s developer tools, enter the following command in the console and hit enter:
I just tested it, it looks like a great addition for quickly start building a workflow..
However, I hope this feature remains an optional choice and doesn’t completely replace the current approach (the node details view).
After building something quickly, I’d still prefer to open the detailed view whenever I double-click a node,
For me personally, being able to see the input and output, with the node options in between, really helps me understand and map data correctly. That layout is very clear and intuitive on its own.
I noticed the expand option in the focus panel, but I’d still like to keep the current detailed view. I don’t mind having to click a few times, that’s totally fine with me.
So in general, if there’s ever a plan to replace the current view entirely, please consider making it an option in the settings, allowing users to choose which UI mode to use on the canvas (details view / focus panel)..
I’ll keep using it and share more feedback if I notice anything else.
Sensational.
I haven’t tried it yet, but just from the demo, I can see it’s going to be a game-changer. Having to open and close the modal every time ends up breaking the flow. I think this will help a lot.
Hi, and thank you for sharing this. I sent a large amount of feedback to you. I am the one who did not fully read the post and said it does not work, but the feature flag terminal item did the trick, so thank you for that.
Here are some of my big takeaways:
Adding a node with the focus panel open adds too much complexity to the screen (see attached)
If you do not have a node selected, the focus panel takes up valuable real estate. I would appreciate an auto-collapse and auto-open option (whether an option or a “smart” option that knows when to open and collapse the panel (see attached)
I kept forgetting how to close the panel, and with that little play
The arrow that displays at the top-right of a node in the focus panel, I selected that a few times, thinking I was collapsing the panel. I personally think a better location for the panel would be above the canvas, where the “save, share, history” options are located. Something that is above the UI and not contained within the canvas. Or, on the left panel, there is a little `<` back arrow to collapse it. I wonder if you can use the same UI for the right panel? (See attached.)
In general, working with binary files is a challenge with n8n because no 'drag-and-drop’ field represents a binary file. That issue is worse with the new focus panel. I don’t think this is a focus panel issue, per se, but it is an n8n UI issue. For example, if you want the output of “file” to be the input to a new node, you cannot just see “file” in the input list and drag-and-drop it over. I hope that makes sense. (see attached)
You might want to reconsider how you display error messages in n8n. Currently, they are large, chunky blocks at the bottom-right of the UI. While I am not a big fan of them, they generally stay out of the way while you are working in n8n. However, they can block essential features in the focus panel (see the attached document). (see attached)
Overall, I like the feature and would use it! In fact, I would prefer it over the default full-node pop-up dialog. I do not know if you track usage like this, but I know I press the esc key a lot in n8n as opposed to other apps.
Included are screenshots of a few issues you might want to address to improve the Focus Panel.
This will be a very welcome feature, so thank you!
When (e.g.) a Chat Trigger is used, there is also this screen divide. But in that case horizontal.
This a yet another new divide: vertical.
How about keep it just horizontal for all such cases, and integrate them with tabs in that horizontal split?
That avoid clutter and then users know they can always go there for all the related issues (triggers, logs, edit, …)
You could put in the Tab handle a Nr of notifications if new input came in (e.g. new data) or if there a config issue (warning icon), …
Great idea though. It already solved the problem when you have a loooong flow you always have to search where exactly you were. Certainly when you have a bunch of the same nodes (e.g. “Edit”, indeed)
Thanks for this feature! Being able to edit nodes directly on the canvas is going to save so much time. Less clicking around, less opening and closing modals - just straight to the point while keeping everything visible. Really appreciate the focus on making the workflow building more fluid.
If you do not have a node selected, the focus panel takes up valuable real estate
Agreed. We should hide it
I selected [the play button] a few times, thinking I was collapsing the panel
We’re getting this feedback consistently so something to look into for sure
working with binary files is a challenge
100%. We’re actually working on removing binary files as a separate category and including them in the JSON instead
[Error toasts] can block essential features in the focus panel
Great point. They should appear in the corner of the canvas, not over the focus panel
How about keep it just horizontal for all such cases, and integrate them with tabs in that horizontal split?
Our reasoning was that the node parameters need quite a lot of vertical space, and it’s useful to see them and the logs at the same time (params + data)
Using this new view (based on this video), what’s the recommend way to examine like the 3rd item in the input list as opposed to the 5th item? At first glance, this view seems only mildly useful for small/toy workflows (rather than workflows with many, many items).
Speaking of viewing past executions involving lots of data, can some time and attention be focused on solving that major pain point instead of these small UX changes?
For example, let’s say I have a workflow with over ~20 distinct nodes and each node is generating 100 to 1,000 items… and let’s say I want to click into the 19th node in my workflow… guess what happens?
Chrome attempts to render the page… and then times out yielding a popup like “Page is unresponsive. [Wait] or [Cancel]?”… and I have to click “Wait” like 10x in a row for the page to finally finish rendering.
In short, I wish there was a way for me to quickly debug the 867 item on the 19th node within my production workflow without having to play games with Chrome in loading all the data in the DOM at once.
Horizontal screen space is also at much less of a premium than vertical space on most monitor setups.
In fact for that reason I’d like the ability to have both the node panel AND the logs panel available as sidebars simultaneously. Two log panels even, so I could effectively have the full node edit modal experience side by side with my flow on a 21:9 monitor.
During the actual testing and usage process, I have some specific thoughts and suggestions regarding the layout and display effect of the focus panel, hoping to provide a reference for the team:
First of all, regarding the placement of the focus panel, I have considered a new possibility: Is it technically feasible to place it at the bottom of the interface, i.e., between INPUT and OUTPUT? From the perspective of actual user experience, if this layout is adopted, the lower area will be slightly crowded. However, correspondingly, the right sidebar will free up more space. From the perspective of the overall interface layout, this can actually effectively alleviate the sense of crowding and provide a wider operational view.
Secondly, there are two detailed issues in the current interface interaction that deserve attention. Firstly, when the right sidebar is open, clicking any parameter in the focus panel will cause the system to open the INPUT interface on the left side of the focus panel. This will significantly reduce the operable space of the entire canvas, affecting the visual experience and operational efficiency during complex operations. Secondly, in the above interaction scenario, there will be a situation where INPUT is displayed repeatedly - the INPUT opened on the left side of the focus panel and the original INPUT at the bottom will be displayed simultaneously. In contrast, the display of OUTPUT is the opposite: except for the original OUTPUT at the bottom which can be displayed normally, OUTPUT will not be shown in other areas. This inconsistency in display logic may cause confusion for users in terms of operational cognition.
If this focus panel is floating and can be freely repositioned on the canvas, I think the experience will be even better! It would feel much more flexible to use.
Currently, is it because this feature is still in testing that it cannot read data from the Google Drive series (such as Google Sheets …)?
It’s a bit inconvenient not being able to intuitively see the output immediately.
The focus panel doesn’t have a “Close” button, and pressing ESC also can’t close it. You could consider adding a small feature for closing, or maybe a “Minimize” function? Minimize it to the bottom so when testing nodes, we can reopen it instantly without searching for the test node again.
These four points are provided as feedback for your reference.
Overall, I really like this design feature! It makes my n8n usage experience much better, and helps reduce some unnecessary clicks for checking. Thanks for your design!
