<n8n-demo>

<n8n-demo> is a web component to render workflow previews.

As easy as HTML

<n8n-demo> is just an HTML element. You can it anywhere you can use HTML!

<n8n-demo workflow='{"nodes":[{"name":"Workflow-Created","type":"n8n-nodes-base.webhook","position":[512,369],"parameters":{"path":"webhook","httpMethod":"POST"},"typeVersion":1}],"connections":{}}'></n8n-demo>

Configure with attributes

<n8n-demo> can be configured with attributed in plain HTML.

<n8n-demo workflow='{"nodes":[{"name":"Workflow-Created","type":"n8n-nodes-base.webhook","position":[512,369],"parameters":{"path":"webhook","httpMethod":"POST"},"typeVersion":1}],"connections":{}}' frame=true></n8n-demo>

Declarative rendering

<n8n-demo> can be used with declarative rendering libraries like Angular, React, Vue, and lit-html

import {html, render} from 'lit-html';
const workflow = '{"nodes":[{"name":"Workflow-Created","type":"n8n-nodes-base.webhook","position":[512,369],"parameters":{"path":"webhook","httpMethod":"POST"},"typeVersion":1}],"connections":{}}';

render(
  html`
    <h2>This is a &lt;n8n-demo&gt;</h2>
    <n8n-demo .workflow=${workflow}></n8n-demo>
  `,
  document.body
);

This is a <n8n-demo>

Diff Mode

Compare two workflows side-by-side using mode="diff". The workflowbefore attribute contains the "before" workflow, and workflow contains the "after" workflow.

<n8n-demo
  mode="diff"
  workflowbefore='{"nodes":[...]}'
  workflow='{"nodes":[...]}'
></n8n-demo>

Use diff mode to visualize changes between workflow versions.

Auto Tidy

Automatically tidy (auto-layout) the workflow when loaded using tidyup="true".

<n8n-demo
  tidyup="true"
  workflow='{"nodes":[...]}'
></n8n-demo>

This arranges nodes in a clean, organized layout.