Enhance your documentation with rich media content including images, videos, PDFs, mathematical equations, and diagrams.
You can use locally stored images or URLs to include images in your Markdown pages. Use either Markdown syntax or the <img> HTML tag to insert the image. Don’t use the <embed> element, as it has inconsistent browser support.
You can reference images using paths relative to the page’s location (using ./ or ../) or relative to the fern folder root (using /). For example, an image at fern/assets/images/logo.png can be referenced from any page as /assets/images/logo.png.
Common image attributes:
For more details about the HTML image element and its attributes, see the MDN documentation on the img element.
Embed PDFs using the <iframe> element. Don’t use the <embed> element, as it has inconsistent browser support.
You can embed videos in your documentation using the HTML <video> tag. This gives you control over video playback settings like autoplay, looping, and muting. Don’t use the <embed> element, as it has inconsistent browser support.
.mdx files use JSX syntax, not pure HTML. Attributes for HTML elements like <video> and <iframe> that are embedded in .mdx pages must be written in camelCase rather than lowercase. For example, use autoPlay instead of autoplay.
You can also wrap the video in a container div for additional styling:
Common video attributes:
For more details about the HTML video element and its attributes, see the MDN documentation on the video element.
You can embed videos from YouTube, Loom, Vimeo, and other streaming platforms using an <iframe> element.
.mdx files use JSX syntax, not pure HTML. Attributes for HTML elements like <video> and <iframe> that are embedded in .mdx pages must be written in camelCase rather than lowercase. For example, use autoPlay instead of autoplay.
See an example of how it renders on the corresponding docs page from the ElevenLabs documentation.
You can embed any external web page in your documentation using an <iframe>.
If the target site sets headers like X-Frame-Options or a restrictive Content-Security-Policy, the browser blocks the embed. Verify that the site you want to embed allows being framed.
When embedding a Fern Docs site inside another application, append ?embedded=true to the URL to hide the header and footer.
Fern supports LaTeX math equations. To use LaTeX, wrap your inline math equations in $. For example, $(x^2 + y^2 = z^2)$ will render .
For display math equations, wrap the equation in $$. For example:
Text containing dollar amounts (like prices, budgets, or costs) may unintentionally render as math equations. To display literal dollar signs, escape them with a backslash (\):
Without escaping: The product costs 5
With escaping: The product costs $10 and shipping is $5
Fern supports creating diagrams within your Markdown using Mermaid. Mermaid offers a variety of diagrams, including flowcharts, entity-relationship models, and Gantt charts. To include a Mermaid diagram in your Markdown file, create a codeblock marked with mermaid.