Plandalf

Images and embeds

Add screenshots, media-library images, videos, and iframe embeds to Plandalf docs with Mintlify-style MDX patterns.

Images and embeds should help readers inspect the thing being explained. Use plain Markdown images for simple screenshots, MediaImage for tracked Plandalf assets, and Frame when media needs a caption, browser chrome, or containment.

The path

  1. Use the simplest image form first

    Start with Markdown image syntax or a normal <img> tag when the asset already has a stable public path.

  2. Use tracked media for product screenshots

    Use MediaImage or MediaScreenshot when the screenshot is registered in the Plandalf media library.

  3. Wrap inspectable media in Frame

    Use Frame for screenshots, videos, and embeds that need captions, hints, or browser-style chrome.

  4. Keep embeds contained

    Place iframes inside a frame and give them explicit sizing so they cannot create horizontal scroll.

Markdown image

Plandalf API docs preview

![Plandalf API docs preview](/images/stacks/api-first/numi-api-docs.png)

Tracked screenshot

Use this for real product UI, not decorative mockups.
The Numi offer editor with checkout and automation controls.
Tracked screenshots keep public docs tied to the site media library.
<Frame caption="Tracked screenshots keep public docs tied to the site media library.">
  <MediaImage id="numi-offer-editor-JDvgFm" alt="The Numi offer editor with checkout and automation controls." variant="plain" />
</Frame>

Embedded preview

Embeds stay inside the reading column when wrapped in Frame.
<Frame variant="browser" caption="Embeds stay inside the reading column when wrapped in Frame.">
  <iframe
    className="aspect-video w-full"
    title="Quickstart docs embedded preview"
    src="/docs/quickstart"
  ></iframe>
</Frame>

Authoring rules

Image and embed rules

Alt textrequired for images

Describe the visible product state or diagram. Do not use generic alt text such as screenshot.

Frame captionsrecommended

Use captions when the media explains a UI state, workflow, or API concept.

Iframe titlesrequired for embeds

Every iframe should have a title and a constrained width or aspect ratio.

Zoom behaviorDocsImage

Markdown images render through DocsImage and receive zoom metadata by default. Add noZoom when zooming would not help.

Properties

img.srcstringrequired

Public image URL or path.

img.altstringrequired

Accessible image description.

img.noZoomboolean

Disables docs image zoom metadata.

MediaImage.idstring

Media library ID for a tracked screenshot or generated asset.

iframe.titlestringrequired

Accessible title for the embedded surface.

Frames Add captions and browser chrome around visual material.
Visual context See the full visual component family.
Files Link downloads and static files from docs.

Feature detail