Skip to content

Getting Started

A Starlight plugin to tweak the behavior of draft pages:

  • In development mode, sidebar links to draft pages are highlighted with a badge and an italicized label by default.
  • In production mode, sidebar links to draft pages are automatically removed.

By default, Starlight errors when its sidebar configuration contains links using slugs to draft pages. This behavior is great as it can help catch many mistakes, e.g. adding a sidebar link to a draft page and forgetting to remove the draft status from that page before deploying, and also avoids automatic sidebar changes between development and production modes.

Starlight Auto Drafts provides an alternative behavior that automatically removes draft pages from the sidebar in production mode, which can be useful if you prefer this behavior and are not concerned about the potential issues mentioned above.

You will need to have a Starlight website set up. If you don’t have one yet, you can follow the “Getting Started” guide in the Starlight docs to create one.

  1. Starlight Auto Drafts is a Starlight plugin. Install it using your favorite package manager:

    Terminal window
    npm i starlight-auto-drafts
  2. Add the plugin to your Starlight configuration in the astro.config.mjs file.

    astro.config.mjs
    // @ts-check
    import starlight from '@astrojs/starlight'
    import { defineConfig } from 'astro/config'
    import starlightAutoDrafts from 'starlight-auto-drafts'
    export default defineConfig({
    integrations: [
    starlight({
    plugins: [starlightAutoDrafts()],
    title: 'My Docs',
    }),
    ],
    })
  3. Start the development server to preview the updated sidebar where draft pages are highlighted with a badge and an italicized label.

    When building your site for production, all sidebar links to draft pages will be automatically removed.

The Starlight Auto Drafts plugin behavior can be tweaked using various configuration options.