Preview

<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 <Preview>. The example below is doing exactly that, about itself:

Usage

import PreviewDemo from '../../../../examples/preview-demo'
import previewDemoSrc from '../../../../examples/preview-demo.tsx?raw'

<Preview source={previewDemoSrc} filename="preview-demo.tsx">
  <PreviewDemo />
</Preview>

.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

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'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.