Demo service github project

Currently you have the preview service n8n - Workflow Automation
Is there a library avaible? To host ist myself? My plan is to use it to make autoscreenshot it for documentations.

Hey @lublak,

You probably already have it available, See if you can access https://n8n.your-domain.com/workflows/demo

I am not actually sure on how to use it but that is a start, Maybe you can take the /workflows/ page apart :slight_smile:

Some question about this:
Because a workflow is planned

  • can i call it without a complete server boot, only start the demo? n8n start => n8n demo?
const n8n = require('n8n/dist/commands/start');
n8n.Start.run();
const n8n = require('n8n/dist/commands/demo');
n8n.Demo.run();
  • can i generate a html without starting the webserver?
const n8n = require('n8n');
const html = n8n.demo.generateHtml(json);

I would say probably not on making html without starting the webserver, I am also not sure on the boot option I suspect it needs a complete server bootā€¦ @marcus @MutedJam any thoughts?

and now a qestion to the demo url. How to call it with json data?
demo?workflow=workflowjson not works

On the workflows page we seem to have a div before the iframe that contains the workflow json, I suspect that is needed as I couldnā€™t see a request posting json data to it.

If I get a chance later I will take a look through the server code and see if I can find it.

From what I can see we do not have any commands available to demo or to generate html from workflows. Our /demo route is a special purpose NodeView.vue that will render workflows without any UI elements to edit workflows etc.

We do have an internal LitElement web component to embed the workflow demo view using an iFrame. We use this component here in our forum whenever you see a workflow preview. This component will inject workflow json using postMessage like this:

An alternative to that approach could be using our n8n Public API to create/post a workflow. The api response will include a workflow id that you could use, like http://localhost:5678/workflow/123

Ahhh thanks so its use an inject. :smiley: i think i can work with this. (not perfect but it should work)

2 Likes

Hello @Jon and @marcus ,

Pls. there is another easy way to use demo url to show our workflows on webpage ?

I tried http://myn8n.com/workflows/demo?workflow=http://myfile.json

Can you share a html here showing how to call .json to correct show the workflow demo ? Its very interesting to put in our website.

Hi @etiquetasio, welcome to the community. The workflow parameter shouldnā€™t be a link to your workflow, but the actual workflow JSON data instead. Check out <n8n-demo> āŒ² Home for the actual preview component used here on the forum with more information :slight_smile:

Thank u, @MutedJam, im receving invalid Json when i tryā€¦ Maybe why my website system make some changes in the quotes ?

Hi again ! Thank u it working nowā€¦ But we develop some ā€˜customā€™ nodesā€¦ That the origim web n8n-demo is not capable to load, because is not default nodesā€¦ Do you know how to redirect the ā€œinstall n8n-demoā€ JS files to load from our instance that already have our custom nodes installed ?

Solved, we put src parameter target to our n8n instance with community nodes installed.

Works perfect. You can close this thread. thank u

2 Likes

My favourite kind of thread are the ones where folks figure it all out before I come back :wink:

Glad to hear this is now working for you, thanks so much for confirming!

2 Likes

Hello again ! I re-open this because , now my demo page is asking user and password for my embbeded workflows on pageā€¦ Any idea how to solve ?

I need the demo workflows preview be public available.

I need to run another n8n without credentials ? Thanks

Sometimes it is only a browser caching issue. Can you please try a hard reload.

1 Like

Hello Jam, unfortunetelly not, i tested with new anonoyous/incognito browser , and stills asking user and password. Any other idea ?

Hey @etiquetasio,

Did you update your n8n instance to v1 recently? If it stopped working after that change you would need to use a hook file for this, By doing this though it would potentially open your n8n instance so you would need to make sure that your preview instance is not your main n8n instance and lock down the routes to protect it.

I donā€™t have an example of a hook that would do this but @netroy may have something up his sleeve.

1 Like

Hi, yes i updatedā€¦ Were find this documentation ? So, the demo feature is broken on v1 ? Maybe is more easy to up a old version dedicated to do demos.

Pls, can you inform what version is working demo api without asking user and password ?

Well, i installed the latest version in a new server, and now its workingā€¦ I dont know why not working in my updated server (old)ā€¦ but its ok. You can close the tread. successfully. New installed version into clean linux: [email protected]

Thanks team.

2 Likes