A Swagger-style API documentation component set for Astro Starlight sites. Renders class, method, property, and type documentation with theme-aware syntax highlighting — all in the light DOM.

• Theme-aware highlighting — resolves syntax colors from your Starlight theme at build time
• Composable — mix and match components to document any API shape
• Light & dark mode — full support with appropriate badge and highlight colors
• Copy as JSON — built-in button to export class definitions as structured JSON
• Light DOM only — no Shadow DOM, no slots indirection, your CSS just works

npm install @gesslar/starlight-class-browser

No Astro integration to register, no config to add.

import * as CB from "@gesslar/starlight-class-browser";

<CB.ClassBrowser name="MyClass" type="class" source="src/my-class.ts">
  Description of the class goes here.

  <CB.ClassExtends name="BaseClass" source="src/base.ts" />

  <CB.ClassProperty name="count" label="field">
    <CB.ClassPropertyType type="number" />
  </CB.ClassProperty>

  <CB.ClassMethod name="greet">
    Says hello.

    <CB.ClassMethodInput name="name" type="string">
      Who to greet
    </CB.ClassMethodInput>
    <CB.ClassMethodOutput type="string">
      The greeting message
    </CB.ClassMethodOutput>
  </CB.ClassMethod>
</CB.ClassBrowser>

Syntax highlight colors are automatically resolved from your Starlight theme at build time. The component checks for:

1. Starlight theme plugins (starlight-theme-* packages)
2. Starlight's bundled Night Owl themes (the default)
3. CSS fallback colors if no theme can be loaded

No configuration needed.

Full documentation with interactive examples: starlight-class-browser.gesslar.dev

@gesslar/starlight-class-browser is released under the 0BSD.