Preview

The Preview component displays a live rendered preview alongside its source code. It is ideal for documenting MDX components and visual patterns.

Structure

A preview consists of three nested directives:

::::::preview — outer container
:::::code-preview — the live rendered output
:::::content-preview — the source code shown as a code block

Basic usage

This is a live preview of a callout component.

:::callout{variant="success"}
  This is a live preview of a callout component.
:::

Syntax

The preview uses deeply nested directives. Note how the colon count increases with each nesting level:

::::::preview
  :::::code-preview
      :::callout{variant="success"}
        Your live content here.
      :::
    :::::
  
  :::::content-preview
  ```mdx
    :::callout{variant="success"}
      Your live content here.
    :::
  ```
  :::::
::::::

Pay attention to the colon counts: :::::: (6) for preview, ::::: (5) for code-preview and content-preview, ::: (3) for inner components. Each nesting level needs more colons than the level inside it.

When to use

Documenting components — Show both the rendered result and the code to produce it
Style examples — Display visual variations side-by-side with their markup
Interactive demos — Combine with Tabs or Steps to show different configurations

Components

Directive	Component	Purpose
`::::::preview`	`Preview`	Outer wrapper with split layout
`:::::code-preview`	`PreviewDemo`	Left panel — renders content live
`:::::content-preview`	`PreviewCode`	Right panel — displays source code