Skip to main content
This page shows how to add images, video, and other embedded elements to documentation pages. It’s a contributor reference for editing these docs.
Example banner image rendered in a Frame

​
Adding an image

​
Markdown syntax

The simplest way — good for inline content:
Store local images under apps/docs/images/ and reference them with an absolute-from-root path (/images/...).
Local image files must be under 5 MB. For larger assets, host them on a CDN or object store (Cloudinary, S3, or the Pocketsflow CDN) and embed the URL.

​
HTML for more control

Use an <img> tag when you need sizing, rounded corners, or other attributes:

​
Wrap images in a Frame

Prefer <Frame> for screenshots and diagrams — it adds consistent padding, a border, and an optional caption:
Landscape example inside a captioned Frame

A Frame gives images a consistent, bordered presentation

​
Accessibility & style

  • Always write descriptive alt text. Say what the image shows, not “image”.
  • Match the flat Pocketsflow style: rounded corners are fine; avoid heavy drop shadows.
  • Use light-and-dark-friendly screenshots where possible, or provide both.
  • Keep file names lowercase and hyphenated (orders-list.png).

​
Light & dark variants

To swap an image by theme, provide both and let Mintlify pick, or use HTML classes:

​
Videos

Self-hosted video:
Embedded YouTube:

​
Other embeds (iframes)

Any HTML iframe works — dashboards, forms, or interactive demos:
Mintlify supports HTML tags directly in MDX, so you can mix Markdown and HTML freely for full flexibility.