https://github.com/fern-api/docs-custom-js-example
Fern Docs example with custom headers and footers
https://github.com/fern-api/docs-custom-js-example
built-with-fern custom-components mdx
Last synced: about 1 month ago
JSON representation
Fern Docs example with custom headers and footers
- Host: GitHub
- URL: https://github.com/fern-api/docs-custom-js-example
- Owner: fern-api
- Created: 2024-02-09T01:48:16.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-06-30T15:54:28.000Z (12 months ago)
- Last Synced: 2025-09-30T09:46:28.668Z (9 months ago)
- Topics: built-with-fern, custom-components, mdx
- Language: TypeScript
- Homepage: https://custom-js-example.docs.buildwithfern.com/
- Size: 226 KB
- Stars: 1
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Fern Docs: Custom Headers and Footers
This repo contains a basic react-app example that inserts a custom header and footer into Fern docs using custom JS and CSS.
### Custom header
```javascript
ReactDOM.render(
React.createElement(NavHeader),
document.getElementById('fern-header'),
)
```
### Custom footer
```javascript
ReactDOM.render(
React.createElement(NavFooter),
document.getElementById('fern-footer'),
)
```
## Getting started
1. `cd custom-app`
2. `yarn build`
3. `fern generate --docs`
### Important notes
1. This approach is subject to change as we make improvements to the plugin architecture
2. `ReactDOM.render()` may need to be called multiple times to prevent it from unmounting (this side-effect will be removed in the future).
3. `yarn build` or `npm build` must output `dist` files with deterministic names. This example uses [this vite config](https://github.com/fern-api/docs-custom-js-example/blob/main/custom-app/vite.config.ts#L11-L12) to accomplish it. Then, reference the [js/css files in the docs.yml](https://github.com/fern-api/docs-custom-js-example/blob/main/fern/docs.yml#L22-L27) to get picked up by Fern Docs.
4. You may need to update your CD steps to include [building the react-app](https://github.com/fern-api/docs-custom-js-example/blob/main/.github/workflows/publish-docs.yml#L19-L24).
5. If you use tailwind, make sure to prefix the [tailwind classes and disable preflight](https://github.com/fern-api/docs-custom-js-example/blob/main/custom-app/tailwind.config.js#L66-L69) to deconflict with the Fern's stylesheet.