Skip to content
Starlight View Modes

Getting Started

Getting Started

Learn how to add the view modes to your documentation website with the Starlight View Modes plugin.

A Starlight plugin adding different view mode capabilities to your documentation website.

Prerequisites

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.

Installation1/2

  1. Starlight View Modes is a Starlight plugin that you can install using your favorite package manager:

    Terminal window
    npm i starlight-view-modes

Installation2/2

  1. Configure the plugin in your Starlight configuration in the astro.config.mjs file.

    astro.config.mjs
    import starlight from '@astrojs/starlight'
    import { defineConfig } from 'astro/config'
    import starlightViewModes from 'starlight-view-modes'
    

    export default defineConfig({
      integrations: [
        starlight({
          plugins: [starlightViewModes()],
          title: 'My Docs',
        }),
      ],
    })

  2. Start the development server to see the plugin in action.

The Starlight View Modes plugin behavior can be tweaked using various configuration options.

Component overrides

The Starlight View Modes plugin uses a Starlight component override for the PageTitle, Search, SocialIcons, and TableOfContents components.

If you have a custom PageTitle component override in your Starlight project, you will need to manually render the PageTitle component from the Starlight View Modes plugin in your custom component:

src/components/overrides/PageTitle.astro
---
import Default from '@astrojs/starlight/components/PageTitle.astro'
import StarlightViewModesPageTitle from 'starlight-view-modes/components/PageTitle.astro'
---


<Default><slot /></Default>
<p>Custom content in the PageTitle override</p>
<StarlightViewModesPageTitle />

The same logic applies to the Search, SocialIcons and TableOfContents components.

Switch to normal mode

Contents