Writing ContentComponents

Embedded Assets and Files

Fern enables using the native HTML5 tags to embed local assets like PDFs, videos, and more in your documentation. Supported tags include:

Fern also implements a custom component for embedding downloadable assets:

  • <Download src="..." /> - read more about it below.

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’)

1<embed src="./path/to/asset.pdf" type="application/pdf" />

Examples

Video File

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

Videos with audio will automatically play when the page loads. If you want to prevent this behavior, consider using the <video> component instead, which provides more control over playback.

PDF Document

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

Common MIME Types

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 Assets

Available as of version 0.54.0-rc1.

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)

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.



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