DeveloperGuide
v1.0.7Updated 20 Oct 2026Long-form developer documentation page — a contents rail that follows the reading position, numbered steps, copyable code blocks, reference tables that stay readable on a phone, and note / warning / danger callouts. Full-page copy-paste template; baked-in demo content (edit the JSX to customise).
Preview
Live · 15 stories▸Why this is recommendeddocsdocumentationguidetutorial+6
The default, out-of-the-box DeveloperGuide.
- ✓A long developer guide people read top to bottom
- ✓Public product documentation with a sticky table of contents
- ✓A getting-started or how-to page with numbered steps and code samples
- ✓A handbook or onboarding page that needs callouts and reference tables
- Table of contents that follows the reading position and is fully keyboard operable (arrows, Home, End)
- Deep-linkable headings: stable ids, a copyable anchor per heading, focus moved to the heading itself
- Numbered steps as a real ordered list, each with its own copyable sample
- Code blocks whose copy control reports BOTH success and failure into one polite live region
- Reference tables that stay one semantic table and stack into label / value pairs on a phone
- Note / warning / danger callouts, published as notes rather than live alerts
- Filter across a long guide, narrowing the article and the contents rail together
- Page states: ready, loading, empty, error with retry, 403 and 404
- i18n: a labels prop overrides every built-in string; English defaults, brand-free copy
- Self-contained — no required props
- ✕An endpoint-by-endpoint API reference (use ApiReference)
- ✕A searchable support knowledge base (use HelpCenter)
- ✕A policy document with no code samples (use Legal)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
classNameOptional wrapper class override (copy-paste block, baked-in content)
—stateThe page experience to render. Defaults to ready. Accepted by DeveloperGuidePage and DeveloperGuideFullPage; the other variants are always ready.
—onRetryInvoked by the retry button in the error state
—labelsOverride every built-in string and aria-label (i18n). Merged over DEFAULT_DEVELOPER_GUIDE_LABELS (137 English keys); every template in the file accepts it, and the strings are passed down to the CodeBlock and the copy control too. The rendered DEFAULTS are English and brand-free. Sample code, token names and command names are demo DATA and deliberately not translatable.
—