Skip to main content
WhatDoc offers a curated collection of documentation templates inspired by the world’s best developer documentation sites. Each template is optimized for readability, accessibility, and aesthetic appeal.

​
Available Templates

​
API-First Templates

Style: API-first layout with sidebar navigation and syntax-highlighted code blocks
Best for: REST APIs, webhook documentation, developer SDKs
Inspired by: Twilio DocsFeatures:
  • Clean, distraction-free reading experience
  • Left sidebar with collapsible navigation
  • Prominent code examples with multi-language support
Style: Split-pane design with white prose on the left, dark code snippets on the right
Best for: Payment APIs, financial services, transactional systems
Inspired by: Stripe API DocsFeatures:
  • Sticky code examples that follow scrolling
  • Dark slate background for code pane
  • Emphasis on request/response clarity

​
Reference & Learning Templates

Style: Classic two-column documentation with table of contents
Best for: Framework documentation, guides, tutorials
Inspired by: Django DocumentationFeatures:
  • Serif fonts for long-form reading
  • Right-aligned table of contents
  • Green accent colors
Style: Reference-style with generous whitespace and breadcrumb navigation
Best for: Technical references, language specs, browser APIs
Inspired by: MDN Web DocsFeatures:
  • Excellent information hierarchy
  • Syntax highlighting with copy buttons
  • Accessibility-first design
Style: Academic premium template with glassmorphic header and serif-sans pairing
Best for: Research projects, academic papers, technical specificationsFeatures:
  • Paper-white background with dark IDE code blocks
  • Floating glass header
  • Professional typography (serif for headings, sans for body)

​
Modern & Minimalist Templates

Style: Ultra-dark mode with minimalist borders and glowing accents
Best for: Developer tools, CLIs, internal tools
Inspired by: Linear DocsFeatures:
  • Pure black background (#000)
  • Neon accent colors
  • Minimal chrome, maximum content
Style: Brutalist black and white with heavy typography
Best for: Modern SaaS products, design tools, no-nonsense documentation
Inspired by: Vercel DocsFeatures:
  • Zero gradients, zero decorations
  • Bold, confident typography
  • Extremely fast load times
Style: Emerald greens, sleek typography, circular buttons
Best for: Open source projects, community-driven tools
Inspired by: Supabase DocsFeatures:
  • Vibrant emerald accent color (#10b981)
  • Friendly, approachable tone
  • Optimized for GitHub-centric workflows

​
Specialized Templates

Style: Fluid width, elegant fonts, document-focused layout
Best for: Internal wikis, knowledge bases, collaborative docs
Inspired by: NotionFeatures:
  • Centered, max-width content
  • Serif headings
  • Inline comments and reactions (coming soon)
Style: Dense left sidebar with sticky nav and interactive preview boxes
Best for: UI libraries, component documentation, design systems
Inspired by: Tailwind CSS DocsFeatures:
  • Searchable component index
  • Live code previews
  • Copy-paste code snippets
Style: Frosted glass, large typography, soft rounded corners
Best for: Consumer apps, hardware APIs, IoT devices
Inspired by: Apple Developer DocsFeatures:
  • Premium aesthetic with glassmorphism
  • Generous padding and spacing
  • Focus on visual hierarchy
Style: Dark navy backgrounds with starlight accents and glowing borders
Best for: Space tech, astronomy APIs, dark-themed productsFeatures:
  • Deep blue (#020510) base color
  • Cyan accent highlights (#22d3ee)
  • Subtle glow effects
Style: Neon cyan/magenta accents, angled borders, futuristic layout
Best for: Blockchain projects, NFT platforms, gaming APIsFeatures:
  • Bold neon colors (#d946ef magenta)
  • Sharp, angular design elements
  • High-energy aesthetic
Style: Highly structured with version dropdowns and callout blocks
Best for: Enterprise software, B2B SaaS, complex systems
Inspired by: AWS DocumentationFeatures:
  • Multi-version support
  • Structured navigation
  • PDF export capability (coming soon)

​
Template Configuration

All templates are defined in client/src/config/templates.js: 
export const DOC_TEMPLATES = [
  {
    id: 'twilio',
    name: 'Twilio',
    description: 'API-first layout inspired by Twilio\'s clean developer docs.',
    previewUrl: 'https://placehold.co/600x400/111/fff?text=Twilio+Style',
  },
  // ... 13 more templates
];

​
Switching Templates

You can change templates at any time from the Live Editor:
  1. Open your project in the editor
  2. Click the Settings panel toggle
  3. Select a new template from the dropdown
  4. Click Save & Deploy — changes are live instantly
Templates are pure CSS transformations applied to your markdown. Switching templates does not regenerate your documentation.

​
Template Rendering

Each template is a React component that receives the project data: 
import TwilioTemplate from '../templates/TwilioTemplate';
import FintechTemplate from '../templates/FintechTemplate';
// ... other imports

const TemplateMap = {
    twilio: TwilioTemplate,
    fintech: FintechTemplate,
    mdn: MDNTemplate,
    // ... 11 more mappings
};

const PreviewTemplate = TemplateMap[template] || TemplateMap.modern;

return <PreviewTemplate project={previewProject} />;

​
Customization Options

All templates support the following customizations:
OptionDescriptionExample
Logo URLCustom logo displayed in headerhttps://example.com/logo.svg
Owner NameOrganization or author nameAcme Inc.
Current VersionActive version badgev2.1.0
Upcoming VersionRoadmap version badgev3.0.0
Navigation LinksCustom header links[{ label: "GitHub", url: "..." }]
Customization fields are configured in the Project Settings page.

​
Responsive Design

All templates are fully responsive and optimized for:
  • Desktop (1920px+)
  • Laptop (1366px - 1920px)
  • Tablet (768px - 1366px)
  • Mobile (320px - 768px)
Some templates (like Fintech’s split-pane layout) collapse to single-column on mobile for better readability.

​
Adding New Templates

To create a custom template:
  1. Add an entry to client/src/config/templates.js
  2. Create the component in client/src/templates/YourTemplate.jsx
  3. Register it in the TemplateMap inside DocViewer.jsx
  4. Add the id to the Mongoose enum in server/models/Project.js
template: { 
  type: String, 
  enum: ['modern', 'minimal', 'twilio', /* ... */, 'your-template'], 
  default: 'twilio' 
}

​
Template Performance

All templates are optimized for Lighthouse scores:
  • Performance: 95+
  • Accessibility: 100
  • Best Practices: 100
  • SEO: 100

​
Next Steps

Live Editor

Customize your documentation with the visual editor

Custom Domains

Host your docs on your own domain

Build docs developers (and LLMs) love

Get started for freeTalk to us