Skip to main content

​
Embed in Websites

You can embed an interactive view of your Blueprint in any website. The embed uses a web component that renders your Blueprint as a read-only, pannable, zoomable diagram — no authentication required.

​
Get the embed code

  1. Open your Blueprint in the editor.
  2. Click the Share button in the toolbar.
  3. Select Embed.
  4. Click Copy Code.
The Embed Blueprint dialog showing the HTML embed code

​
The embed code

The generated code looks like this: 
<!-- Leapter Logic Viewer -->
<script
  type="module"
  src="https://lab.leapter.com/viewer/leapter-blueprint-viewer.esm.js"
></script>

<leapter-logic-viewer
  logic="base64-encoded-blueprint-data"
  show-descriptions
  show-expressions
  frame
></leapter-logic-viewer>
Paste this into your website’s HTML where you want the Blueprint to appear.

​
How it works

The embed code includes your Blueprint data directly as a base64-encoded value in the logic attribute. This means:
  • No authentication required — viewers do not need a Leapter account
  • No API calls — the Blueprint data is self-contained in the HTML
  • Read-only — viewers can explore the Blueprint but cannot edit it
  • Interactive — viewers can pan and zoom to navigate the diagram

​
Customization attributes

The <leapter-logic-viewer> element accepts a small set of boolean attributes — include the attribute name to turn an option on, omit it to leave it off:
AttributeDescription
show-descriptionsShow node descriptions in the diagram
show-expressionsShow expressions on nodes
frameRender a border frame around the viewer
autoplayStart trace replay automatically when the viewer loads. The viewer adds a play / pause button and a speed control to its toolbar so visitors can control the animation. Autoplay pauses on its own as soon as the visitor takes manual control (clicking a step, using prev / next, stepping in or out) and at the end of the trace. See Stepping through a trace.

​
Updating the embed

Since the Blueprint data is embedded directly in the HTML, the embed shows the Blueprint as it was when you copied the code. If you update your Blueprint, you need to re-copy the embed code and replace it on your website.

​
What to do next