CreatorWebsiteAvailable

Documentation portal

Documentation site for a developer product: Markdown content with a typed navigation tree, build-time search index and syntax highlighting, keyboard search, code copy, callouts, TOC with scroll-spy, v1/v2 switcher, light/dark theme and a mobile drawer. Prerendered React + TypeScript.

Get Creator

Creator ($9 a month) includes up to 20 new premium families a billing month (5 in any 24 hours). Already a member? Open your library.

Version: 1.0.0
Platforms: Website
Framework: vite-react
Archive: 2.5 MB 186 files

Screens from the build

Documentation portal: Guide cron, 1600 px wide — Guide cron, 1600 px wide

Documentation portal: Home, 1600 px wide — Home, 1600 px wide

Documentation portal: Quickstart, 1600 px wide — Quickstart, 1600 px wide

Documentation portal: Reference schedule, 1600 px wide — Reference schedule, 1600 px wide

Documentation portal: V1 retries, 1600 px wide — V1 retries, 1600 px wide

Documentation portal: Dark guide cron, 1280 px wide — Dark guide cron, 1280 px wide

What it does

navigate a nested documentation tree
search docs by keyboard with a build-time index
read articles with highlighted, copyable code
follow previous/next and on-page contents
switch documentation versions without losing your place
choose light, dark or system theme
author pages in Markdown with build-time validation

Routes and screens

homeCurrent-version docs home: intro, tabbed install, entry points, status and changes
version-homeLegacy version home with banner
articleArticle template (27 sample pages across v2 and v1)
searchSearch dialog opened with / or Ctrl/Cmd+K on every page
not-foundHTTP 404 page with next steps

States covered

Loading
Error
No results
Empty query
Not found
Version fallback
Copy failed
Reduced motion
Dark mode
No javascript

Stack and versions

vite	`8.3.1`
react	`19.3.0`
react-dom	`19.3.0`
react-router	`7.18.4`
typescript	`6.0.3`
marked	`18.0.14`
shiki	`4.0.2`
vitest	`4.1.11`
@playwright/test	`1.56.0`
@axe-core/playwright	`4.13.0`

Commands:

install	`npm ci`
dev	`npm run dev`
test	`npm test`
typecheck	`npm run typecheck`
build	`npm run build`
preview	`npm run preview`
e2e	`npm run e2e`
budget	`npm run budget`

Tested

Check	Platform	Tool	Result	Date
unit + component tests (36): pipeline, tree, search ranking, UI	Node	vitest 4.1.11 + Testing Library (jsdom)	Pass	2026-09-26
e2e: 29 pages + 404 at 360 and 1280 px, keyboard paths, drawer, search, copy, versions, theme, TOC, reduced motion, no-JS	Website	Playwright 1.56.0, Chromium (headless)	Pass	2026-09-26
axe WCAG 2.2 AA tags on every page at 360 and 1280 px plus 5 pages in dark mode: 0 violations	Website	@axe-core/playwright 4.13.0	Pass	2026-09-26
critical-path budget (article page, gzip): <= 250 KB	Website	scripts/budget.mjs	Pass	2026-09-26
lab LCP (article, 360px, 4x CPU throttle, local server) < 2.0 s	Website	Playwright + PerformanceObserver	Pass	2026-09-26
fresh-copy reproduction from packaged zip: npm ci, build, test, e2e	Node	npm 10.9 / Node 22.22	Pass	2026-09-26
Firefox and Safari	Website	not run	PendingNot run yet	—

1 check still pending. Pending means it hasn't been run yet, not that it passed.

Not included

Search is a client-side prebuilt index; no hosted search service
No analytics, feedback widget or telemetry
No authentication: every built page is public
API reference is hand-written Markdown; no generator is wired in

Each boundary comes with instructions for adding it in docs/INTEGRATION-BOUNDARIES.md.

Known limitations

All documentation content describes a fictional library and is labelled as sample content
Markdown is trusted build-time input (raw HTML passes through); add sanitising if contributors are untrusted
Client-side search suits hundreds of pages, not tens of thousands
Automated tests ran in Chromium only; Firefox and Safari are untested
LCP was measured in a lab (local server), not in the field

Licence

Use in unlimited end products incl. client/commercial; no resale/redistribution as a template, kit or dataset; no ML training. Survives cancellation for delivered versions.

Full terms: Motif template licence. Open-source parts keep their own licences (licenses.json, id lic-premium-documentation-1-0-0).

Ask your agent

Use Motif to activate the premium-documentation template and download it. Then adapt it for a neighbourhood bakery: replace the content and imagery, keep the design tokens and every state in docs/STATE-MATRIX.md, and run check_design_contract before you finish.

Motif guides applied

web-docs-home-and-reference-layout · sys-case-stripe-docs-as-product-surface · sys-content-code-separation-for-authored-surfaces · web-nav-index-rails-and-scrollspy · web-long-document-page-layout · saas-command-palette · saas-keyboard-shortcuts · sys-combobox-implementation-contract · sys-tabs-activation-and-disclosure-accordion · web-developer-code-sections-install-api · web-cta-copyable-command · motion-micro-interactions-feedback · sys-toast-alert-and-live-region-rules · saas-empty-states-that-teach · saas-error-permission-and-degraded-states · motion-loading-skeleton-states · web-dark-mode-implementation · sys-theming-mode-and-theme-as-independent-axes · web-semantic-color-tokens · web-contrast-wcag-and-apca · saas-accessible-modal-dialogs-and-focus · web-nav-menu-overlay-choreography · web-mobile-navigation · web-focus-indicators-and-keyboard · sys-per-component-accessibility-contracts · web-not-found-page · web-font-loading-without-shift · web-lcp-optimization · web-cls-prevention · motion-reduced-motion-strategy · motion-duration-easing-scale · web-anti-generic-ai-look