Fully customize your docs

This page covers CSS and JavaScript customization:

• CSS for styling, visual changes, and hiding elements
• JavaScript for client-side behavior, third-party integrations, and widgets

For server-rendered reusable elements in your MDX content, see Custom React components. To replace Fern’s default header or footer, see Custom header and footer.

You can also customize many things directly in your docs.yml file, including colors, typography, navbar links, layout, analytics, and metadata. Try these built-in options first before adding custom code.

Custom CSS

You can add custom CSS to your docs to further customize the look and feel. The defined class names are applied across all MDX files. See the CSS selectors reference for a complete list of available .fern-* selectors.

$
  fern/
$
  ├─ openapi/
$
  ├─ pages/
$
  ├─ images/
$
  ├─ styles.css
$
  ├─ docs.yml
$
  └─ fern.config.json

1
css: ./styles.css

1
css:
2
  - ./css/header-styles.css
3
  - ./css/footer-styles.css

Common use cases

1
.fern-layout-footer-toolbar { # Hides Fern feedback widget
2
  display: none !important;
3
}

1
.petstore-table {
2
    background-color: white;
3
    border: 1px solid #DEDEE1;
4
    border-radius: 4px;
5
}
6
7
.dark .petstore-table { 
8
    background-color: #1e1e1e;
9
    border: 1px solid #2e2e2e;
10
}
11
12
.petstore-table thead {
13
    position: sticky;
14
    top: 0;
15
}
16
17
.petstore-table thead tr {
18
    background-color: #edecee;
19
    border: 1px solid #DEDEE1;
20
    border-radius: 4px 4px 0px 0px;
21
}
22
23
.dark .petstore-table thead tr {
24
    background-color: #2e2e2e;
25
    border: 1px solid #2e2e2e;
26
}
27
28
.petstore-table th {
29
    padding: 6px;
30
}
31
32
.petstore-table tbody td {
33
    padding: 6px;
34
}
35
36
.petstore-table tbody tr:nth-child(odd) {
37
    border: 1px solid #DEDEE1;
38
}
39
.petstore-table tbody tr:nth-child(even) {
40
    border: 1px solid #DEDEE1;
41
    background-color: #f7f6f8;
42
}
43
44
.dark .petstore-table tbody tr:nth-child(odd) {
45
    border: 1px solid #2e2e2e;
46
}
47
48
.dark .petstore-table tbody tr:nth-child(even) {
49
    border: 1px solid #2e2e2e;
50
    background-color: #2e2e2e;
51
}

Inline CSS on MDX pages

You can add CSS directly within an MDX page using a <style> tag. This is useful for page-specific styles that don’t need to be applied globally.

1
---
2
title: My page
3
---
4
5
<style>
6
{`
7
.tropical-callout {
8
  background: linear-gradient(135deg, #2d5016 0%, #4a7c23 100%);
9
  border-radius: 8px;
10
  padding: 16px;
11
  color: white;
12
}
13
14
.dark .tropical-callout {
15
  background: linear-gradient(135deg, #1a3009 0%, #2d5016 100%);
16
}
17
`}
18
</style>
19
20
<div className="tropical-callout">
21
  Monstera deliciosa thrives in bright, indirect light.
22
</div>

The CSS must be wrapped in curly braces and backticks ({``}) to be valid JSX. Use the .dark selector prefix to define styles for dark mode.

Custom JavaScript

Customize the behavior of your Docs site by injecting custom JavaScript globally.Add a custom.js file and include it in your fern/ project:

$
  fern/
$
  ├─ openapi/
$
  ├─ pages/
$
  ├─ images/
$
  ├─ custom.js
$
  ├─ docs.yml
$
  └─ fern.config.json

In docs.yml, specify the path to the custom.js file:

1
js: ./custom.js

You can also specify multiple custom JS files stored locally and remote:

1
js:
2
  - path/to/js/file.js
3
  - path: path/to/another/js/file.js
4
    strategy: beforeInteractive
5
  - url: https://example.com/path/to/js/file.js

Strategy

Optionally, specify the strategy for each custom JavaScript file. Choose from beforeInteractive, afterInteractive (default), and lazyOnload.

1
js:
2
  - path: path/to/another/js/file.js
3
    strategy: beforeInteractive

Common use cases

• Integrate with third-party platforms that Fern doesn’t natively support

• Implement custom search (also requires your Algolia credentials)

• Insert scripts and widgets