Live examples

Every demo below runs on this site. Open DevTools and watch the Network panel: the point of most of them is what does not download until you do something.

Source and local dev commands live in docs/examples/.

Embeds

The consuming page adds one script tag and installs nothing.

Script-tag embed (opens in a new tab)

Reload with the Network panel open. embed.js arrives at 4.4 KB gzipped, then the component chunk and React follow because an element is on the page. Open View details, then press Add 250 to balance a few times: the number changes and the panel stays open, so assigning the property patched props instead of remounting. The card is styled with Tailwind, built by the same config that produced the elements.

Demo	What it shows
Script-tag embed	One React component as <acme-payments-summary>. balance="1250" arrives as a number because the props type says so, and onViewDetails fires a view-details event.
Mixed-framework embed	React, Vue and Svelte from one build, with no compiler named in the config. Each framework chunk downloads only when one of its elements connects.

Guide: Script-tag embeds.

Runtime

The host page runs mountly and mounts widgets on user intent.

Quickstart host (opens in a new tab)

Hover the button before clicking it. The widget module is fetched on hover and mounted on click, so the click costs no network time.

Start here

Demo	What it shows
Quickstart	The shortest host that works: an import map and one attach().
Plain HTML · shared React	No bundler on the host. The two URLs are the same widgets on a self-contained build and on a peer build sharing one React.
Marketing site	A campaign page with hover, click and viewport triggers. Reload, then hover the hero button and scroll to the inline embed.
shadcn drop-in	A shadcn-style React widget dropped into static HTML through an import map.

Several widgets on one page

Demo	What it shows
Cross-framework bus	React 19, Vue and Svelte widgets on one page talking over a typed mountly/bus. No widget imports another.
Multi-widget bundle	Three widgets sharing one bundle. One JS fetch and one stylesheet for all three.
Monorepo component library	A shared UI library consumed by a widgets bundle, so third-party imports flow through one build.

Multi-team hosts

Demo	What it shows
Multi-vertical host	Manifest-driven composition: installPlatformRuntime, verticals pinned by a manifest, one React across all of them.
Vite host, import remotes	Federation-style import("demo-widget") with remote typings generated from the built fragment.
Vite host, URL remotes	The same host declaring a remote by its published URL, then fetching the fragment to wire the import map.

Read Choosing an architecture before copying these three. They are the last stage, not the starting point.

Everything at once

Demo	What it shows
Demo (Vite host)	attach, multi-instance mounting, custom elements, prefetch and the devtools panel in one page.
Pokémon kitchen sink	Triggers, prefetch and analytics under load. A stress test, not an onboarding path.

MCP Apps

Demo	What it shows
Generative UI stream	A @json-render spec assembling element by element as a model streams it.

The MCP app preview runs locally only. MCP Apps §8.4 requires the host and the sandbox proxy to sit on different origins, and this site serves everything from one. Run pnpm --filter mcp-app-demo verify, which starts them on separate ports.

Run locally

From the repo root, after pnpm install && pnpm -r build:

pnpm --filter mountly-docs run stage-examples
pnpm --filter mountly-docs dev

Each example also has its own dev server and port, listed in docs/examples/README.md.