# Rich media in Markdown

> Embed images, videos, PDFs, LaTeX equations, and diagrams in your Fern documentation.

Enhance your documentation with rich media content including images, videos, PDFs, mathematical equations, and diagrams.

## Images

You can use locally stored images or URLs to include images in your Markdown pages. Use either [Markdown syntax](https://www.markdownguide.org/basic-syntax/#images-1) or the [`<img>` HTML tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) to insert the image. Don't use the `<embed>` element, as it has inconsistent browser support.

<Info title="Image paths">
  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`.
</Info>

<Tabs>
  <Tab title="Markdown">
    ```markdown
    <!-- Relative to page location -->
    ![Alt text](../../assets/images/logo.png "Optional title")

    <!-- Relative to fern folder root -->
    ![Alt text](/assets/images/logo.png "Optional title")
    ```
  </Tab>

  <Tab title="HTML">
    ```html
    <!-- Relative to page location -->
    <img src="../../assets/images/logo.png" width="500px" height="auto" />

    <!-- Relative to fern folder root -->
    <img src="/assets/images/logo.png" width="500px" height="auto" />
    ```
  </Tab>
</Tabs>

Common image attributes:

| Attribute            | Description                        |
| -------------------- | ---------------------------------- |
| `src`                | URL or path to the image file      |
| `alt`                | Alternative text for accessibility |
| `title`              | Tooltip text shown on hover        |
| `width` and `height` | Dimensions of the image (px)       |
| `noZoom`             | Disables image zoom functionality  |

<Note>
  For more details about the HTML image element and its attributes, see the [MDN documentation on the img element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img).
</Note>

## PDFs

Embed PDFs using the `<iframe>` element. Don't use the `<embed>` element, as it has inconsistent browser support.

<Tabs>
  <Tab title="Rendered video">
    <iframe src="https://files.buildwithfern.com/fern.docs.buildwithfern.com/learn/895aa63b32f0782585a69f55a203e36aab6f6a8dd3ce7ef154f65d1dc11120bf/products/docs/pages/component-library/default-components/all-about-ferns.pdf" width="100%" height="500px" />
  </Tab>

  <Tab title="HTML">
    ```html
    <iframe src="../default-components/all-about-ferns.pdf" width="100%" height="500px" style={{ border: 'none', borderRadius: '0.5rem' }} />
    ```
  </Tab>
</Tabs>

## Videos

### Local videos

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.

<Warning>
  `.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`.
</Warning>

<Tabs>
  <Tab title="Rendered video">
    <video src="https://files.buildwithfern.com/fern.docs.buildwithfern.com/learn/a0b4e3e7d951a5f70c0374af3d4b7cd49c4c24df13dc54407f543b906149689d/products/docs/pages/component-library/writing-content/embed-fern-waving.mp4" width="854" height="480" autoPlay loop muted controls />
  </Tab>

  <Tab title="HTML">
    ```html
    <video
        src="path/to/your/video.mp4"
        width="854"
        height="480"
        autoPlay
        loop
        playsInline
        muted
    >
    </video>
    ```
  </Tab>
</Tabs>

You can also wrap the video in a container div for additional styling:

```html
<div class="card-video">
    <video
        src="path/to/your/video.mp4"
        width="854"
        height="480"
        autoPlay
        loop
        playsInline
        muted
    >
    </video>
</div>
```

Common video attributes:

| Attribute            | Description                                                |
| -------------------- | ---------------------------------------------------------- |
| `src`                | URL or path to the video file                              |
| `width` and `height` | Dimensions of the video player                             |
| `autoPlay`           | Video starts playing automatically                         |
| `loop`               | Video repeats when finished                                |
| `playsInline`        | Video plays inline on mobile devices instead of fullscreen |
| `muted`              | Video plays without sound                                  |
| `controls`           | Shows video player controls (play/pause, volume, etc.)     |

<Note>
  For more details about the HTML video element and its attributes, see the [MDN documentation on the video element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video).
</Note>

### Embed YouTube or Loom videos

You can embed videos from YouTube, Loom, Vimeo, and other streaming platforms using an `<iframe>` element.

<Warning>
  `.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`.
</Warning>

<Tabs>
  <Tab title="Rendered Loom video">
    <iframe src="https://www.loom.com/embed/2e7f038de6894c69bf9c0d2525b0ad7f?sid=8bb327d2-8ba6-413c-a832-8d80282ad527" width="100%" height="450px" frameBorder="0" allowFullScreen />
  </Tab>

  <Tab title="Loom video syntax">
    ```mdx
    <iframe
      src="https://www.loom.com/embed/2e7f038de6894c69bf9c0d2525b0ad7f?sid=8bb327d2-8ba6-413c-a832-8d80282ad527"
      width="100%"
      height="450px"
      frameBorder="0"
      allowFullScreen
    ></iframe>
    ```
  </Tab>
</Tabs>

See an example of [how it renders](https://elevenlabs.io/docs/conversational-ai/guides/integrations/zendesk#demo-video) on the corresponding docs page from the ElevenLabs documentation.

## LaTeX

Fern supports [LaTeX](https://www.latex-project.org/) math equations. To use LaTeX, wrap your inline math equations in `$`. For example, `$(x^2 + y^2 = z^2)$` will render $x^2 + y^2 = z^2$.

For display math equations, wrap the equation in `$$`. For example:

```latex
$$
% \f is defined as #1f(#2) using the macro
\f\relax{x} = \int_{-\infty}^\infty
    \f\hat\xi\,e^{2 \pi i \xi x}
    \,d\xi
$$
```

$$
% \f is defined as #1f(#2) using the macro
\f\relax{x} = \int_{-\infty}^\infty
    \f\hat\xi\,e^{2 \pi i \xi x}
    \,d\xi
$$

### Displaying literal dollar signs

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 (`\`):

<div>
  <div>
    Without escaping: The product costs $10 and shipping is $5

    With escaping: The product costs \$10 and shipping is \$5
  </div>
</div>

```markdown Markdown wordWrap
Without escaping: The product costs $10 and shipping is $5
With escaping: The product costs \$10 and shipping is \$5
```

## Diagrams

Fern supports creating diagrams within your Markdown using [Mermaid](https://mermaid.js.org/). 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`.

````markdown
```mermaid
erDiagram
    CUSTOMER ||--o{ PLANT-ORDER : places
    PLANT-ORDER ||--|{ PLANT-ID : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```
````

```mermaid
erDiagram
    CUSTOMER ||--o{ PLANT-ORDER : places
    PLANT-ORDER ||--|{ PLANT-ID : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```