Monkey-Doc

A narrative-first documentation tool — a beautiful alternative to Storybook.

Storybook = component documentation
Monkey-Doc = product guides + storytelling

Inspired by Notion, GitBook, and Vercel docs. Built with Vite, React, and MDX.

Installation

npm install -g monkey-doc@latest

Quick Start

# 1. Initialize docs in your project
monkey-doc init

# 2. Start the local documentation server
monkey-doc dev

Open http://localhost:5173 to see your docs.

Commands

monkey-doc init

Creates a /docs folder with example MDX files and a monkey-doc.config.ts config file.

monkey-doc dev

Starts a local documentation server with hot reload on MDX changes.

monkey-doc build

Builds a static site ready to deploy anywhere.

monkey-doc build                # → ./docs-dist/
monkey-doc build -o my-site     # custom output directory

Includes _redirects (Netlify / Cloudflare Pages) and .nojekyll (GitHub Pages) out of the box.

vercel docs-dist                # deploy to Vercel

Configuration

monkey-doc.config.ts at the root of your project:

export default {
  title: 'My Docs',
  description: 'Product documentation',
  github: 'https://github.com/your/repo',
};

What init creates

your-project/
├── docs/
│   ├── getting-started.mdx
│   ├── installation.mdx
│   ├── writing-guides.mdx
│   ├── components.mdx
│   └── best-practices.mdx
└── monkey-doc.config.ts

Docs structure

Any .mdx file inside /docs becomes a page. Nested folders become sections in the sidebar:

docs/
├── getting-started.mdx     → /getting-started
├── guides/
│   ├── writing.mdx         → /guides/writing
│   └── components.mdx      → /guides/components
└── reference/
    └── config.mdx          → /reference/config

MDX Components

Use these built-in components directly in your .mdx files:

<Callout>

<Callout type="info">This is an info callout.</Callout>
<Callout type="warning">Watch out!</Callout>
<Callout type="success">All good!</Callout>

<Steps>

<Steps>
  <Step title="Install">Run `monkey-doc init`</Step>
  <Step title="Write">Add `.mdx` files to `/docs`</Step>
  <Step title="Preview">Run `monkey-doc dev`</Step>
</Steps>

<Tabs>

<Tabs items={['npm', 'yarn', 'pnpm']}>
  <Tab>npm install -g monkey-doc</Tab>
  <Tab>yarn global add monkey-doc</Tab>
  <Tab>pnpm add -g monkey-doc</Tab>
</Tabs>

<Card>, <CodeBlock>, <Callout>, <Diff>, <FileTree>, <Mermaid> and more

Full component reference available in your local docs after monkey-doc init.

Features

• Hot reload on MDX changes
• Sidebar auto-generated from file structure
• Table of contents from headings
• Full-text search (⌘K)
• Dark mode
• Multi-language support
• Export PDF
• Deploy as static site

Requirements

• Node.js 18+

License

MIT