This repo contains a basic react-app example that inserts a custom header and footer into Fern docs using custom JS and CSS.
ReactDOM.render(
React.createElement(NavHeader),
document.getElementById('fern-header'),
)
![](https://private-user-images.githubusercontent.com/693032/306094088-a8c84dce-3a15-4464-87ee-7d3872e1fb2c.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjA0MTc0OTEsIm5iZiI6MTcyMDQxNzE5MSwicGF0aCI6Ii82OTMwMzIvMzA2MDk0MDg4LWE4Yzg0ZGNlLTNhMTUtNDQ2NC04N2VlLTdkMzg3MmUxZmIyYy5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzA4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcwOFQwNTM5NTFaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1kODVkOTlhNzY3YzIwMTA1Nzc4ZTc5M2FjNzJhNTA0ZjUwZDAxNTgxZmEyMGYxNzYxNDBhNDVmOWU2MzRkN2RmJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.S0UYw6nHIALhukliB52ZUFeyGFWJv710298jk3DOYRE)
ReactDOM.render(
React.createElement(NavFooter),
document.getElementById('fern-footer'),
)
![Screenshot 2024-02-19 at 6 42 49 PM](https://private-user-images.githubusercontent.com/693032/306094138-7cbfe507-4c47-4413-96da-fd291161562e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjA0MTc0OTEsIm5iZiI6MTcyMDQxNzE5MSwicGF0aCI6Ii82OTMwMzIvMzA2MDk0MTM4LTdjYmZlNTA3LTRjNDctNDQxMy05NmRhLWZkMjkxMTYxNTYyZS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzA4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcwOFQwNTM5NTFaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0wZGIwNWRhYjY0MWJmMTczOGE4MjE4NTUxZjE0ZjhkNzZjZDA2NmE0ODI1ZTVlZmIzYWFhY2FlY2I4OWE4OWFhJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.-xwxMlYT6k6o0_V_40h-qrB87w8xbAtxtXkuetL_lss)
cd custom-app
yarn build
fern generate --docs
- This approach is subject to change as we make improvements to the plugin architecture
ReactDOM.render()
may need to be called multiple times to prevent it from unmounting (this side-effect will be removed in the future).yarn build
ornpm build
must outputdist
files with deterministic names. This example uses this vite config to accomplish it. Then, reference the js/css files in the docs.yml to get picked up by Fern Docs.- You may need to update your CD steps to include building the react-app.
- If you use tailwind, make sure to prefix the tailwind classes and disable preflight to deconflict with the Fern's stylesheet.