Changelog

POST support for JWT callback

The JWT callback endpoint (/api/fern-docs/auth/jwt/callback) now accepts POST requests with application/x-www-form-urlencoded body in addition to GET requests with query parameters. POST avoids exposing JWT tokens in URLs and server logs.

Learn more about authentication.

API key injection for self-hosted docs

Self-hosted deployments support API key injection via environment variables. Enable FERN_API_KEY_INJECTION_ENABLED to show a Login button in the API Explorer without requiring login for the entire site. Use FERN_AUTH_ALLOWLIST and FERN_AUTH_DENYLIST to control page-level access.

Learn more about self-hosted authentication.

Multiple API keys and per-environment keys

API key injection supports multiple API keys and per-environment credentials. Provide multiple keys as a JSON-encoded array in bearer_token, and use env_state to set different credentials per environment with substring matching.

Customize GraphQL API Reference layout

Control how GraphQL operations appear in the sidebar using the operation keyword in your docs.yml layout. Order operations, set custom titles and slugs, hide operations, and group them into sections.

1
navigation:
2
  - api: GraphQL API Reference
3
    layout:
4
      - section: Plants
5
        contents:
6
          - operation: QUERY getPlant
7
            title: Get plant details
8
          - operation: MUTATION createPlant

Learn more about customizing GraphQL layouts.

GraphQL API Reference

Generate API Reference documentation from a GraphQL schema. Add your .graphql schema file to generators.yml and Fern renders queries, mutations, subscriptions, and types as an interactive reference.

1
api:
2
  specs:
3
    - graphql: schema.graphql

Learn more about generating a GraphQL reference.

Deep linking for Ask Fern

Open Ask Fern or the search dialog directly from a URL using query parameters. Append ?searchType=ai&query={prompt} to open Ask AI with a prompt, or ?query={search} for regular search. Parameters are removed from the URL after the search opens.

Learn more about deep linking.

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.