> ## Documentation Index
> Fetch the complete documentation index at: https://docs.holydocs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# LittleDemo

Embed signed, runtime-generated product demos from LittleDemo directly in HolyDocs pages.

**Runtime component**

`<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

**[Screenshot](/components/screenshot)**

Render polished still screenshots from any URL.
**[Frame](/components/frame)**

Place screenshots, videos, and diagrams in a consistent media frame.
**[Steps](/components/steps)**

Pair product demos with procedural written instructions.