Configuration

Versioning

Allow users to navigate between different versions of your docs.

Versioning is available on all plans: up to 3 versions on Basic, 10 versions on Pro, or unlimited on Enterprise. Contact support@buildwithfern.com for more information.

A dropdown of the available versions

Each version of your docs can contain its own distinct tabs, sections, pages, and API references. Versions can share content, as well.

Add versions to your docs

1

Define your versions

Create a versions folder inside of your fern folder. To specify the contents of each version, add a .yml file to the versions folder to define the navigational structure of that version. Make sure to include the navigation and tabs properties, if applicable.

$fern/
>  ├─ fern.config.json
>  ├─ generators.yml
>  ├─ docs.yml
>  ├─ pages/
>    ├─ ...
>  └─ versions/
>    ├─ latest/pages/...
>    ├─ latest.yml
>    ├─ v2/pages/...
>    └─ v2.yml

Version-specific yml files:

1navigation: 
2  - section: Introduction
3    contents: 
4      - page: My Page
5        path: ./latest/pages/my-page.mdx  # relative path to the file
6      - page: Shared Resource
7        path: ../shared-pages/shared-resource.mdx
8  - api: API Reference
You can also have multiple products, some versioned and some unversioned.
2

Add your version configuration

Define a version in the top-level docs.yml by adding an item to the versions list and specifying the display-name and path.

docs.yml
1versions: 
2  - display-name: Latest          # shown in the dropdown
3    path: ./versions/latest.yml   # relative path to the version file
4  - display-name: V2
5    path: ./versions/v2.yml
Default versions

Versions appear in the version dropdown in the order listed in versions. The first version in your versions list is your default version. This version uses unversioned paths like /docs/getting-started, while other versions use versioned paths like /docs/getting-started/v2.

Fern automatically handles version routing by redirecting broken versioned links to the default version and managing canonical URLs.

3

Indicate availability

You can optionally set the availability status for each version. Options are deprecated, ga, stable, and beta.

Version availability is distinct from section and page availability, with different options. If you want to set section and page availability, do so in your version-specific yml files.

docs.yml
1versions: 
2  - display-name: Latest          
3    path: ./versions/latest.yml   
4    availability: beta
5  - display-name: v2
6    path: ./versions/v2.yml
7    availability: stable
4

Remove extra navigation from docs.yml

If your docs.yml file includes a navigation field or a tabs field, be sure to remove. Those fields should now belong in the version-specific .yml files.

5

Add instance audiences

Control which versions appear in each documentation instance by tagging them with audiences. This enables separate sites for different user groups (e.g., internal developers, beta testers, public customers).

Content is filtered based on audience tags:

  • Match: Content with an audience matching the instance audience is included
  • No match: Content with a non-matching audience is excluded
  • No audience: Content without an audience tag is included by default

Define audiences for instances and versions in docs.yml:

docs.yml
1instances:
2  - url: internal.docs.buildwithfern.com
3    audiences:
4      - internal # Only shows content tagged with 'internal'
5  - url: public.docs.buildwithfern.com
6    audiences:
7      - public # Only shows content tagged with 'public'
8versions:
9  - display-name: v3
10    path: ./versions/v3.yml
11    audiences:
12      - public # This version only appears on the public instance
13  - display-name: v2 (Internal)
14    path: ./versions/v2.yml
15    audiences:
16      - internal # This version only appears on the internal instance

Customize version selector styling

You can directly customize the appearance of the version selector by targeting the fern-version-selector CSS class.

Common styling adjustments

Adjusting positioning: Use transform: translateY(Npx) to adjust the vertical positioning of the selectors. This ensures that the selectors match the line height of your logo for better visual alignment.

Enhancing visual prominence: You can modify the border radius and add borders to make the selectors more prominent and better integrated with your site’s design aesthetic.

1.fern-version-selector {
2  transform: translateY(1px);
3  border-radius: 1000px;
4  border: 1px solid var(--border);
5}

Customize the dropdown

The dropdown menu for the version selector can be customized using the fern-version-selector-radio-group CSS class.

Example of a styled version selector