✨ Premium Features

This page is a live showcase of every premium feature integrated into the Starlight FumaDocs theme. Use it as a reference or copy the snippets below into your own pages.

---

Breadcrumb Navigation

The breadcrumb trail at the top of every page is automatically generated from your sidebar hierarchy. Parent items are clickable links that navigate you to the first page in that section.

No configuration needed — it works out of the box.

---

Fullscreen Code Blocks

Hover over the code block below. A fullscreen toggle icon appears next to the copy button (only on blocks longer than 8 lines). Click it to:

• Read code in a distraction-free fullscreen overlay
• Use Zoom In / Zoom Out buttons to adjust the font size
• Press Esc or click outside to exit

api/fetchUser.ts

import type { NextApiRequest, NextApiResponse } from "next";

interface User {
  id: string;
  name: string;
  email: string;
  role: "admin" | "user" | "editor";
  metadata: {
    lastLogin: Date;
    preferences: Record<string, unknown>;
    sessions: { device: string; ip: string; createdAt: Date }[];
  };
}

interface ApiResponse<T> {
  data: T | null;
  error: string | null;
  status: number;
}

/**
 * Fetches a single user record by ID.
 * Includes full metadata and session history.
 */
export async function fetchUser(
  id: string,
  signal?: AbortSignal,
): Promise<ApiResponse<User>> {
  try {
    const response = await fetch(`/api/users/${id}`, { signal });
    if (!response.ok) {
      return {
        data: null,
        error: `HTTP ${response.status}`,
        status: response.status,
      };
    }
    const data: User = await response.json();
    return { data, error: null, status: 200 };
  } catch (err) {
    if (err instanceof DOMException && err.name === "AbortError") {
      return { data: null, error: "Request aborted", status: 0 };
    }
    return { data: null, error: String(err), status: 500 };
  }
}

---

D2 Diagrams

Write architecture diagrams directly in your Markdown using D2 syntax. Diagrams automatically switch between light and dark themes.

Usage

```d2
direction: right
A -> B: Hello
B -> C: World
```

---

Image Zoom

Click on the image below to open an accessible, medium-zoom lightbox. Press Esc or click the backdrop to close.

Images are automatically enhanced with rounded corners and a subtle theme-aware border. Add data-zoom-off to any image you want to exclude:

![No zoom on this one](/images/icon.png)

<!-- data-zoom-off -->

---

Inline PDF Viewer

Embed any PDF document directly into your documentation using the <PDF /> component. It shows a title bar with a download button and renders the document in an <iframe>.

import PDF from "starlight-fumadocs/components/PDF.astro";

<PDF
  src="/docs/specification.pdf"
  title="Project Specification v2.1"
  height="600px"
/>

Live example (using a public sample PDF):

Sample W3C PDF Document

Props

Prop	Type	Default	Description
src	string	—	Path or URL to the PDF file
title	string	"PDF Document"	Label shown in the header
height	string	"600px"	CSS height of the viewer

---

Copy Markdown

The “Copy Markdown” button in the page title area converts the entire current page’s HTML back to clean Markdown and copies it to your clipboard — including properly fenced code blocks with language tags.

This is powered by the Turndown library (loaded from CDN, no extra dependencies).