Embed Flow Previews
Add a read-only Fluxyn flow canvas to docs, landing pages, or other public pages.
Fluxyn Studio exposes a public read-only preview page at:
https://studio.fluxyn.net/embed/flow-previewThe preview page does not fetch saved private flows. The parent page provides exported flow JSON through postMessage.
Use the Embed Helper
Load the helper script and pass an exported FlowDef object.
<div id="flow-preview"></div>
<script src="https://studio.fluxyn.net/flow-preview-embed.js"></script>
<script>
const flow = {
id: "example-flow",
name: "Example Flow",
nodes: [
{
id: "trigger",
name: "Page View",
type: "event_trigger",
category: "trigger",
properties: { eventName: "fx.init" },
position: { x: 0, y: 0 }
},
{
id: "debug",
name: "Debug",
type: "debug",
category: "utility",
properties: { message: "Preview loaded" },
position: { x: 260, y: 0 }
}
],
connections: {
trigger: { default: ["debug"] }
}
};
const preview = window.mountFluxynFlowPreview({
target: "#flow-preview",
studioOrigin: "https://studio.fluxyn.net",
flow
});
preview.updateFlow(nextFlow);
</script>Options
mountFluxynFlowPreview({
target: HTMLElement | string,
flow: FlowDef | { flow: FlowDef },
studioOrigin: string,
className?: string,
title?: string
})target: Element or selector where the iframe should be mounted.flow: Exported application flow JSON, or a custom-node export containing a nestedflow.studioOrigin: Studio origin that hosts/embed/flow-preview.className: Optional class for the wrapper element.title: Optional iframe title.
The helper returns:
{
iframe: HTMLIFrameElement,
updateFlow(nextFlow): void,
destroy(): void
}Use updateFlow(nextFlow) when the preview should show a different flow without recreating the iframe.
Studio Origin
Docs use NEXT_PUBLIC_STUDIO_ORIGIN to decide where the preview iframe and helper script are loaded from.
NEXT_PUBLIC_STUDIO_ORIGIN=http://127.0.0.1:3000When the variable is not set, local docs pages use http://127.0.0.1:3000 and deployed docs pages use https://studio.fluxyn.net.
Message Contract
The iframe sends:
{ type: "fluxyn.flowPreview.ready" }The parent sends:
{
type: "fluxyn.flowPreview.load",
flow,
requestId
}The iframe responds with:
{ type: "fluxyn.flowPreview.loaded", requestId, nodeCount }or:
{ type: "fluxyn.flowPreview.error", requestId, message }Trusted parent origins are Fluxyn production origins and local development origins.