Skip to content
63 changes: 36 additions & 27 deletions fern/products/docs/docs.yml
Original file line number Diff line number Diff line change
Expand Up @@ -247,33 +247,42 @@ navigation:
- section: API References
collapsed: true
contents:
- page: Generate REST API Reference
path: ./pages/api-references/generate-api-ref.mdx
slug: generate-api-ref
- page: SDK snippets
path: ./pages/api-references/sdk-snippets.mdx
- page: HTTP snippets
path: ./pages/api-references/http-snippets.mdx
- page: API Explorer
path: ./pages/api-references/api-explorer.mdx
slug: api-explorer
- page: Audiences
path: ./pages/api-references/audiences.mdx
- page: Customize API Reference layout
path: ./pages/api-references/customize-api-ref.mdx
- page: Write Markdown in API Reference
path: ./pages/api-references/api-ref-content.mdx
- page: Generate Webhook Reference
path: ./pages/api-references/generate-webhook-ref.mdx
- page: Generate WebSocket Reference
path: ./pages/api-references/generate-websocket-ref.mdx
slug: generate-websocket-ref
- page: Generate OpenRPC Reference
path: ./pages/api-references/generate-openrpc-ref.mdx
slug: generate-openrpc-ref
- page: Generate GraphQL Reference
path: ./pages/api-references/generate-graphql-ref.mdx
slug: generate-graphql-ref
- section: Generation
skip-slug: true
contents:
- page: REST API Reference
path: ./pages/api-references/generate-api-ref.mdx
slug: generate-api-ref
- page: Webhook Reference
path: ./pages/api-references/generate-webhook-ref.mdx
- page: WebSocket Reference
path: ./pages/api-references/generate-websocket-ref.mdx
slug: generate-websocket-ref
- page: OpenRPC Reference
path: ./pages/api-references/generate-openrpc-ref.mdx
slug: generate-openrpc-ref
- page: GraphQL Reference
path: ./pages/api-references/generate-graphql-ref.mdx
slug: generate-graphql-ref
- section: Customization
skip-slug: true
contents:
- page: Customize API Reference layout
path: ./pages/api-references/customize-api-ref.mdx
- page: Audiences
path: ./pages/api-references/audiences.mdx
- page: Write Markdown in API Reference
path: ./pages/api-references/api-ref-content.mdx
- section: Code exploration
skip-slug: true
contents:
- page: SDK snippets
path: ./pages/api-references/sdk-snippets.mdx
- page: HTTP snippets
path: ./pages/api-references/http-snippets.mdx
- page: API Explorer
path: ./pages/api-references/api-explorer.mdx
slug: api-explorer
- section: SEO & GEO
slug: seo
collapsed: true
Expand Down
142 changes: 104 additions & 38 deletions fern/products/docs/pages/api-references/customize-api-ref.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -96,28 +96,15 @@ The `layout` option allows you to specify the order of sub-packages, sections, e
```
</Tab>
<Tab title="GraphQL">
You can reference an operation using the format `operation: OPERATION_TYPE operationName`. See [GraphQL layout customization](/learn/docs/api-references/generate-graphql-ref#customize-the-layout) for more details.
Reference individual GraphQL operations using the `operation` keyword with the format `OPERATION_TYPE operationName`, where `OPERATION_TYPE` is `QUERY`, `MUTATION`, or `SUBSCRIPTION`. If your schema includes operations that share the same name across different namespaces, use dot notation to disambiguate.
```yaml title="docs.yml"
navigation:
- api: API Reference
layout:
- user:
- operation: QUERY getUser
- operation: MUTATION createUser
- operation: MUTATION deleteUser
```
</Tab>
<Tab title="WebSocket">
You can reference a WebSocket endpoint using the format `WSS /path/name`.
```yaml title="docs.yml"
navigation:
- api: API Reference
layout:
- plants:
- GET /plants
- WSS /plants/live-updates
- WSS /plants/growth-monitor
```
- operation: QUERY admin.getUser
- operation: MUTATION createPlant
- operation: SUBSCRIPTION plantUpdates
</Tab>
</Tabs>

Expand All @@ -132,24 +119,57 @@ The `layout` option allows you to specify the order of sub-packages, sections, e
By default, section display names come from [service file names](/api-definitions/ferndef/endpoints/overview#service-definition) (Fern
Definition) or tag names (OpenAPI) in your spec.

To override the display name of a section, use the `section` property in your `docs.yml` and reference the `lowerCamelCase` version of the original service file name (Fern Definition) or tag name (OpenAPI) in `referenced-packages`.
To override the display name of a section, use the `section` property in your `docs.yml`.

```yaml title="docs.yml" {4-6}
navigation:
- api: API Reference
layout:
- section: "Billing" # New section display name
referenced-packages:
- billing # lowerCamelCase version of original tag/service file name from your spec
contents: []
- section: "Bank Accounts"
referenced-packages:
- bankAccounts
contents: []
```
<Note>
For OpenAPI, you can alternatively customize tag display names directly in your spec (or `overrides.yml` file) using the [`x-displayName` extension](/api-definitions/openapi/extensions/tag-display-names).
</Note>
<Tabs>
<Tab title="OpenAPI">
```yaml title="docs.yml" {4-6}
navigation:
- api: API Reference
layout:
- section: "Billing" # New section display name
referenced-packages:
- billing # lowerCamelCase version of original tag name from your spec
contents: []
- section: "Bank Accounts"
referenced-packages:
- bankAccounts
contents: []
```
<Note>
You can alternatively customize tag display names directly in your spec (or overlays file) using the [`x-displayName` extension](/api-definitions/openapi/extensions/tag-display-names).
</Note>
</Tab>
<Tab title="Fern Definition">
```yaml title="docs.yml" {4-6}
navigation:
- api: API Reference
layout:
- section: "Billing" # New section display name
referenced-packages:
- billing # lowerCamelCase version of original service file name from your spec
contents: []
- section: "Bank Accounts"
referenced-packages:
- bankAccounts
contents: []
```
</Tab>
<Tab title="GraphQL">
```yaml title="docs.yml"
navigation:
- api: GraphQL API Reference
layout:
- section: Plants
contents:
- operation: QUERY getPlant
- operation: MUTATION createPlant
- section: Real-time
contents:
- operation: SUBSCRIPTION plantUpdates
```
</Tab>
</Tabs>

### Flattening sections

Expand Down Expand Up @@ -205,6 +225,17 @@ To customize the display of an endpoint, you can add a `title`. You can also use
slug: live-updates
```
</Tab>
<Tab title="GraphQL">
```yaml title="docs.yml" {6-8}
navigation:
- api: API Reference
layout:
- user:
- operation: QUERY getUser
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📝 [vale] reported by reviewdog 🐶
[FernStyles.Acronyms] 'QUERY' has no definition.

title: Get user details
slug: get-user
```
</Tab>
</Tabs>

<Frame>
Expand Down Expand Up @@ -252,6 +283,15 @@ You can hide an endpoint from the API Reference by setting `hidden` to `true`. T
hidden: true
```
</Tab>
<Tab title="GraphQL">
```yaml title="docs.yml" {5}
navigation:
- api: API Reference
layout:
- operation: MUTATION deletePlant
hidden: true
```
</Tab>
</Tabs>

### Adding custom sections
Expand All @@ -274,16 +314,30 @@ You can add arbitrary folders in the sidebar by adding a `section` to your API R
</Tab>
<Tab title="Fern Definition">
```yaml title="docs.yml"
navigation:
navigation:
- api: API Reference
layout:
layout:
- section: My Section
icon: flower
contents:
contents:
- user.update
- plant
```
</Tab>
<Tab title="GraphQL">
```yaml title="docs.yml"
navigation:
- api: API Reference
layout:
- section: Plants
contents:
- operation: QUERY getPlant
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📝 [vale] reported by reviewdog 🐶
[FernStyles.Acronyms] 'QUERY' has no definition.

- operation: MUTATION createPlant
- section: Real-time
contents:
- operation: SUBSCRIPTION plantUpdates
```
</Tab>
</Tabs>

<Frame>
Expand Down Expand Up @@ -360,7 +414,19 @@ navigation:

When you set availability for a section, all endpoints in that section will inherit the section-level availability unless explicitly overridden in your API definition.

<Warning>You can't set availability for individual endpoints in `docs.yml`. Endpoint availability must be configured directly in your API definition. Learn more about availability for [OpenAPI](/learn/api-definitions/openapi/extensions/availability) or [Fern Definition](/learn/api-definitions/ferndef/availability).</Warning>
<Warning>
You can't set availability for individual OpenAPI and Fern Definition endpoints in `docs.yml` — endpoint availability must be configured directly in your API definition. Learn more about availability for [OpenAPI](/learn/api-definitions/openapi/extensions/availability) or [Fern Definition](/learn/api-definitions/ferndef/availability).

For GraphQL, `availability` can be set per operation:

```yaml title="docs.yml"
navigation:
- api: API Reference
layout:
- operation: SUBSCRIPTION plantUpdates
availability: beta
```
</Warning>

### Displaying endpoint errors

Expand Down
42 changes: 27 additions & 15 deletions fern/products/docs/pages/api-references/generate-api-ref.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ description: Use Fern Docs to generate REST API Reference documentation from an
Fern generates REST API Reference documentation from an [OpenAPI specification](/learn/api-definition/openapi/overview) or [Fern Definition](/learn/api-definition/fern/overview). Once the API definition is set up, adding it to the docs takes just one line of configuration.

<Tip>
Fern also supports [GraphQL](/learn/docs/api-references/generate-graphql-ref), [WebSocket](/learn/docs/api-references/generate-websocket-ref) (AsyncAPI or Fern Definition), [OpenRPC](/learn/docs/api-references/generate-openrpc-ref), and [Webhook](/learn/docs/api-references/generate-webhook-reference) references.
Fern also supports [GraphQL](/learn/docs/api-references/generate-graphql-ref), [WebSocket](/learn/docs/api-references/generate-websocket-ref) (AsyncAPI or Fern Definition), [OpenRPC](/learn/docs/api-references/generate-openrpc-ref), and [Webhook](/learn/docs/api-references/generate-webhook-ref) references.
</Tip>

## Configuration
Expand Down Expand Up @@ -37,28 +37,37 @@ navigation:

Fern will automatically populate your endpoints, types, and code snippets from your API definition. Request and response examples are [generated using AI](/learn/docs/ai-features/ai-examples) to show realistic data instead of placeholder values.
</Step>
</Steps>
<Step title="Customize the layout">

For a full list of configuration options and layout customizations, see [Customize API Reference layout](/learn/docs/api-references/customize-api-reference-layout).

</Step>
</Steps>

### Include more than one API Reference

To include multiple, distinct API definitions in your documentation, use the `api-name` property. The `api-name` corresponds to the folder name containing your API definition.

This works with any combination of OpenAPI and Fern Definition formats. For example:

```bash
fern/
├─ fern.config.json
├─ docs.yml
├─ plant-api/
│ ├─ openapi.yml # OpenAPI spec
│ └─ generators.yml # References the OpenAPI spec
└─ garden-api/
└─ definition/ # Fern Definition (auto-detected)
└─ api.yml
```

<Files>
<Folder name="fern" defaultOpen>
<File name="fern.config.json" />
<File name="docs.yml" />
<Folder name="plant-api" defaultOpen>
<File name="openapi.yml" comment="OpenAPI spec" />
<File name="generators.yml" comment="References the OpenAPI spec" />
</Folder>
<Folder name="garden-api" defaultOpen>
<Folder name="definition" defaultOpen>
<File name="api.yml" />
</Folder>
</Folder>
</Folder>
</Files>

<Tabs>
<Tab title="Flat layout">
For a simple setup without tabs, you can include multiple API References directly in your navigation:

```yaml title="docs.yml"
Expand All @@ -68,7 +77,8 @@ navigation:
- api: Garden
api-name: garden-api # Matches folder name containing your API definition
```

</Tab>
<Tab title="Tabbed layout">
When using tabs, each API Reference must be placed within a tab's `layout`:

```yaml title="docs.yml" {12, 17}
Expand All @@ -91,3 +101,5 @@ navigation:
api-name: garden-api # Matches folder name containing your API definition
skip-slug: true
```
</Tab>
</Tabs>
Loading
Loading