N8n Demo Webcomponent - Error Loading Workflow

[denobeno]

Hello n8n community,

I am having an issue with displaying n8n workflows using the ‘’ component described here:

n8n Demo Webcomponent

I have included the ‘’ web component in a HTML file and set the ‘workflow’ attribute to the JSON representation of my workflow. However, for most workflows it displays the error message “Could not load workflow preview. You can still view the code and paste it into n8n”.

Based on my testing, it appears there is an issue related to the use of variables. When I remove the variables from the JSON, the workflow is displayed correctly. However, all workflows displayed in the forum appear without any issues and it looks like the same scripts are used here.

You can test the described issue using CodePen and remove the value ={{ $(‘Edit Fields’).item.json.q }} here: https://codepen.io/denobeno/pen/bNbBeeL

This is the workflow used in Codepen

Thanks in advance for your help!

[n8n]

It looks like your topic is missing some important information. Could you provide the following if applicable.

• n8n version:
• Database (default: SQLite):
• n8n EXECUTIONS_PROCESS setting (default: own, main):
• Running n8n via (Docker, npm, n8n cloud, desktop app):
• Operating system:

[denobeno]

I have inspected this issue further and was able to solve it by creating an encoded URL from the Workflow JSON.

For anyone facing the same issue, you can use the n8n workflow below to transform the data and use it in the preview web component in the same way you would use the Workflow JSON.