Code Snippet

Use the CodeSnippet component to show a live MDX preview with its source code.

This page documents CodeSnippet, the Heyo Docs MDX component that combines a live preview with the exact source used to create it. Pass the rendered example as children and pass its JSX or MDX source through code.

The example below is a single CodeSnippet component: the callout you can see is its live preview, and selecting View Code reveals the source provided to that same component.

Keep examples focused
Show the outcome first, then let readers inspect the source.
<Callout
type="tip"
title="Keep examples focused"
description="Show the outcome first, then let readers inspect the source."
/>

CodeSnippet renders the preview above a syntax-highlighted code panel. Use this component in documentation when readers should see the result first and inspect or copy its implementation only when they need it. The preview accepts any MDX content; code must contain the source that corresponds to that preview.

When to use CodeSnippet

Use the CodeSnippet component for a component example, a small UI pattern, or a configuration that benefits from a visible outcome. It keeps the page easier to scan than placing a preview and a separate code block one after another.

Code longer than three lines starts collapsed behind a gradient. Readers can select View Code to expand it into a scrollable panel and copy the complete source. Short snippets stay open and show the copy control immediately. Leading and trailing blank lines in code are removed before highlighting and copying.

Use CodeBlock instead when there is no rendered result, such as a shell command, JSON response, or an implementation detail that cannot run in MDX. In CodeSnippet, children are the live preview and the code prop is the source shown to readers, so keep the two in sync.

Open a CodeSnippet source by default

Set defaultOpen when the source is the primary part of the example, or when hiding it would make the preview ambiguous. previewClassName is useful for changing the preview's alignment or spacing without changing the code panel.

Read the quickstart

<Button href="/quickstart" variant="outline">
Read the quickstart
</Button>

Use CodeSnippet for a composed preview

The preview can render more than one component, making it useful for patterns that readers will want to lift into a real documentation page.

Create content

Add the first MDX page and give it a clear title.

Make it discoverable

Configure the metadata readers and search engines need.

<Columns columns={2}>
<Column title="Create content" href="/quickstart">
  Add the first MDX page and give it a clear title.
</Column>
<Column title="Make it discoverable" href="/seo-and-search/seo">
  Configure the metadata readers and search engines need.
</Column>
</Columns>

Properties

codestringrequired

The source displayed in the code panel and copied by the copy button. Pass the complete snippet, including any imports a reader needs to understand the example.

childrenReactNodeoptional

The live preview rendered above the source. It can contain Markdown, built-in MDX components, or regular JSX.

languagestringoptional

The syntax-highlighting language. It defaults to tsx. Heyo Docs recognises common aliases such as ts, js, bash, json, md, and yaml ; unknown languages render as plain text.

defaultOpenbooleanoptional

Controls the initial state for long source. The default is false, which collapses source with more than three lines. It has no visual effect on a short snippet because short source is always visible.

showLineNumbersbooleanoptional

Adds the standard line-number data attribute to the code panel. It defaults to false and is useful when the surrounding explanation refers to specific lines.

previewClassNamestringoptional

Extra utility classes applied to the preview area. Use it for presentation changes such as left alignment, a custom minimum height, or a preview-specific background.

classNamestringoptional

Extra classes applied to the outer preview-and-code container.

Powered by heyo-docs