Changelog

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.

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.

Logo right-text property

You can now display custom text to the right of your logo image using the new right-text property in your logo configuration. This is useful for adding labels like “Docs” or “API” next to your logo.

1
logo:
2
  dark: assets/images/logo-dark.svg
3
  light: assets/images/logo-light.svg
4
  right-text: Docs

Learn more about the logo configuration options.

Canvas body theme

A new canvas body theme option wraps your main content area in a card-like container with rounded corners and a subtle border. This creates a more contained, focused reading experience that visually separates your documentation content from the sidebar and header.

1
theme:
2
  body: canvas

The canvas theme applies to all page layouts including guides, overviews, and API reference pages. It uses your configured card-background color and border color for consistent styling with your site’s color scheme.

Learn more about theme configuration options.