Skip to content
My Docs
Blog

Blog

Interactive Images with Starlight Image Zoom

My Name
Content Creator

Documentation often contains diagrams and screenshots that can be hard to read at standard size. starlight-image-zoom addresses this by adding zoom capabilities to your images.

Features

Section titled “Features”
  • Click to Zoom: Lightbox-style zooming for images.
  • Configurable: Adjust background opacity and buttons.
  • Zero Config: Works out of the box for most Markdown images.

Installation

Section titled “Installation”
Terminal window
npm install starlight-image-zoom

Then add it to your Starlight config:

import starlightImageZoom from 'starlight-image-zoom';


// ...
plugins: [
  starlightImageZoom(),
],

Now, clicking on images in your content will open them in a zoomable view!

Keeping Links Healthy with Starlight Links Validator

My Name
Content Creator

Broken links are the bane of good documentation. The starlight-links-validator plugin helps you catch them before your users do.

What it does

Section titled “What it does”

This plugin checks internal links in your Starlight project during the build process. It ensures:

  • Links verify against existing files.
  • Anchors (hashes) exist on the target page.

Setup

Section titled “Setup”
Terminal window
npm install starlight-links-validator

Add it to your configuration:

import starlightLinksValidator from 'starlight-links-validator';


// ...
plugins: [
  starlightLinksValidator(),
],

Now, when you run astro build, the plugin will report any dead internal links, helping you maintain a high-quality knowledge base.

Showcasing APIs with Starlight OpenAPI

My Name
Content Creator

For REST APIs, an OpenAPI (Swagger) specification is the gold standard. starlight-openapi allows you to render these specifications directly within your Starlight documentation site.

Features

Section titled “Features”
  • Schema Rendering: Beautifully formatted API endpoints and models.
  • Sidebar Integration: Adds API categories to your navigation.
  • Multiple Schemas: Support for documenting multiple APIs.

How to use

Section titled “How to use”
  1. Have your openapi.json or openapi.yaml ready.
  2. Install the plugin:
Terminal window
npm install starlight-openapi
  1. Configure it:
import starlightOpenAPI from 'starlight-openapi';


// ...
plugins: [
  starlightOpenAPI([
    {
      base: 'api',
      label: 'My API',
      schema: './src/openapi.yaml',
    },
  ]),
],

Your API documentation will now be accessible under /api!

Supercharge Starlight with Starlight Utils

My Name
Content Creator

starlight-utils is a Swiss Army knife collection of components and utilities to enhance your documentation pages with common UI patterns.

Included Components

Section titled “Included Components”

It bundles several useful components that you would otherwise have to build yourself:

  • Card Grids with Icons: Enhanced display options.
  • Link Cards: Better visual links to other pages.
  • Timeline: Visual representation of chronological events.
  • Code Group: Group related code blocks (e.g., for different package managers).

Getting Started

Section titled “Getting Started”
Terminal window
npm install @lorenzolewis/starlight-utils

Usage in MDX:

import { Timeline, TimelineItem } from '@lorenzolewis/starlight-utils';


<Timeline>
  <TimelineItem date="2024-01-01" title="Launched">
    We released version 1.0!
  </TimelineItem>
  <TimelineItem date="2024-02-01" title="Update">
    Added more features.
  </TimelineItem>
</Timeline>

It’s a great way to add visual variety to your docs without heavy custom development.

Visualizing Content with Starlight Site Graph

My Name
Content Creator

Ever wondered how your documentation pages connect to each other? starlight-site-graph generates an interactive graph of your site’s internal links.

What it shows

Section titled “What it shows”
  • Nodes: Each page is a node in the graph.
  • Edges: Internal links connect the nodes.
  • Clusters: See which topics are heavily cross-referenced.

Integration

Section titled “Integration”
Terminal window
npm install starlight-site-graph

Add it to your plugins list. It typically adds a new page or component where you can view the graph.

import starlightSiteGraph from 'starlight-site-graph';


// ...
plugins: [
  starlightSiteGraph(),
],

This is fantastic for identifying isolated pages (orphans) or visualizing the “knowledge web” of your documentation.