Starlight Examples
Practical examples of doing stuff in Starlight documentation sites, accompanied by StackBlitz embeds.
Add icons with CSS Add an icon to a part of Starlight’s UI with just some custom CSS
Custom title link Link to any location from your site title
Directory index component Display a grid of links for all pages in a directory
Page authors from Git Display page author avatars loaded from GitHub contribution data in page footers
Generate a changelog with Git A custom page that renders a list of changes to the current repo using Git
Imported code snippets Import and render syntax highlighted source code
Asides in Markdoc Configure Astro’s Markdoc integration to render Starlight asides
Render MathJax syntax Configure Starlight to render mathematical equations using MathJax
Custom audio player Render a custom audio player using Mux’s Media Chrome custom element library.
Multiple sidebars Display a different site navigation on different pages
NPM registry data component A component that fetches data from the NPM registry and to display information about a Node package
Custom page component Take full control over page rendering by overriding Starlight’s Page component
Table of contents override Use the current page title as the title for the table of contents
Transclusion example Re-use snippets of Markdown content with an Include component
How to use
Each of these examples demonstrates how to do a specific thing in a Starlight documentation site. Most pages include a short description of the technique being demonstrated, but these are not fully formed guides or tutorials.
Each example features a StackBlitz embed of a complete Starlight project implementing the technique in question. The embeds contain a live code editor and a preview pane. Embeds work best on larger screens, but will load on mobile too if needed.
You can use the embeds to:
- See a preview of the technique
- Click around the different files to see how they implement things
- Edit the code and see changes reflected in the preview pane
Many of the examples included here demonstrate a concept, but may need modifying for your specific use case. Feel free to copy and edit code as you need to.
All examples on this site are licensed for re-use under an MIT License.