Starlight Has a Free Documentation Framework — Here's How to Use It

#documentation #astro #devtools #webdev

Docusaurus is heavy. GitBook costs money. VitePress is Vue-only. Starlight by Astro is fast, beautiful, and works with React, Vue, Svelte — or none of them.

What Is Starlight?

Starlight is a full-featured documentation framework built on Astro. It gives you a complete docs site out of the box — sidebar, search, i18n, dark mode — just add Markdown.

Quick Start

npm create astro@latest -- --template starlight

---
# src/content/docs/getting-started.md
title: Getting Started
description: How to get started with our product.
---

## Installation

Install the package:

\`\`\`bash
npm install my-package
\`\`\`

## Usage

Import and use it:

\`\`\`typescript
import { myFunction } from 'my-package';
myFunction();
\`\`\`

That's it — a fully-featured docs site from Markdown files.

Built-In Features (Zero Config)

Full-text search (Pagefind)
Dark/light mode toggle
Sidebar navigation (auto-generated from files)
Mobile responsive
SEO optimized
Breadcrumbs
Edit on GitHub link
Table of contents
i18n (20+ languages)

Configuration

// astro.config.mjs
import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';

export default defineConfig({
  integrations: [
    starlight({
      title: 'My Docs',
      social: { github: 'https://github.com/...' },
      sidebar: [
        {
          label: 'Guides',
          items: [
            { label: 'Getting Started', slug: 'guides/getting-started' },
            { label: 'Configuration', slug: 'guides/configuration' },
          ],
        },
        {
          label: 'API Reference',
          autogenerate: { directory: 'reference' },
        },
      ],
      locales: {
        root: { label: 'English', lang: 'en' },
        ru: { label: 'Русский', lang: 'ru' },
      },
    }),
  ],
});

Custom Components

Use React, Vue, Svelte, or Solid in your docs:

---
title: Interactive Demo
---
import { Counter } from '../../components/Counter';

## Try It Out

<Counter client:load />

Why Starlight

Feature	Starlight	Docusaurus	VitePress
Build speed	Fast (Astro)	Slow (webpack)	Fast (Vite)
Framework	Any/None	React	Vue
Search	Built-in (Pagefind)	Algolia needed	Built-in
i18n	Built-in	Built-in	Plugin
Bundle size	Minimal	Heavy	Light
Content	Markdown/MDX	MDX	Markdown