The Starlight team has shipped Starlight 0.42, a release that cleverly balances performance and capability. This update significantly reduces the default JavaScript payload sent to browsers, making documentation sites faster and more accessible, while also introducing new hooks for developers who need to add client-side interactivity. It's a two-pronged approach: trim the fat, then give you the tools to add exactly what you need.
Here are the concrete changes:
- Automatic removal of unused scripts: Starlight now scans your project and strips out any JavaScript that isn't used by your current configuration or components. This often results in a ~20-30% reduction in bytes shipped, directly improving Core Web Vitals like LCP and TTI. The logic is built into the build process, so no extra configuration is required.
- New
client:visibleandclient:idledirectives for islands: These complement the existingclient:loaddirective, giving you finer control over when interactive components load. Useclient:visiblefor above-the-fold content andclient:idlefor less critical widgets, all with a simpleclient:*attribute on any framework component. - Enhanced
<Code>component with line highlighting and copy button: The built-in code block component now includes acopybutton and supports line highlighting via thedata-languageattribute. This is rendered as a static enhancement until JavaScript loads, so it degrades gracefully. - Exposed
beforeHydrationandafterHydrationhooks in the API: For framework integrations, these new lifecycle hooks allow custom logic to run just before or after a component hydrates, enabling smoother interactions with third-party libraries.
This release matters because it addresses a common tension in static site generators: the desire for zero-JavaScript output versus the need for dynamic features. By automatically dropping unused code, Starlight encourages a lean default without sacrificing developer experience. The new directives and hooks give you surgical control over what becomes interactive and when, which is crucial for performance budgets. For documentation sites, this means faster loading on slow connections and better search engine rankings, while still allowing for rich elements like live code samples or search overlays. Upgrade your dependency to @astrojs/[email protected] to take advantage of these improvements.