Rich Content Primitives

Rich technical documentation without MDX or JSX.
Most documentation UI should not require switching from standard Markdown to JSX frameworks.

Docboot provides expressive, accessible primitives via standard Markdown directives (:::directive) that compile ahead of time into portable HTML with progressive enhancement.

1. Before / After Comparison (:::compare) #

Compare two screenshots or visual states with an accessible interactive slider:

Modern Docboot

Legacy Architecture

Features: #

• Responsive & Accessible: Works with mouse drag, touch swipes, and keyboard controls (Arrow keys).
• Zero JS Fallback: Shows clean side-by-side or stacked images if JavaScript is disabled.
• Image Pipeline Integrated: Optimizes images, generates responsive WebP/AVIF variants, and integrates with the lightbox zoom viewer.

Syntax:

:::compare
before: ./images/legacy-ui.png
after: ./images/modern-ui.png
beforeLabel: Before v2
afterLabel: After v2
beforeAlt: Legacy interface screenshot
afterAlt: Modern interface screenshot
:::

2. Steps Walkthrough (:::steps) #

Structure sequential tutorials, setup guides, and onboarding walkthroughs:

Syntax:

:::steps
::step Install dependencies
Run npm install in your terminal.
::

::step Configure your site
Create docboot.config.js.
::
:::

3. Directory File Trees (:::tree) #

Display structured project folders and file layouts with semantic icons:

Syntax:

:::tree
- package.json
- docboot.config.js
- src/
  - index.js
  - compiler/
    - builder.js
- docs/
  - guide/
    - introduction.md
:::

4. Interactive Terminal Sessions (:::terminal) #

Show realistic terminal command sessions with window chrome, status markers, and smart command-only copy:

Features: #

• macOS terminal title bar and status markers (✓, ⚠, ✕, $, >).
• Smart Copy button copies only executable commands (stripping $ and command outputs).

Syntax:

:::terminal title="Terminal — zsh"
$ npm test
✓ 106 tests passed (0 errors)
:::

5. Status & Version Badges #

Communicate API lifecycle states, stability, and release milestones inline or in headings:

• Stable: STABLE
• Beta: BETA
• Experimental: EXPERIMENTAL
• Deprecated: DEPRECATED
• Planned: PLANNED
• Introduced in: v2.4.0

Syntax:

API Status: :::badge stable
Added in: :::since 2.4.0
Experimental feature: :::badge experimental

6. Deprecated Notice (:::deprecated) #

Display clear deprecation warnings with version info and recommended migration paths:

Syntax:

:::deprecated since="2.0.0"
Use `newFunction()` instead of `oldFunction()`.
:::

7. Carousel Walkthrough (:::carousel) #

Guide readers through multi-step screenshots or product tours:

1. Write clean Markdown with standard directives

2. Build production assets with zero configuration

3. Deploy instantly to GitHub Pages, Netlify, or Vercel

1 / 3

Syntax:

:::carousel
- src: ./images/step-1.png
  alt: Step 1 screenshot
  caption: 1. Configure settings

- src: ./images/step-2.png
  alt: Step 2 screenshot
  caption: 2. Review results
:::

8. Download Cards (:::download) #

Provide direct download links with automatic file extension detection and size formatting:

Syntax:

:::download
file: ./assets/release.zip
title: Offline Documentation Bundle
description: Complete standalone static archive for offline environments.
version: v2.4.0
:::

9. Build-Time QR Codes (:::qr) #

Generate pure SVG QR codes ahead-of-time during build for mobile device pairing, PWA installation, or quick reference:

Syntax:

:::qr https://example.com/mobile-demo
title: Scan to test on real device
size: 160
:::

10. Collapsible Long Code Blocks #

Prevent long configuration files or code snippets from dominating the reading experience:

{
  "name": "docboot-project",
  "version": "1.0.0",
  "description": "High performance technical documentation",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "dev": "docboot dev",
    "build": "docboot build",
    "doctor": "docboot doctor",
    "stats": "docboot stats"
  },
  "dependencies": {
    "docboot": "^2.4.0"
  },
  "devDependencies": {
    "postcss": "^8.4.0"
  },
  "keywords": [
    "documentation",
    "static-site-generator",
    "zero-config",
    "tailwind",
    "markdown"
  ],
  "author": "Docboot Team",
  "license": "MIT"
}

Syntax:

```json collapse collapsedLines="12"
{ ... long content ... }
```

11. Accessible Callouts #

12. Footnotes #

Add bibliographic references and clarifying notes using standard CommonMark footnote syntax^[1].

Syntax:

Here is a claim<sup class="docboot-footnote-ref" id="fnref-note"><a href="#fn-note" class="text-accent hover:underline font-mono text-[11px] font-bold px-0.5" aria-describedby="footnotes-label">[2]</a></sup>.

13. Synchronized Package Manager Tabs #

npm install docboot

pnpm add docboot

yarn add docboot

bun add docboot

14. API Endpoints (:::endpoint) #

Document REST, GraphQL, or WebSocket endpoints with color-coded HTTP method badges, highlighted path parameters, auth requirement tags, status tags, and a copy button:

{
"id": "usr_94819a82",
"name": "Alex Smith",
"role": "admin"
}

:::

Syntax:

:::endpoint GET /api/v1/users/:id auth="Bearer" status="200 OK"
Description or overview of the endpoint.

:::params
- name: id
  type: string
  required: true
  description: User ID
:::

:::response 200 OK
```json
{ "id": "usr_123" }
```
:::
:::

15. Request & Response Blocks (:::request / :::response) #

Document HTTP payloads, request parameters, and response status codes (2xx emerald, 3xx cyan, 4xx amber, 5xx rose):

{
"title": "Docboot v3",
"visibility": "public"
}

{
"id": "prj_884920",
"title": "Docboot v3",
"createdAt": "2026-09-02T12:00:00Z"
}

Syntax:

:::request POST /api/v1/projects
```json
{ "title": "New Project" }
```
:::

:::response 201 Created
```json
{ "id": "prj_123" }
```
:::

16. Parameter Specifications (:::params) #

Render clean, responsive parameter lists without manually writing tedious Markdown tables:

Syntax:

:::params Query Parameters
- name: limit
  type: integer
  default: 20
  required: false
  description: Items per page
- name: sort
  type: string
  enum: [asc, desc]
  description: Sort order
:::

17. Properties, Environment Variables & Config Options #

Document individual schema properties, environment variables ($_ terminal badge), and configuration keys with copy buttons:

18. Feature & Overview Cards (:::cards & :::card) #

Build interactive card grids with hover elevation, icons, badges, and clickable destination links for overview and landing pages:

Syntax:

:::cards cols="2"
::card Zero Config href="/guide/getting-started" icon="zap" badge="Instant"
Instant setup with smart defaults.
::
::card Local Search href="/guide/search" icon="search"
Pre-indexed client search engine.
::
:::

19. Metric & Stat KPI Cards (:::metrics) #

Display high-impact benchmarks, performance milestones, and system metrics with trend indicators:

Syntax:

:::metrics cols="3"
::metric 84ms Build time trend="-40%"
Fast compilation speed.
::metric 7.2KB Client JS
Minimal bundle footprint.
::metric 100% Lighthouse trend="+15%"
Top tier audit score.
:::

20. Landing Page Hero Banner (:::hero) #

Create beautiful hero banners with subtle mesh gradients, badges, heading, tagline, and call-to-action buttons:

Syntax:

:::hero
badge: Version 2.4 Released
title: Next-Gen Documentation SSG
tagline: Zero-config technical documentation compiler for modern engineering teams.
primaryText: Get Started
primaryLink: /guide/getting-started
secondaryText: GitHub
secondaryLink: https://github.com/litepacks/docboot
:::

21. Feature Highlights Grid (:::features) #

Highlight product capabilities and core architectural strengths:

Syntax:

:::features cols="3"
::feature Instant Build icon="zap"
Fast compilation pipeline.
::
::feature Automated Accessibility icon="shield"
WCAG 2.2 AA diagnostics.
::
:::

22. Compatibility Matrix (:::compat) #

Display browser and runtime support grids with platform logos and version pills:

Syntax:

:::compat Browser & Runtime Support
Chrome: 120+
Firefox: 121+
Safari: 17+
Edge: 120+
Node.js: 18+
Deno: 1.38+
Bun: 1.0+
:::

23. Keyboard Shortcuts (:::shortcut & :::shortcuts) #

Render realistic 3D keycaps for command palette and navigation shortcuts:

Syntax:

:::shortcuts
- action: Quick Search
  mac: Cmd + K
  windows: Ctrl + K
- action: Toggle Theme
  mac: Cmd + D
  windows: Ctrl + D
:::

24. Live Component Preview (:::preview) #

Render live interactive UI components alongside their source code:

<button class="px-4 py-2 bg-emerald-600 text-white rounded-lg font-medium text-sm">Primary Action</button>
<button class="px-4 py-2 bg-muted text-foreground border border-border rounded-lg font-medium text-sm">Secondary</button>

25. Release Notes & Changelogs (:::changelog) #

Structure release updates with categorized change tags (Added, Changed, Fixed, Removed):

Syntax:

:::changelog v2.4.0 date="2026-09-02" title="Release Name"
::added
- New feature A
- New feature B
::fixed
- Bug fix C
::
:::

26. Testimonial & Social Proof (:::quote) #

Present social proof, user endorsements, and architectural quotes:

Syntax:

:::quote author="Author Name" title="Role at Company" avatar="https://..." url="https://..."
Endorsement quote text.
:::

27. Chronological Timeline & Roadmaps (:::timeline) #

Document releases, migration phases, or architectural roadmaps with styled timeline nodes:

Syntax:

:::timeline Product Roadmap
::item 2026 Q3 — Zero-Config Engine
Instant startup and automatic routing.
::item 2026 Q4 — Rich Documentation Directives
Complete interactive component suite.
:::

28. FAQ & Accordions (:::faq & :::accordion) #

Render accessible, collapsible Q&A accordions with automatic Schema.org FAQPage microdata:

Syntax:

:::faq Frequently Asked Questions
::q How fast is Docboot?
It compiles hundreds of pages in under 100 milliseconds.
::q Does it support dark mode?
Yes, with seamless system auto-detection and persistence.
:::

29. Pricing Plans & Tier Comparison (:::pricing) #

Compare edition features and plans with glowing popular highlights:

30. Enhanced Responsive Data Table (:::table) #

Wrap tables with smooth horizontal scrolling, zebra striping, and header styling:

Syntax:

:::table Engine Benchmark Matrix
| Engine | Build Speed | Bundle Size |
| :--- | :---: | :---: |
| **Docboot** | **84ms** | **7.2KB** |
| Docusaurus | 4.2s | 140KB |
:::

31. Team Members & Authors (:::team & :::author) #

Introduce project maintainers, core team members, and guide authors with social badges:

Syntax:

:::team cols="2"
::member Sarah Connor role="Lead Architect" github="sarahconnor" twitter="sarahconnor"
Distributed systems engineer.
::
::member Ahmet role="Maintainer" github="ahmet"
Core compiler developer.
::
:::

32. Project Sponsors & Backers (:::sponsors) #

Recognize supporting organizations and backers with tiered logo cards:

Syntax:

:::sponsors title="Proud Sponsors & Backers" cols="3"
::sponsor Google tier="Platinum" url="https://google.com"
::sponsor Vercel tier="Gold" url="https://vercel.com"
:::

33. Page Rating & Feedback Widget (:::feedback) #

Collect instant reader feedback with one-click ratings:

Syntax:

:::feedback
title: Was this tutorial helpful?
positiveText: Yes, very helpful
negativeText: Needs improvement
:::

34. Embedded Interactive Code Sandboxes (:::sandbox) #

Embed live, editable playgrounds from StackBlitz, CodeSandbox, or CodePen:

Syntax:

:::sandbox stackblitz id="docboot-starter" file="src/index.js" height="500px" title="Live Sandbox"
:::

35. Interactive Collapsible JSON Tree (:::json / :::jsontree) #

Display interactive, collapsible JSON payloads with syntax-highlighted semantic types, expandable nested objects and arrays, key counts, and a one-click raw JSON copy button:

Syntax:

:::json title="API Response Payload" expandLevel=2
{
  "id": "usr_99182",
  "name": "Sarah Connor",
  "roles": ["admin", "architect"],
  "active": true
}
:::

36. One-Click Copy Snippets & Tokens (:::copy) #

Display copyable commands, environment tokens, or code snippets with instant visual feedback and copy toast:

You can also use inline copy badges within markdown paragraphs: run npm install docboot to install the CLI directly.

Syntax:

<!-- Block syntax with optional prefix and label -->
:::copy prefix="$" label="Install CLI"
npm install -g docboot
:::

<!-- Inline syntax in standard text paragraphs -->
Run :::copy npx docboot dev::: in your project folder.

Next Steps #

• Image Optimization Pipeline — Automatic responsive pictures, WebP/AVIF, and galleries
• Mermaid Diagrams — Flowcharts and architecture graphs
• Docboot Doctor — Validating links, redirects, and stale pages
• Configuration Reference — Full options cheatsheet