Writing contentComponents

Embedded assets and files

Embed local assets like PDFs, videos, and other media directly in your documentation using native HTML5 tags. This allows you to include rich content without relying on external hosting.

Supported tags

Fern supports using the <embed src="..." /> tag to embed external content and the <source src="..." /> tag to embed media or image sources.

Usage (embed video)

Markdown
1<embed src="./growing-fern.mp4" type="video/mp4" style={{ aspectRatio: '16 / 9', width: '100%' }} />

Variants

Video file with video tag

Videos with audio will automatically play when the page loads. Using <video> component disables this behavior and provides more control over playback.

Markdown
1<video style={{ aspectRatio: '16 / 9', width: '100%' }} controls>
2  <source src="./growing-fern.mp4" type="video/mp4" />
3</video>

PDF document

Markdown
1<embed src="./all-about-ferns.pdf" type="application/pdf" width="100%" height="500px" />

Downloadable assets

Markdown
1<Download src="./all-about-ferns.pdf">
2  <Button intent="primary">Download PDF</Button>
3</Download>

Properties

src
stringRequired

Path to your local asset (relative to current MDX file)

type
stringRequired

MIME type of the asset (e.g. ‘video/mp4’, ‘application/pdf’)

File TypeMIME Type
PDFapplication/pdf
MP4 Videovideo/mp4
WebM Videovideo/webm
SVG Imageimage/svg+xml
PNG Imageimage/png
JPEG Imageimage/jpeg

The supported file types and behavior may vary depending on the browser and the type of content being embedded. For video files, consider using MP4 format for maximum compatibility.

Downloadable asset properties

Enable users to download assets from within your documentation, instead of linking to them, by using the <Download> component.

src
stringRequired

Path to your local asset (relative to current MDX file). The asset must be located within the fern folder.

children
React.ReactNodeRequired

The text or element to display as the click target for the download.

filename
string

The filename to use for the downloaded asset. If not provided, the filename will be the same as the asset’s name.