Skip to content

Embed the viewer

@containerlab/clab-viewer renders a .clab.yml file the way the apps do, on any web page. No React app, no API Server, no deployed lab.

Every diagram on this site is the viewer. Give it a topology file, and optionally its annotations file for a saved layout:

name: hello
topology:
  defaults:
    kind: linux
    image: alpine:3.23
  nodes:
    client: {}
    server: {}
  links:
    - endpoints: [client:eth1, server:eth1]

Pick an integration

Your site Use
Zensical docs A clab Markdown fence. Write the fence, get the topology, the YAML, and a split view.
Any website The <clab-topology> element. Load two static files and add the tag.
Your own UI around it The iframe protocol. Post YAML to viewer.html.
A JavaScript app with one viewer mountViewer from @containerlab/clab-viewer, plus @containerlab/clab-viewer/styles.css.

The element and the iframe isolate each diagram's styles and state. Use one of them when a page has several diagrams.

Get the files

npm install @containerlab/clab-viewer

Copy the package's dist/ directory into your site's static assets and keep it whole: viewer.html, component.mjs, component.css, and the bundled chunks belong together. They are also exported as @containerlab/clab-viewer/static/*.

To build from this repository, run pnpm viewer; the output lands in packages/clab-viewer/dist/. pnpm viewer:pack creates artifacts/clab-viewer.tgz for testing an unreleased version elsewhere. The older @containerlab/clab-ui/viewer entry point still works.

Layouts

Without annotations, the viewer lays out the topology on its own. To keep a layout you arranged in the app, ship the .clab.yml.annotations.json file next to the YAML. The YAML stays the source for rendering, copying, and downloading.