Changelog

Server-side rendered custom header and footer

Replace Fern’s default header or footer with your own React components using the new header and footer properties in docs.yml.

1
header: ./components/CustomHeader.tsx
2
footer: ./components/CustomFooter.tsx

Components are server-side rendered for better SEO and performance, with no layout shifts during page load.

Learn more about custom header and footer components.

Absolute imports with @ prefix

Import custom components using the @/ prefix for absolute paths from your fern folder root. This is especially useful for nested MDX files where relative paths like ../../../components/Banner would be cumbersome.

1
import { CustomCard } from "@/components/CustomCard"

Relative imports are still supported.

Learn more about custom React components.

Title source for folder navigation

By default, folder navigation derives page titles from filenames. You can now set title-source: frontmatter to use the title field from each file’s frontmatter instead.

1
navigation:
2
  - folder: ./pages/guides
3
    title: Guides
4
    title-source: frontmatter

Files without a frontmatter title fall back to the filename-derived value.

Learn more about folder navigation.

Try It button in EndpointRequestSnippet

The <EndpointRequestSnippet> component now includes a Try It button, allowing users to access the endpoint explorer and test API endpoints directly from code snippets.

Learn more about EndpointRequestSnippet.

Frontmatter availability

Set page availability directly in frontmatter using the availability field. This displays an availability badge on the page and overrides any availability defined in the navigation (docs.yml).

1
---
2
title: New feature
3
availability: beta
4
---

Valid values are: stable, generally-available, in-development, pre-release, deprecated, or beta.

Learn more about frontmatter availability.

Folder section overviews with index files

When using folder navigation, add an index.mdx or index.md file to any folder to automatically use it as the section overview. The index file is used as the overview page and excluded from the section contents. This works for both top-level folders and nested subdirectories.

Learn more about folders.

Searchable tables

The <SearchableTable> component enables client-side filtering for large tables. A search input appears above the table that filters rows in real-time using case-insensitive substring matching. Wrap any markdown table with <SearchableTable> to add search functionality:

1
<SearchableTable>
2
| Plant | Light Requirements | Water |
3
|-------|-------------------|-------|
4
| Fern | Partial shade | Weekly |
5
| Snake Plant | Low to bright indirect | Bi-weekly |
6
</SearchableTable>

Use <StickySearchableTable> to combine both sticky headers and search:

1
<StickySearchableTable>
2
| Plant | Light Requirements | Water |
3
|-------|-------------------|-------|
4
| Fern | Partial shade | Weekly |
5
| Snake Plant | Low to bright indirect | Bi-weekly |
6
</StickySearchableTable>

Alternatively, add the searchable attribute to HTML tables:

1
<table searchable className="fern-table">
2
  ...
3
</table>

Learn more about searchable tables.

Switcher placement configuration

Control where the product and version switchers appear in your documentation site using the switcher-placement option in your docs.yml layout configuration. Choose between header (default) to display switchers in the top navigation bar, or sidebar to place them in the sidebar navigation.

1
layout:
2
  switcher-placement: sidebar

Learn more about layout configuration.

Smart continuation in code blocks

Bash and terminal code blocks now intelligently display $ for new commands and > for continuation lines when a command spans multiple lines using \. This makes it easier to distinguish between separate commands and multi-line commands in the same code block.

$
fern init
$
fern generate --group external \
>
    --log-level debug \
>
    --version 1.0.0
$
fern check
$
fern docs dev

Learn more about code blocks.

Hide line numbers in code blocks

The <CodeBlock> component now supports a showLineNumbers prop that allows you to hide line numbers in the gutter. This is useful for short code snippets, command examples, or single-function demonstrations where line numbers add unnecessary visual noise.

def get_plant(plant_id):
    return plants.get(plant_id)

Learn more about code block options.

Products and versions props for If component

The <If> component now supports products and versions props, allowing you to conditionally show content based on where a page is located within the navigation structure.

1
<If products={["api-reference"]}>
2
  This content only shows in the api-reference product
3
</If>
4
5
<If versions={["v2", "v3"]}>
6
  This content only shows in v2 or v3
7
</If>
8
9
<If products={["docs"]} versions={["v2"]}>
10
  All conditions must match (AND logic)
11
</If>

You can also use the not prop to invert the condition, showing content when the current product or version does not match.

Learn more about the If component.

Languages prop for EndpointRequestSnippet

The <EndpointRequestSnippet> component now supports a languages prop to control which languages appear in the dropdown and their order. You can also include payload to show the raw JSON request body or query parameters.

1
<EndpointRequestSnippet 
2
  endpoint="POST /plant" 
3
  languages={["curl", "python", "payload"]}
4
/>

When languages is not specified, all available languages are shown with payload appearing last.

Learn more about the Endpoint request snippet component.

Versions component

The new <Versions> component displays different content based on version selection. Users can switch between versions using a dropdown, and the selected version persists in the URL query parameter.

1
<Versions>
2
  <Version version="v2.0" title="Version 2.0" default>
3
    Content for version 2.0.
4
  </Version>
5
  <Version version="v1.0" title="Version 1.0">
6
    Content for version 1.0.
7
  </Version>
8
</Versions>

This is useful for displaying version-specific documentation, installation instructions, or API examples without duplicating pages.

Learn more about the Versions component.

Collapsed state for Runnable endpoint component

The <RunnableEndpoint> component now supports a collapsed prop to control the initial display state. When set to true, the form section is hidden until users expand it.

1
<RunnableEndpoint endpoint="GET /api/plants/{plantId}" collapsed />

This is useful for embedding multiple endpoints on a page or reducing visual clutter while maintaining interactive API testing.

Learn more about the Runnable Endpoint component.

Dynamic SDK snippets enabled by default

Dynamic SDK snippets are now enabled by default. When you configure SDK snippets, users can modify parameters and see code examples update in real time across all supported languages.

If you prefer static code examples, you can disable dynamic snippets in your docs.yml.

Learn more about SDK snippets.

Custom SVG icons in card and icon components

The Card and Icon components support relative paths to SVG files. Use a relative path like ./images/icon.svg to display custom SVG icons from your project.

1
<Card 
2
    title="Fern species" 
3
    icon="./images/fern-leaf.svg"
4
>
5
    Card with a custom SVG icon.
6
</Card>
7
8
<Icon icon="./images/fern-leaf.svg" /> Custom SVG icon

Learn more about the Card and Icon components.