How do I add an interactive demo to Framer?

Insert an Embed component, use the HTML option and paste your demo tool's iframe snippet, then set the frame to fill width with a fixed aspect ratio. Framer often shows a placeholder for third-party embeds in the canvas, so check the published preview rather than the editor.

Why is my Framer embed blank?

Usually the canvas rather than the embed -- Framer shows placeholders for many third-party iframes while editing. Check a real preview first. If it is still blank there, the source is likely blocking framing via its headers.

Should I rebuild my product UI in Framer instead of embedding a demo?

It looks good and it rots. A hand-built recreation has to be updated by hand every time the real UI changes, and in practice it stops matching the product within a couple of releases. A captured demo is re-recorded instead.

← Back to blog

How to Add an Interactive Demo to a Framer Site

August 18, 2026

Framer has a first-class Embed component, so putting a demo on a Framer site takes about two minutes. The friction is all in sizing and in the preview.

Everything below assumes an iframe-based demo, which is what every hosted demo tool provides.

The embed itself

Insert → Embed, then choose the HTML option rather than the URL option if you want control over the iframe attributes.
Paste the iframe snippet from your demo tool.
Preview rather than trusting the canvas. Framer frequently shows a placeholder for third-party embeds while editing.
Check it in the published preview on a real phone, not just the responsive simulator.

Sizing it without fighting the layout

Framer's layout system wants to control size, so set the Embed frame to Fill width and give it a fixed aspect ratio rather than a fixed height. That keeps the demo proportional across breakpoints instead of cropping.

A ratio around 16:10 works for most demos on desktop; go closer to 4:3 on mobile so the screenshot inside does not shrink to nothing. Interactive players reserve some vertical space for their own controls, so a strict 16:9 often leaves the actual product smaller than expected.

Performance

Framer sites are usually fast, and an eagerly-loaded iframe is one of the few things that will slow one down. Set the embed to load lazily if it sits below the fold.

If the demo is your hero, the opposite applies -- it should load immediately, and it is worth trimming elsewhere to pay for it.

A note on Framer's own components

It is tempting to rebuild a demo natively with Framer components and interactions, since Framer is good at that. It looks impressive and it is a maintenance trap: every product UI change means rebuilding the recreation by hand.

A captured demo updates by re-recording. A hand-built Framer recreation updates by rebuilding, and in practice it stops matching the product within a couple of releases.

Frequently asked questions

How do I add an interactive demo to Framer?: Insert an Embed component, use the HTML option and paste your demo tool's iframe snippet, then set the frame to fill width with a fixed aspect ratio. Framer often shows a placeholder for third-party embeds in the canvas, so check the published preview rather than the editor.
Why is my Framer embed blank?: Usually the canvas rather than the embed -- Framer shows placeholders for many third-party iframes while editing. Check a real preview first. If it is still blank there, the source is likely blocking framing via its headers.
Should I rebuild my product UI in Framer instead of embedding a demo?: It looks good and it rots. A hand-built recreation has to be updated by hand every time the real UI changes, and in practice it stops matching the product within a couple of releases. A captured demo is re-recorded instead.

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 →