Introduction

Why DocuBook Exists

For years, I worked on documentation projects where the biggest effort was not writing content, but getting the theme and styling right. Most of the time was eaten by configuring CMS plugins and tweaking layouts instead of focusing on the actual documentation.

That frustration inspired me to build a docs framework from the ground up in the React ecosystem—one that keeps the writing experience front and center. DocuBook is designed to let you focus on content while giving you a flexible, developer-friendly foundation that’s also open source.

Open Source Philosophy

DocuBook is proudly open-source! 🎉 We believe in creating an accessible, collaborative platform that thrives on community contributions.

Project Overview

DocuBook is more than just a documentation template. It's a complete ecosystem designed for modern React development. Key features include:

• Markdown & MDX Support: Easily write documentation in Markdown, with the option to include interactive components via MDX.
• Customizable Themes: Designed with a minimalist ShadCN-inspired theme that's easy to style.
• SEO-Optimized: Each page is SEO-ready, ensuring search engines can find and rank your content.
• Interactive Code Blocks: Beautifully styled, language-specific code blocks for an enhanced reading experience.
• Prebuilt Navigation Tree: Intelligent caching system that prebuilds navigation structure for optimal performance.
• CLI Tools: Command-line utilities for scaffolding and managing documentation projects.
• Multi-Framework Support: Templates for different React frameworks and deployment strategies.

Key Features

Technology & Libraries

DocuBook leverages cutting-edge technologies to ensure performance and flexibility:

UI & Styling

• Tailwind CSS 4 - Utility-first styling for quick, clean designs
• Shadcn-UI - Elegant, accessible components for a polished look
• Radix UI - Unstyled, accessible UI primitives

Content & Search

• next-mdx-remote - Enables MDX support for dynamic, interactive Markdown content
• Algolia DocSearch - Powerful search functionality with instant results
• @docubook/docs-tree - CLI tool for prebuilding navigation structures
  • Purpose: Prebuild navigation tree for optimal performance
  • Features: Intelligent caching, multi-package manager support
  • Benefits: Faster builds, reduced runtime computation
  • Usage: Automatic prebuild in production deployments

Development Tools

• TypeScript - Type-safe development experience
• ESLint - Code linting and formatting
• Turbo - High-performance build system for monorepos

Available Templates

DocuBook provides multiple deployment-ready templates for different use cases:

🚀 Next.js Templates

Next.js + Vercel (nextjs-vercel)

• Best for: Server-side rendering, static site generation
• Deployment: Optimized for Vercel platform
• Features: Edge functions, ISR, API routes
• Use case: Production apps requiring SEO and performance

Next.js + Docker (nextjs-docker)

• Best for: Containerized deployments
• Deployment: Standalone Docker images
• Features: Self-contained, cloud-agnostic
• Use case: Enterprise deployments, custom infrastructure

⚡ React Router Template

React Router + Vite (react-router) - coming soon

• Best for: Client-side applications, SPAs
• Deployment: Static hosting (Netlify, GitHub Pages, etc.)
• Features: Fast development, modern React patterns
• Use case: Developer portals, lightweight documentation

All templates include:

• ✅ Pre-configured build scripts
• ✅ Development and production optimizations
• ✅ SEO-ready configuration
• ✅ Modern React patterns and best practices

MDX Processing Comparison (Before vs After Optimization)

To make the docs runtime more efficient, DocuBook now separates metadata reading from full MDX compilation and deduplicates repeated calls in the same request.

request page
  ↓
generateMetadata()
  ↓
getDocsForSlug()
  ↓
read mdx file
  ↓
parse frontmatter
  ↓
compile MDX

DocsPage()
  ↓
getDocsForSlug()  (called again)
  ↓
compile MDX again

getDocsTocs()
  ↓
read mdx file again
  ↓
parse headings

request page
  ↓
generateMetadata()
  ↓
getDocsFrontmatterForSlug()
  ↓
getDocsRawForSlugCached()
  ↓
read mdx file + parse frontmatter + extract TOC

DocsPage()
  ↓
getDocsForSlug()
  ↓
computeDocsForSlugCached()
  ↓
reuse getDocsRawForSlugCached() data
  ↓
compile MDX once

getDocsTocs()
  ↓
reuse getDocsRawForSlugCached() result
  ↓
no extra file read

Quick Metrics (Per Request)

Note: The current optimization uses two cache layers! so metadata, page content, and TOC all share the same raw MDX processing in one request.

Practical Impact

• Less CPU work for metadata generation (no unnecessary MDX compile).
• No repeated file-system reads during a single docs page render.
• Better performance consistency for docs routes under load.
• Cleaner separation of concerns between metadata and full content rendering.

DocuBook transforms documentation from a simple template into a professional development platform that scales with your project's needs. 🎯