Changelog

Searchable tables

Add the searchable attribute to HTML tables to enable client-side filtering for large tables. A search input appears above the table that filters rows in real-time using case-insensitive substring matching.

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.

Embedded mode

You can now hide the header and footer from your documentation pages by adding ?embedded=true to any URL. This makes it easy to embed your docs in iframes, dashboards, or other contexts where you want to display only the content.

Once enabled, embedded mode persists across navigation events within the same session.

Learn more about embedded mode.

Custom page actions

Define custom page action buttons with your own titles, icons, and URLs. Custom actions appear alongside the built-in page actions like Copy Page and View as Markdown, and can link to external tools, editors, or any URL.

1
page-actions:
2
  options:
3
    custom:
4
      - title: Open in Windsurf
5
        subtitle: Edit with AI assistance
6
        url: "windsurf://open?url={url}"
7
        icon: fa-solid fa-wind
8
        default: true

Custom actions support URL placeholders like {slug}, {domain}, and {url} to dynamically insert page information into the link.

Learn more about configuring custom page actions.

AI-enhanced examples

Fern automatically generates realistic request and response examples for your API Reference using AI. Instead of placeholder values like "string" and 1.1, your examples contain believable data based on your OpenAPI spec’s endpoint properties and descriptions.

These examples stay in sync with your spec - when you change or add fields, the generated examples update automatically. You can customize the style of generated examples, edit them directly, or disable the feature entirely.

Learn more about AI-enhanced examples.