Plandalf

Frames

Use frames to present screenshots, media, and browser-like previews with captions.

Frames give visual material a clear boundary without turning the whole page into cards.

Basic example

Keep screenshots real and current.
Offer preview

This placeholder represents a real product screenshot or live iframe.

Use browser frames for rendered examples or app screenshots.
<Frame variant="browser" caption="Use browser frames for rendered examples or app screenshots." hint="Keep screenshots real and current.">
  <img src="/images/stacks/api-first/numi-api-docs.png" alt="Plandalf API docs screenshot" />
</Frame>

Variants

Use the browser variant when the image represents a page, app surface, or live preview. Use the flat variant when the media already has its own strong boundary.

Do not use abstract mockups for product documentation.
Browser frames are best for rendered app states.
Offer
Checkout
Automation
Flat frames avoid double chrome around diagrams and screenshots with existing borders.
<Frame variant="browser" caption="Browser frames are best for rendered app states.">
  <img src="/path/to/product-screenshot.png" alt="Plandalf offer preview" />
</Frame>

<Frame variant="flat" align="stretch" caption="Flat frames avoid double chrome.">
  <Mermaid chart={`flowchart LR
    Offer --> Checkout --> Automation
  `} />
</Frame>

Captions and hints

Captions sit below the frame. Hints sit above the frame. Like Mintlify, Plandalf supports inline Markdown in captions and hints, including links, bold text, italics, and inline code.

API reference preview

Use linked captions when the frame points to a deeper implementation page.

Learn more in the API reference before wiring this into production.
Important: use test offers before sharing a checkout link.
Test offer
Production checklist
See the going live checklist when the test flow works end to end.
<Frame caption="Learn more in the [API reference](/docs/api/reference) before wiring this into production.">
  <img src="/path/to/product-screenshot.png" alt="Plandalf API reference preview" />
</Frame>

<Frame hint="**Important:** use `test` offers before sharing a checkout link." caption="See the [going live checklist](/docs/going-live) when the test flow works end to end.">
  <img src="/path/to/product-screenshot.png" alt="Plandalf checkout preview" />
</Frame>

Media rules

Frame usage

Screenshotsreal product UI

Docs frames should contain real product screenshots, captured app states, or live examples. Avoid decorative fake UI.

Captionsspecific and useful

Explain what the reader is seeing, not just the component name.

Hintsshort context above media

Use hint for one-line context before the screenshot, such as environment, account state, or prerequisite.

Videos

Frames can hold videos as well as images and iframes. When a video has autoPlay, the frame enhancer adds playsInline, loop, and muted so the embed behaves like Mintlify’s video frame pattern.

Use poster images so the frame still has useful visual context before the video loads.
Autoplay videos are enhanced for inline looping playback.
<Frame caption="Product demo">
  <video autoPlay src="/path/to/video.mp4" />
</Frame>

Properties

captionstring

Text shown below the frame. Supports inline Markdown formatting including links, bold text, italics, and code.

hintstring

Text that appears before the frame.

Plandalf extensions

variantdefault | flat | browserdefault: default

Browser adds a small top chrome. Flat avoids double borders around media that already has its own boundary.

aligncenter | stretchdefault: center

Controls frame width behavior.

class | classNamestring

Optional utility classes for local spacing or sizing.

Images and visual context Use real screenshots and diagrams.
Color Show palette values.
Tree Show file structures.

Feature detail