| Name | Description | Type | Default |
| workflow | Workflow json to load. | string | '{}' |
| frame | Whether to add frame around canvas with code and copy button | string | 'false' |
| src | URL for n8n instance to load workflow. | string | 'https://n8n-preview-service.internal.n8n.cloud/workflows/demo' |
| collapseformobile | Whether to collapse on mobile, so that scrolling on mobile is easier. | string | 'true' |
| clicktointeract | Add button before users can interact with canvas.
Makes scrolling through page easier without getting bugged down. | string | 'false' |
| hidecanvaserrors | Hide node errors on the canvas | string | 'false' |
| disableinteractivity | Disable interactivity entirely. This will prevent the user from
interacting with the workflow. | string | 'false' |
| theme | Whether to force a theme on n8n.
Accepts 'light' and 'dark' | 'light' | 'dark' | undefined | |
| mode | Mode for the component.
'demo' for single workflow view, 'diff' for comparing two workflows. | 'demo' | 'diff' | 'demo' |
| workflowbefore | The "before" workflow JSON for diff mode comparison. | string | '{}' |
| tidyup | Whether to auto-tidy (auto-layout) the workflow when loaded. | string | 'false' |
| Name | Attribute | Description | Type | Default |
| workflow | workflow | Workflow json to load. | string | '{}' |
| frame | frame | Whether to add frame around canvas with code and copy button | string | 'false' |
| src | src | URL for n8n instance to load workflow. | string | 'https://n8n-preview-service.internal.n8n.cloud/workflows/demo' |
| collapseformobile | collapseformobile | Whether to collapse on mobile, so that scrolling on mobile is easier. | string | 'true' |
| clicktointeract | clicktointeract | Add button before users can interact with canvas.
Makes scrolling through page easier without getting bugged down. | string | 'false' |
| hidecanvaserrors | hidecanvaserrors | Hide node errors on the canvas | string | 'false' |
| disableinteractivity | disableinteractivity | Disable interactivity entirely. This will prevent the user from
interacting with the workflow. | string | 'false' |
| theme | theme | Whether to force a theme on n8n.
Accepts 'light' and 'dark' | 'light' | 'dark' | undefined | |
| mode | mode | Mode for the component.
'demo' for single workflow view, 'diff' for comparing two workflows. | 'demo' | 'diff' | 'demo' |
| workflowbefore | workflowbefore | The "before" workflow JSON for diff mode comparison. | string | '{}' |
| tidyup | tidyup | Whether to auto-tidy (auto-layout) the workflow when loaded. | string | 'false' |
| showCode | | | boolean | false |
| showPreview | | | boolean | true |
| fullscreen | | | boolean | false |
| insideIframe | | | boolean | false |
| copyText | | | string | 'Copy' |
| isMobileView | | | boolean | false |
| error | | | boolean | false |
| interactive | | | boolean | true |
| scrollX | | | number | 0 |
| scrollY | | | number | 0 |
| n8nReady | | | boolean | false |
| iframeVisible | | | boolean | false |
| observer | | | | new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const iframe = this.shadowRoot!.getElementById(
'int_iframe'
) as HTMLIFrameElement;
this.observer.unobserve(iframe);
this.iframeVisible = true;
if (this.n8nReady) {
if (this.mode === 'diff') {
this.loadDiff();
} else {
this.loadWorkflow();
}
}
}
});
}) |
| receiveMessage | | | | |
| onDocumentScroll | | | | |