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.
npm install -g monkey-doc@latest# 1. Initialize docs in your project
monkey-doc init
# 2. Start the local documentation server
monkey-doc dev
# 3. Build for deployment
monkey-doc build # → ./docs-dist/Open http://localhost:5173 to see your docs.
your-project/
├── docs/
│ ├── getting-started.mdx
│ ├── installation.mdx
│ ├── writing-guides.mdx
│ ├── components.mdx
│ └── best-practices.mdx
└── monkey-doc.config.ts
monkey-doc.config.ts at the root of your project:
export default {
title: 'My Docs',
description: 'Product documentation',
};Use these built-in components directly in your .mdx files:
<Callout type="info">This is an info callout.</Callout>
<Callout type="warning">Watch out!</Callout>
<Callout type="success">All good!</Callout><Tabs items={['npm', 'yarn', 'pnpm']}>
<Tab>npm install monkey-doc</Tab>
<Tab>yarn add monkey-doc</Tab>
<Tab>pnpm add monkey-doc</Tab>
</Tabs><Card title="Getting Started" href="/getting-started">
Learn how to set up Monkey-Doc in your project.
</Card><Steps>
<Step title="Install">Run `npx monkey-doc init`</Step>
<Step title="Write">Add `.mdx` files to `/docs`</Step>
<Step title="Preview">Run `npx monkey-doc dev`</Step>
</Steps><CodeBlock language="ts">
const hello = 'world';
</CodeBlock>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
- Node.js 18+
MIT
