# IframePreview

> Shows another page in the Preview panel, with the same toolbar, code tabs and theme as the rest of the site.

Source: https://shelldocs.shellui.dev/docs/components/iframe-preview

`IframePreview` shows another page inside a preview frame. Use it for a live example built with something other than Blazor : a WebAssembly build of a desktop UI toolkit, a plain HTML page, an embedded playground. The frame keeps the same toolbar as every other preview and can carry [code tabs](https://shelldocs.shellui.dev/docs/components/code-tabs.md).

## Basic use

```markdown
<IframePreview Src="/demos/theme-frame.html" Height="220" Title="A page in a frame" />
```

**A page in a frame**

[Live preview](https://shelldocs.shellui.dev/demos/theme-frame.html)

The page in the frame is a static file in this site's `wwwroot`. Switch the site's theme and it follows.

## With code tabs

An iframe preview has no Razor source to show, so its Code panel is hidden until you give it tabs.

**Markdown**

```markdown
<IframePreview Src="/demos/theme-frame.html" Height="220" />
```

**Script**

```js
window.addEventListener('message', e => {
    if (e.data?.type === 'shelldocs-theme') applyTheme(e.data.theme);
});
```

## Loading

Each iframe starts its own page, and a heavy one starts its own app. `Lazy` decides when.

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `visible` | `default` |  | Loads when the frame scrolls into view. |
| `click` | `Lazy` |  | Shows a Run live preview button and loads when the reader presses it. |
| `none` | `Lazy` |  | Loads with the page. |

With `Lazy="click"`, nothing loads until the reader asks:

```markdown
<IframePreview Src="/demos/theme-frame.html?c=click" Height="220" Lazy="click" Id="iframe-on-click" />
```

[Live preview](https://shelldocs.shellui.dev/demos/theme-frame.html?c=click)

## Theme

The page in the frame is told the site's theme twice:

- `?theme=light` or `?theme=dark` is added to its URL when it loads.
- A message is posted to it whenever the reader switches theme: `{ type: "shelldocs-theme", theme: "light" | "dark" }`.

The page reads both:

```js
const params = new URLSearchParams(location.search);
applyTheme(params.get('theme') === 'dark' ? 'dark' : 'light');

window.addEventListener('message', e => {
    if (e.data?.type === 'shelldocs-theme') applyTheme(e.data.theme);
});
```

## Static hosts

The loading, the theme parameter and the theme message are handled by `shelldocs.js`, so an iframe preview behaves the same on a static export. The page in the frame has to be reachable there too: a file under `wwwroot` is copied into the export by `shelldocs build`.

## Props

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `Src` (required) | `string` | `—` | The page to show. |
| `Height` | `string` | `320` | Pixels, or any CSS length such as 24rem. |
| `Lazy` | `string` | `visible` | visible, click or none. |
| `Title` | `string?` | `—` | Title in the frame header. |
| `Id` | `string?` | `iframe-{hash of Src}` | Anchor id for the frame. Set it when a page shows the same Src twice. |
| `SyncKey` | `string?` | `—` | Sync key for its code tabs. |
| `Caption` | `string?` | `PreviewCaption` | Muted note in the toolbar. |
| `CodeTabs` | `IReadOnlyList<PreviewCodeTab>?` | `—` | The tabs, when the preview is written in a .razor file. |

## See also

- [Code tabs on previews](https://shelldocs.shellui.dev/docs/components/code-tabs.md): CodeTab, SyncKey, the page switch and captions.
- [DemoPreview](https://shelldocs.shellui.dev/docs/components/demo-preview.md): For live examples that are Blazor components.