Starlight Features Demo

Welcome to the Starlight features demo! This page showcases all the powerful MDX components and features available in Starlight. New

Callouts and Asides

Starlight provides various callout types to highlight important information:

Note

This is a note callout. Use it for supplementary information.

Pro Tip

You can add custom titles to any callout by using square brackets!

Caution

Be careful! This is a caution callout for warnings.

Critical Warning

This is a danger callout for critical warnings or errors.

Code Blocks

Basic Syntax Highlighting

app.js

// This is a JavaScript example
function greet(name) {
  const message = `Hello, ${name}!`;
  console.log(message);
  return message; // This line is highlighted as inserted
  // return null; // This line is highlighted as deleted
}

Multiple Languages

JavaScript

// Modern JavaScript
const fetchData = async (url) => {
  try {
    const response = await fetch(url);
    return await response.json();
  } catch (error) {
    console.error('Error:', error);
  }
};

TypeScript

// TypeScript with types
interface User {
  id: number;
  name: string;
  email: string;
}

const fetchData = async (url: string): Promise<User[]> => {
  try {
    const response = await fetch(url);
    return await response.json();
  } catch (error) {
    console.error('Error:', error);
    return [];
  }
};

Python

# Python example
import asyncio
import aiohttp

async def fetch_data(url: str) -> dict:
    async with aiohttp.ClientSession() as session:
        async with session.get(url) as response:
            return await response.json()

Line Numbers and Highlighting

#!/bin/bash
# Deploy script
npm run build
npm run test
npm run deploy
echo "Deployment complete!"

Component Cards

Feature One

Build fast with modern tools and frameworks.

Feature Two

Beautiful, accessible components out of the box.

Feature Three

Write content in MDX with full component support.

Feature Four

Highly customizable with minimal configuration.

Link Cards

Learn more about Starlight Explore the official Starlight documentation for advanced features.

File Tree Component

• Directorysrc/

  • Directorycomponents/

    • Header.astro
    • Footer.astro
    • Button.tsx (highlighted)
  • Directorycontent/

    • Directorydocs/

      • Directoryen/

        • getting-started.mdx
        • demo.mdx
      • Directorypl/

        • getting-started.mdx
        • demo.mdx
  • Directorypages/

    • index.astro
    • Directoryapi/

      • […slug].ts
• package.json
• astro.config.mjs
• README.md (optional)

Step-by-Step Guides

1. Install dependencies

   npm install @astrojs/starlight

2. Configure Astro Add Starlight to your astro.config.mjs:

   import starlight from '@astrojs/starlight';
   
   export default {
     integrations: [starlight({
       title: 'My Docs',
     })],
   };

3. Create content Add MDX files to src/content/en/

4. Deploy Build and deploy your documentation site

Tables

Feature	Description	Status
MDX Support	Write content with components	Stable
i18n	Multi-language support	Stable
Search	Built-in search functionality	Beta
Dark Mode	Automatic theme switching	Stable

Icons and Badges

Starlight includes many built-in icons:

GitHub Launch Favorite Documentation

And various badge styles:

Default Note Tip Caution Danger Success

Details/Summary (Collapsible Content)

Click to expand advanced configuration

// Advanced Starlight configuration
export default {
  integrations: [
    starlight({
      title: 'My Documentation',
      social: {
        github: 'https://github.com/yourusername/yourrepo',
        twitter: 'https://twitter.com/yourusername',
      },
      sidebar: [
        {
          label: 'Guides',
          autogenerate: { directory: 'guides' },
        },
        {
          label: 'Reference',
          autogenerate: { directory: 'reference' },
        },
      ],
      customCss: ['./src/styles/custom.css'],
    }),
  ],
};

Math Support (if enabled)

Starlight can support mathematical expressions when configured:

Inline math: $E = mc^2$

Block math:

$$
\frac{n!}{k!(n-k)!} = \binom{n}{k}
$$

Practical Developer Examples

API Response Schema

api-response.json

{
  "status": "success",
  "data": {
    "users": [
      {
        "id": 1,
        "name": "John Doe",
        "email": "john@example.com",
        "roles": ["admin", "developer"]
      }
    ],
    "pagination": {
      "page": 1,
      "limit": 10,
      "total": 100
    }
  },
  "timestamp": "2024-01-15T10:30:00Z"
}

Docker Configuration

Dockerfile

FROM node:18-alpine
WORKDIR /app
# Copy and install dependencies
COPY package*.json ./
RUN npm ci --only=production
COPY . .
EXPOSE 3000
CMD ["node", "server.js"]

Interactive Elements

Try it yourself!

All these components are interactive. Try clicking on tabs, expanding details, and hovering over badges!

Conclusion

This demo showcases the power and flexibility of Starlight’s MDX capabilities. You can create rich, interactive documentation that helps developers understand and use your projects effectively.

View Source See the MDX source for this demo page

Starlight Docs Learn more about all available features