How does the n8n website render and display workflows? (Beginner question)

Questions
1

Hi everyone,

I’m a beginner trying to understand how the official n8n website renders or displays the workflows that you see in the UI.

Could someone please explain what technologies or libraries are used for this?

For example, is it using Canvas, SVG, or any specific open source diagram library? And how does it work in read-only mode?

I would like to learn more because I’m interested in embedding or reusing this kind of workflow viewer in my own project.

Any pointers to files in the source code or keywords I should look for would be really helpful.

Thank you so much for your help! :folded_hands:

2

Hey @yidunsou, welcome to the community.

Have you seen this topic?

3

Thank you so much for your reply! I really appreciate it. I’ll check the related posts.

4

Hi jabbson

I found @n8n_io/n8n-demo-component — it works perfectly to display a static workflow diagram. However, I’d also like to show execution progress — for example, which node the execution is currently at, and which nodes have already run.

Can @n8n_io/n8n-demo-component do this? If not, is there any other recommended way to show real-time execution progress outside of the n8n UI?

Thanks a lot

5

Hey @yidunsou,

since we are talking about community node, which isn’t a part of the product, the best way to know whether or not it support a certain functionality is ask this nodes maintainers about it. Unfortunately, I cannot recommend the best way to go about monitoring the currently executing node as I have never had the reason for that.

6

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.