A minimalist plugin that collapses Starlight's sidebars and expands the main content to full width, creating a distraction-free, fullscreen-like reading experience. Toggle with a single click to focus purely on your content. Learn more

Licensed under the MIT License, Copyright © Windmillcode.

See LICENSE for more information.

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-fullview-mode is a Starlight plugin. Install it by running the following command in your terminal:

   NPM

   npm install starlight-fullview-mode 

   PNPM

   pnpm add starlight-fullview-mode 

   YARN

   yarn add starlight-fullview-mode 

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

import starlight from '@astrojs/starlight' import { defineConfig } from 'astro/config' import starlightFullViewMode from 'starlight-fullview-mode' export default defineConfig({ integrations: [ starlight({ plugins: [ starlightFullViewMode({ // Configuration options go here. }) ], title: 'My Docs', }), ], })

The plugin accepts the following configuration options:

• Type: boolean
• Default: true
• Description: Controls whether the left sidebar can be toggled between collapsed and expanded states.

• Type: boolean
• Default: true
• Description: Controls whether the right sidebar (table of contents) can be toggled between collapsed and expanded states.

• Type: string | null
• Default: null (uses default theme width)
• Description: Custom CSS width value for the left sidebar when expanded (e.g., "250px", "20%").

• Type: string | null
• Default: null (uses default theme width)
• Description: Custom CSS width value for the right sidebar when expanded.

• Type: string
• Default: "50px"
• Description: Custom CSS width value for the left sidebar when collapsed.

• Type: string
• Default: "50px"
• Description: Custom CSS width value for the right sidebar when collapsed.

• Type: boolean
• Default: true
• Description: Rotate the toggle caret buttons when sidebars closed

• Type: boolean
• Default: false
• Description: Controls whether the integration warns if you've overriden a component it wishes to override.

Enable the left sidebar and disable the right sidebar:

starlightFullViewMode({ leftSidebarEnabled: true, rightSidebarEnabled: false}) 

Enable the right sidebar and disable the left sidebar:

starlightFullViewMode({ leftSidebarEnabled: false, rightSidebarEnabled: true})