Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ Custom CSS & JS are available on the Basic plan.
Adding Custom Components is available on the Pro plan.
</Note>

This page covers how to customize your docs with CSS, JavaScript, and custom components. However, you can [customize many things directly in your `docs.yml` file](/docs/configuration/what-is-docs-yml), including colors, typography, navbar links, layout, analytics, and metadata. Try these built-in options first before adding custom code.

## Custom CSS

You can add custom CSS to your docs to further customize the look and feel. The defined class names are applied across all MDX files.
Expand Down Expand Up @@ -194,6 +196,12 @@ js:
```
</CodeBlock>

### Common use cases

- Integrate with [third-party platforms](/docs/integrations/overview) that Fern doesn't natively support
- Implement custom search (also requires [your Algolia credentials](/docs/customization/search))
- Insert scripts and widgets

## Custom components

You can use custom CSS and JS to replace Fern's default UI components with your own. The `header` and `footer`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@ This will automatically render a card with the title, icon, and content you spec

Want to bring your own UI components, such as a custom header and footer? You can on the Enterprise plan. [Contact us](https://buildwithfern.com/contact) to learn more.

For styling and functionality customizations, see [Custom CSS & JavaScript](/docs/customization/custom-css-js).

## Requests for new components

Have a component in mind that you'd like to see in Fern? Let us know by filing a [GitHub Issue](https://github.com/fern-api/fern/issues/new?assignees=&labels=&projects=&template=feature-request.md&title=%5BFeature%5D).
Expand Down
2 changes: 1 addition & 1 deletion fern/products/docs/pages/customization/frontmatter.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ subtitle: Set titles, add meta descriptions, and more
description: Use frontmatter to set a variety of page properties and metadata.
---

You can optionally use frontmatter to set each page's title, full slug override, meta description, a URL to suggest edits to the page, and its OpenGraph image. You can also use frontmatter to disable certain page elements like the table of contents and on-page feedback.
You can optionally use frontmatter to set each page's title, full slug override, meta description, a URL to suggest edits to the page, and its OpenGraph image. You can also use frontmatter to disable certain page elements like the table of contents and on-page feedback. For advanced styling and functionality customizations beyond frontmatter options, see [custom CSS and JavaScript](/docs/customization/custom-css-js).

Frontmatter must be added to the top of a `.md` or `.mdx` file, before the rest of the content. Use sets of three dashes to indicate the beginning and end of your frontmatter, as shown:

Expand Down
2 changes: 1 addition & 1 deletion fern/products/docs/pages/customization/search.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -42,4 +42,4 @@ Contact the Fern team to get your specific application ID and index name. Creden

## Using an alternative search

You can override Fern's search with your own solution. To learn more, see [Custom JavaScript](/learn/docs/building-and-customizing-your-docs/custom-css-global-js#custom-javascript).
You can override Fern's search with your own solution using [custom JavaScript](/learn/docs/building-and-customizing-your-docs/custom-css-global-js#custom-javascript) and your Algolia credentials.
2 changes: 2 additions & 0 deletions fern/products/docs/pages/customization/what-is-docs-yml.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ subtitle: "Customize your documentation using the docs.yml file"
description: "Learn how to configure your Fern documentation site with the docs.yml file. Customize colors, typography, layout, analytics and more."
---

The `docs.yml` file is your primary tool for customizing your documentation site, including colors, typography, layout, analytics, and more. Start here for most customization needs before considering [custom CSS and JavaScript](/docs/customization/custom-css-js) for advanced use cases.

### YAML Schema Validation

To enable intelligent YAML validation and autocompletion in your editor, add this line at the top of your `docs.yml` file:
Expand Down
4 changes: 4 additions & 0 deletions fern/products/docs/pages/integrations/overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -94,3 +94,7 @@ are available during the workflow run.
The Postman integration is not configured in `docs.yml`. Check out this [page](/learn/docs/integrations/postman) to
learn more.
</Info>

## Connect other integrations

If you want to integrate with a third-party analytics or support platforms that Fern doesn't directly support, you can do so [using custom JS](/docs/customization/custom-css-js#custom-javascript).
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,4 @@ announcement:
message: "🚀 New feature: Announcements are available! (<a href=\"https://buildwithfern.com/learn/docs/building-your-docs/announcements\" target=\"_blank\">Learn more</a>) 🚀"
```

Markdown and HTML is supported in the announcement message. You can include links, images, and other formatting. [Custom CSS](/learn/docs/building-your-docs/custom-css-global-js#custom-css) can be used to customize the style of the announcement.
Markdown and HTML is supported in the announcement message. You can include links, images, and other formatting. [Custom CSS](/docs/customization/custom-css-js#custom-css) can be used to customize the style of the announcement.