The `<workflow-render>` web component

<script type="module" crossorigin="anonymous"
  src="https://cdn.jsdelivr.net/npm/workflow-render@0.4.0/dist/element/workflow-render.js"
  integrity="sha384-aG3Ip1wRTCeNNzLVq6XOoiThShTAe6CpFeWfaZ9g011/37M1AZliGwj6lU/hftn4"></script>

<div style="width: 100%; height: 600px">
  <workflow-render src="./workflows/invoice-sync.json"></workflow-render>
</div>

The element fills the box you give it. It has no border or padding of its own. The script is 56 KB gzipped.

Loading it

Option	How
CDN	The `<script>` tag above. Pin the version and keep the `integrity` hash
Self-hosted	Copy the whole `node_modules/workflow-render/dist/element/` folder. The script loads its icon, description and font files from beside itself
Bundler	`import 'workflow-render/element'` registers the element, with types

To show a workflow in Notion, see Embedding in Notion.

src is fetched by the visitor's browser, so the JSON must be same-origin or served with CORS headers.

The element works under a strict Content-Security-Policy: it sets no inline style attributes and needs no 'unsafe-inline'. Its stylesheet is a constructed sheet in the shadow root.

The icon, subtitle and description files are fetched with subresource integrity. Their sha384 hashes are written into the script at build time, so the integrity hash on the <script> tag covers them too: a sidecar that is not the one this build shipped is refused, and the element carries on with monogram icons and no inspector data. To ship a trimmed or custom set, seed it on the page instead of editing the files (see SEED_KEY in the Node API docs).

Attributes

Attribute	Meaning	Default
`src`	URL of a workflow or execution JSON. The kind is detected
`workflow`	Inline JSON string, or an object through the property. Takes precedence over `src`
`execution`	A separate execution JSON, when workflow and run are two files
`zoom`	`fit` or a number	`fit`
`static`	Render without interaction, for thumbnails	`false`
`inspector`	`panel` or `off`	`panel`
`exportui`	`on` or `off`. Shows the SVG and PNG buttons	`on`
`theme`	`light`, `dark` or `auto`. `auto` follows the visitor's system setting and switches when it changes. The canvas, controls and inspector use n8n's own dark palette	`light`
`images`	`safe` or `remote`. Whether sticky-note images may load from another host	`safe`
`overlay`	A canvas overlay: a JSON string, or an object through the property. Drawn as a ring and a badge per flagged node
`emulates`	Read-only. The bundled n8n version

Events and methods

Event	Detail
`wr-load`	`{ view, warnings }`
`wr-error`	`{ message }`
`wr-node-click`	`{ nodeName }`. Fires on a single click, whether or not the inspector is on
`wr-inspector-open`	`{ nodeName }`
`wr-inspector-close`

Method	Returns
`exportSvg()`	`Promise<string>`

Theme

theme="dark" draws n8n's dark canvas, controls and inspector; theme="auto" follows the visitor's system setting and switches when it changes, without reloading or losing the view. The element sets data-resolved-theme (light or dark) on itself, so the page around it can follow: workflow-render[data-resolved-theme='dark'] { … }. exportSvg() and the SVG and PNG buttons export in the theme on screen. --wr-canvas-bg still overrides the ground in either theme.

A few icons keep their light-theme colours in dark: icons n8n tints by colour (Set, Code and similar) and icons drawn in a fixed dark colour (OpenAI, for example).

Pan and zoom

With a mouse or trackpad, the gestures are n8n's own:

Input	Action
Wheel, or two-finger scroll	Pan
`Ctrl` or `Cmd` + wheel, or trackpad pinch	Zoom about the pointer
Middle-button drag, or `Space` + drag	Pan
Drag	Draw a selection rectangle
Click on a node	Select it. `Shift` + click adds to the selection
Double-click on a node	Open the inspector
Double-click on the canvas	Zoom 2×
`0`	Reset zoom
`1`	Fit to view
`+` / `-`	Zoom in and out

On a touch screen:

Input	Action
One-finger drag	Pan
Pinch	Zoom
Tap on a node	Open the inspector

The buttons in the corner fit the view and zoom in and out on any device.

Keyboard shortcuts only fire while the element has focus, so it never takes keystrokes from the page around it.

The inspector

Double-click a node, or tap it on a touch screen, to open a read-only panel with three tabs: Parameters, Settings and JSON.

Labels, field order and visibility follow the node's description, as they do in n8n.
Options show their labels, not raw values.
Fields the workflow never set show the default in muted text.
Expressions are shown as written. They are never evaluated.

For an execution, the panel also shows what the node received and what it produced.

The panel adapts to the space the element is given. In a wide container, Input, the node and Output sit side by side. Below 760 pixels it shows one at a time, with a switch at the top.

The <workflow-render> web component