How do you embed an interactive demo in SvelteKit?

A small component rendering an iframe with width 100%, an aspect ratio, lazy loading and a descriptive title. It renders server-side without trouble; only code reading window or browser to build the URL needs guarding for prerendering.

What is the click-to-load pattern?

Show a poster image with a play affordance and only render the iframe after a click. In Svelte it is about fifteen lines, and it means the demo costs nothing until a visitor asks for it -- which also makes the click a cleaner signal of intent.

Can I use Svelte transitions on an embedded demo?

Fade it, but never animate its width or height. Resizing an iframe forces the captured page inside to relayout on every frame, which looks broken and is genuinely expensive.

← Back to blog

How to Add an Interactive Demo to Svelte or SvelteKit

August 19, 2026

In Svelte an embed is an iframe in markup, and the interesting version is the one that does not load until someone wants it.

Svelte's reactivity makes that pattern short enough to be worth doing by default rather than as an optimisation.

The straightforward component

A `ProductDemo.svelte` taking the demo id as a prop and rendering an iframe with `width: 100%`, an explicit `aspect-ratio`, `loading="lazy"` and a descriptive `title`.

Svelte will warn about accessibility issues at compile time, which is a genuine advantage here -- a missing iframe title is the sort of thing that otherwise ships.

Click-to-load, in about fifteen lines

Hold a boolean, show a poster image with a play affordance while it is false, and render the iframe once it is true. The demo then costs nothing at all until a visitor asks for it.

On a marketing page with several demos this is the difference between a fast page and a slow one, and it also gives you a cleaner signal: a click means genuine intent, not just scrolling past.

SvelteKit and SSR

The iframe renders server-side fine. It is inert markup.
Guard anything touching `window` or `browser` when building the URL, or prerendering will fail.
Prerendered marketing pages work well with embeds, since the iframe URL is static and the demo is fetched by the browser afterwards.

Do not animate the frame

Svelte transitions are easy to reach for. Applying one that changes the iframe's dimensions forces the captured page inside to relayout on every frame, which looks broken and costs real performance.

Transition the poster, or fade the frame in. Never animate its size.

Frequently asked questions

How do you embed an interactive demo in SvelteKit?: A small component rendering an iframe with width 100%, an aspect ratio, lazy loading and a descriptive title. It renders server-side without trouble; only code reading window or browser to build the URL needs guarding for prerendering.
What is the click-to-load pattern?: Show a poster image with a play affordance and only render the iframe after a click. In Svelte it is about fifteen lines, and it means the demo costs nothing until a visitor asks for it -- which also makes the click a cleaner signal of intent.
Can I use Svelte transitions on an embedded demo?: Fade it, but never animate its width or height. Resizing an iframe forces the captured page inside to relayout on every frame, which looks broken and is genuinely expensive.

Keep reading

This is what Demorta does

Click through it — the same kind of demo you can record of your own product.

Try it on your own product

Record your first interactive demo free.

Five demos on the free plan, forever. No credit card, no trial countdown, no sales call. Install the Chrome extension, click through your product once, and you have a shareable link in about ten minutes.

Start free →