LittleDemo

<LittleDemo> renders through a signed runtime URL. Readers see a loading state while a new demo is generated, then the same embed automatically reuses the completed demo on future views.

When to use

Use LittleDemo when a still screenshot is not enough: onboarding flows, product tours, changelog demos, pricing walkthroughs, conversion flows, and feature sections that are easier to understand in motion.

Live Demo

Examples

Generate from a URL

mdx
<LittleDemo  url="https://linear.app"  prompt="Show the Linear hero and product interface."  template="hero-spotlight"  section="hero and product interface preview"  autoplay  loop/>

Focus a Specific Section

mdx
<LittleDemo  url="https://example.com/pricing"  prompt="Highlight the pricing table and plan comparison."  template="pricing-focus"  section="pricing table"/>

Render an Existing Demo

mdx
<LittleDemo  demoId="demo_tfgslztc95get4ll442z"  controls  theme="dark"/>

Props

Prop	Type	Default	Description
url	string	--	Page URL to record. Required unless demoId is provided.
demoId	string	--	Existing LittleDemo ID to render.
prompt	string	generated from metadata	What the recording should show.
template	string	auto	Recording style nudge: auto, cinematic, guided-tour, plain-scroll, section-focus, hero-spotlight, feature-sweep, conversion-flow, pricing-focus, or proof-scroll.
section / sectionHint	string	--	Section hint for section-focus and auto selection.
title / description / headings	string / array	--	Optional context used to build a prompt when prompt is omitted.
durationTarget	string	10s	Target duration sent to LittleDemo.
format	string	mp4	Output format.
autoplay	boolean	false	Start playback automatically when the browser allows it.
loop	boolean	false	Loop the video.
controls	boolean	true	Show player controls.
theme	dark | light	dark	Player chrome theme.
start / end	number	--	Trim playback inside the embed.
branding	boolean	true	Show the LittleDemo watermark when the project plan requires it.
aspectRatio	string	16:9	Wrapper aspect ratio, such as 16:9, 4:3, or 1:1.
height	string | number	--	Fixed iframe wrapper height. Overrides aspectRatio.
params / payload	JSON string	--	Escape hatch for advanced LittleDemo runtime payload fields.

Limits

HolyDocs counts distinct <LittleDemo> runtime generation configs per project each month. Cached component resolutions do not count again. Plan allowances are:

Plan	Monthly LittleDemo generations
Free	1
Starter	10
Pro	50
Business	250
Enterprise	Unlimited

Tips

• Use demoId when you want a stable, already-approved demo.
• Use url plus prompt when docs should stay close to a changing product surface.
• Pick an explicit template when you know the recording shape; leave it on auto when the page and prompt should decide.
• Keep prompts specific enough to select the right section, but avoid writing a full script.

Related Components