Xtrap API
DocumentationNext.jsMDXView Case Study →

Goals

  • Eliminate the "stale PDF" problem with live docs
  • Reduce "How to" support tickets by improved searchability
  • Create a seamless "time to first Hello World" experience

Approach

We treated the documentation as a first-class product. Using Next.js (SSG) ensured speed and SEO, while MDX allowed us to mix Markdown content with interactive React components like live code snippets and API playgrounds.

  • Docs as Code: Version controlled alongside the codebase
  • Algolia Search: Instant, relevant search results
  • Interactive Snippets: Copy-paste ready examples

Performance & UX

Static generation meant instant page loads—crucial for developers jumping between reference pages. The layout was designed for readability with clear hierarchy, dark mode support for late-night coding sessions, and a table of contents that follows the user.

  • Instant page transitions
  • Accessible contrast and navigation
  • Optimized for multiple viewports
Tech Stack: Next.js, MDX, Algolia, TailwindCSS