Page metadata: title, description, icon, and labels.
Frontmatter is the YAML block at the top of a spec page. It sets the page title, description, sidebar icon, and optional labels. It must be the first block in the file, wrapped in ---.
Available keys
| Key | Type | Example | Effect |
|---|---|---|---|
title | string | title: "API Basics" | Title in header and sidebar |
description | string | description: "How to call the API." | Subtitle and search summary |
icon | string | icon: BookOpen | Icon near the title |
label | string | label: pro | Badge text near the title |
label_color | string | label_color: orange | Badge color |
label_description | string | label_description: "Pro plan" | Badge tooltip |
Full example
---
title: 'API Basics'
description: 'How to call the API safely and consistently.'
icon: BookOpen
label: pro
label_color: orange
label_description: 'Available for Pro Plan users'
---Icons
Icons accept a name (for example BookOpen) or an Iconify-style id (for example lucide:book-open). The icon appears next to the page title in the sidebar and header.
Labels can be global
A label can resolve to a globally defined label (text, color, and
description) declared in the root specs/meta.yaml, so badges stay consistent
across pages.
Plan labels in page content
Use the <PlanLabel /> component to place a badge inside the document body (not only in frontmatter). Insert it from the editor toolbar (Plan label) or write MDX directly.
This API is available on <PlanLabel name="pro" /> plans.
<PlanLabel name="ent" variant="block" title="Enterprise">
Self-hosted deployments use repository branches instead of cloud branches.
</PlanLabel>| Prop | Example | Effect |
|---|---|---|
name | name="pro" | Key from root specs/meta.yaml → labels |
text | text="Beta" | Custom badge text (no global definition) |
color | color="blue" | Badge color override |
description | description="…" | Tooltip on hover |
variant | variant="block" | Bordered box; optional title and child content |
Editing via the toolbar
Open the page in edit mode
Switch the page to the editor.
Open Edit Page Properties
In the editor toolbar, open the Edit Page Properties dialog.
Update metadata
Edit description, icon, and additional fields like label, label_color, label_description.
Save and verify
The page title is also editable from the title input in the editor header.
The dialog manages description, icon, and additional frontmatter fields.
Keep description short and meaningful — it doubles as the search summary.
For the underlying syntax, see Code and
Frontmatter.
Last updated on