# Preview

`` renders a live example next to its source in a tabbed
frame. The convention: keep each example as a real component under
`examples/`, import it twice — once as a module, once via `?raw` — and
hand both to ``. The example below is doing exactly that,
about itself:

  

## Usage

```mdx

```

`.tsx?raw` is native Vite; `.mdx?raw` works too — the `dockit()` plugin
ships a loader that lets raw MDX imports bypass the MDX compiler.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | — | The live-rendered example. |
| `source` | `string` | — | Source code shown in the Source tab (import the twin via `?raw`). |
| `dataSource` | `string` | — | Optional second source — surfaces a `Data` tab. |
| `filename` | `string` | — | Filename chip in the frame header (also picks the highlight language). |
| `defaultTab` | `'preview' \| 'source' \| 'data'` | `'preview'` | Tab shown first. |
| `height` | `number \| string` | — | Force a height for the preview pane. |

## Behavior notes

- **Shiki loads lazily.** The Source/Data tab pulls the highlighter in
  via dynamic `import('shiki')`, so the highlighting bundle is only
  fetched when someone actually opens a code tab; a plain `<pre>`
  shows until it resolves.
- The highlight language is inferred from the `filename` extension
  (`ts`, `tsx`, `js`, `json`, `css`, `html`, `md`, `mdx`, `bash`, …);
  anything unrecognized — or no `filename` — falls back to `tsx`.
- The `:set nu` line-number toggle is the same **site-wide** state as
  [CodeBlock](/reference/components/code-block.md)'s — flipping it here flips every
  code block on the site.
- The filename chip and the copy / line-number controls only appear on
  the Source and Data tabs; the Preview tab keeps only the fullscreen
  toggle.
- **Fullscreen.** The expand button at the right of the header grows
  the frame into a full-viewport overlay — for wide demos that need
  real room. In fullscreen the preview pane drops its padding
  (full-bleed) and stretches the demo's wrapper to the viewport
  height; **Esc** or the collapse button exits.
- Use `dataSource` when an example has a companion input file (a config,
  a dataset, a schema) — it surfaces as a third `Data` tab, and
  `defaultTab="source"` is handy for pages where the code matters more
  than the render.

> **Note:** Because each example is a plain component file, it typechecks with the
> site, runs in dev with hot reload, and cannot drift from the code shown
> in the Source tab — the tab *is* the file.