Blocks showcase

Callout

Heads up

An informational callout with a title and a short body line.

A warning callout without a title (renders the caution tone).

Pro tip

Tips render with the success tint.

Careful

Danger callouts use the destructive tint.

Table

Method .	Path .	Description .
GET .	/pets .	List all pets .
POST .	/pets/{petId} .	Create a pet .

Table with width, hidden, frozen, and align/valign extras (:::table-meta)

Endpoint	Description	Auth	Internal notes
/pets	List all pets	none	legacy alias
/pets/	Fetch a single pet	apiKey	cache 60s
/orders	List orders for a user	bearer	rate-limited

Table cards view (collapses to stacked cards under 50rem)

Table viewCard view

Plan	Price	Seats
Starter	$0	1
Team	$49	10

Tabs

Two independent groups share the same titles so same-title sync can be verified; sync="pkg" also deep-links via ?pkg=npm|pnpm.

• npm
• pnpm

Install via npm.

Install via pnpm.

• npm
• pnpm

Second group — npm panel (syncs by title with the group above).

Second group — pnpm panel.

A group whose author named NO sync key still gets shareable URL state: E13’s default key. The Code power set below is that group — one tab strip proving both features, because every strip on a page spends one of A5’s twelve accents.

Code block

export function greet(name: string): string {
  return `Hello, ${name}!`;
}

Titled code frame

src/greet.ts

import { greet } from './greet';

// The caption bar, the opt-in gutter and the rest-visible copy control (B7).
export const hello = greet('world');

Code power set

E5’s per-line metas, all resolved at BUILD time — no JavaScript runs to paint any of this. {1,4-6} beds the named lines, focus= dims everything else (hover restores it), diff moves the +/- out of the copyable text and into the gutter rail, and expandable clamps a long block to ten lines behind one zero-JS expander. This group names no sync key, so E13 assigns it the default tab one: ?tab=focus deep-links straight to the focus panel.

• Highlight
• Focus
• Diff
• Collapse

highlight.tscopy

1

2

3

4

5

const config = loadConfig();const client = createClient(config);// Only the lines the author named wear the signal-soft bed.await client.connect();await client.publish('docs');

tscopy

const noise = prepare();const more = noise.map(String);const answer = compute(noise);return answer;

diffcopy

1

2

3

 const client = createClient(config);await client.publishLegacy('docs');await client.publish('docs');

tscopy

1

2

3

4

5

6

7

8

9

10

11

12

13

const one = 1;
const two = 2;
const three = 3;
const four = 4;
const five = 5;
const six = 6;
const seven = 7;
const eight = 8;
const nine = 9;
const ten = 10;
const eleven = 11;
const twelve = 12;
const thirteen = 13;

Show 3 more linesShow less

Steps

Getting started

1. Install the CLI

   Run npm install -g doctorine.

2. Authenticate

   Run doctorine login.

3. Publish

   Run doctorine publish. A one-liner too long for the column takes the wrap fence meta, so it soft-wraps instead of hiding past the right edge — and a block that never scrolls never wears the scroll fade.

   bashcopy

   curl -X POST 'https://api.example.com/v1/pets?limit=25&sort=created_at&expand=owner,vet' -H 'Authorization: Bearer EXAMPLE_TOKEN_NOT_A_REAL_KEY' -d '{"name":"Ada","tag":"good-dog"}'

Accordion

What is Doctorine?

A Git-safe, OpenAPI-first developer-docs platform.

What is Doctorine?

The repeated title proves deterministic -2 hash deduplication.

Empty accordion body

Nested deep-link host

A deep link into a CLOSED accordion has to open every accordion above its target, or the reader follows a link to content they cannot see.

Nested deep-link target

Reached by #dt-accordion-nested-deep-link-target with the parent closed.

Cards

Quickstart

Get started fast.

Browse the API.

Columns

Left column content — a callout inside a column keeps its own radius and spacing.

Nested

Callouts nest cleanly inside columns.

Right column content, sized identically to the left track.

Prose primitives

A blockquote renders as .dt-md-quote.

A fourth-level heading

The type scale runs all the way to h4 (18/28/600) — this heading is what the type-scale gate measures, so the level cannot drift back to Starlight’s own scale unnoticed.

Inline marks

This endpoint is Beta.

The API keyUsed to authenticate requests field is required.

Strong wraps stable while codeA literal identifier keeps code as the leaf mark.

API operation embeds

A RESOLVED embed — the identity is in the build’s public operation projection, so the card carries the method badge, the path with its {param} chip, the summary and the parameter list (E3):

GET/pets/{petId}

Info for a specific pet

1 parameter

• petIdstringpathrequired

The same operation with expanded, so the parameters are open on first paint:

GET/pets/{petId}

Info for a specific pet

1 parameter

• petIdstringpathrequired

…and an UNRESOLVED one, which degrades to the inert identity chip. This is also exactly what an x-internal operation renders as, because the public projection does not contain it — the confidential case must look like an ordinary miss (machine-surface-leak.e2e.ts pins that degrade across every built artifact):

DELETE/internal/rotate-keysAPI operation: DELETE /internal/rotate-keys

Page links

Getting started→

Glossary

A resolved defined term:

Idempotency keyA client-supplied key that makes retrying a request safe: the same key returns the same result instead of repeating the work.

…and an unresolved one, which must render as plain text with no affordance:

Undefined term

An empty tooltip renders bare label with no wrapper at all.

Image dark variant

An ::image-figure with a darkSrc ships BOTH pictures and lets the stylesheet choose (E14) — the theme pill, not just the OS preference, decides which one is the picture. Both assets resolve through the shared /media/ route exactly like any other R2-keyed figure.

One diagram, drawn twice

A figure with no dark asset is untouched — one <img>, same bytes as always:

Request flow with no dark variant

Image zoom

A content image (click to zoom; opt out with data-no-zoom):

• An unordered list item

• Another item

  1. A nested ordered item
  2. Another nested item
• A checked task
• An unchecked task

---

The separator above renders as .dt-separator.dt-md-hr.

Responsive image (transformable)

A PNG figure resolves through /media/ and, being a width-transformable extension, carries a ?w= srcset ladder + sizes so the browser fetches a column-appropriate variant (L5). At 390 px the picked currentSrc carries a ?w= query.

Served with a ?w= srcset ladder

File download

A downloadable attachment renders as a card and opts OUT of hover-prefetch (data-astro-prefetch="false") so a mouseover never pulls the file itself (B16):

sample-photo.png12 KBDownload