Skip to content
Pele x

Get started with Starlight

This tutorial adds Pele x to an existing Starlight site. By the end you will have a built page that contains a static SVG diagram and no browser-side Pele JavaScript.

Install the package

Section titled “Install the package”
Terminal window
bun add starlight-pele pele

astro-pele and mdast-pele are installed automatically as dependencies of starlight-pele. You only need the two packages above.

Add the plugin

Section titled “Add the plugin”

Open astro.config.mjs and register the plugin:

import starlight from '@astrojs/starlight';
import { starlightPele } from 'starlight-pele';
import { defineConfig } from 'astro/config';


export default defineConfig({
  integrations: [
    starlight({
      title: 'My docs',
      plugins: [starlightPele()],
    }),
  ],
});

The plugin adds the Astro integration and its Starlight theme automatically.

Write your first diagram

Section titled “Write your first diagram”

Create or edit a docs page and add a fenced mermaid block:

```mermaid title="My first diagram"
flowchart LR
  Start --> Stop
```

The title="..." metadata adds a caption below the diagram.

Build the site

Section titled “Build the site”

Run the build:

Terminal window
bun run build

Open the built page. The fence has been replaced by an inline SVG styled with your Starlight theme.

Next steps

Section titled “Next steps”