Preview with Code

Use <Artboard> followed by <ArtboardCode> to show a live component preview fused with a collapsible code block. The code block receives build-time syntax highlighting via Shiki.

---
banner:
  content: "Hello from the Artboard preview!"
---

Preview Only

<Artboard> works standalone when no code section is needed.

Code Only

<ArtboardCode> also works standalone for showing a code snippet with the "View Code" toggle.

import { defineConfig } from '@qwik-docs/framework';

export default defineConfig({
  title: 'My Docs',
});

Usage

The two components are siblings in MDX. When placed one after the other, CSS fuses them into a single card with shared border-radius and borders.

import { Artboard } from '@qwik-docs/components/qwik/Artboard'
import { ArtboardCode } from '@qwik-docs/components/qwik/ArtboardCode'

<Artboard>
  <MyComponent />
</Artboard>
<ArtboardCode>

​```yaml
key: value
​```

</ArtboardCode>

Note: Leave blank lines around the fenced code block inside <ArtboardCode> so MDX parses it as Markdown (enabling Shiki syntax highlighting) rather than inline JSX.