the React.js docs framework you love.

Build excellent
documentations,
your style.

Hanzo Docs is a React.js documentation framework for Developers, beautifully designed by Hanzo AI. Bringing powerful features for your docs workflows, with high customizability to fit your preferences, works seamlessly with any React.js framework, CMS — anything.

Try it out.

npx @hanzo/docs-create-app

localhost:3000

New App launched!

Terminal
npx @hanzo/docs-create-app ◇ Project name│ my-app│◆ Choose a framework│ ● Next.js│ ○ Tanstack Start│ ○ React Router

Minimal aesthetics, Maximum customizability.

Hanzo Docs offer well-designed themes, with a headless mode to plug your own UI.

Pro designer? Customise the theme using Hanzo Docs CLI.

pnpm dlx @hanzo-docs/cli customise

> Choose a layout to customise...

Anybody can write.

Native support for Markdown & MDX, offering intuitive, convenient and extensive syntax for non-dev writers, developers, and AI agents.

---
title: Hello World
---

## Overview

I love **Hanzo Docs**!

```ts tab="Tab 1"
console.log("Hello World")
```

```ts tab="Tab 2"
return 0;
```

The familiar syntax.

It is just Markdown, with additional features seamlessly composing into the syntax.

Markdown features, including images
Syntax highlighting (Powered by Shiki)
Codeblock Groups
Callouts
Cards
Custom Heading Anchors
Auto Table of Contents

---
title: Hello World
---

import { Playground } from "@/components/playground";

## Overview

<Playground title="Test" />

This codeblock shows TypeScript information!

```ts twoslash
console.log("Hello World");

// give your code decorations [!code ++]
const name = "hanzo-docs";
```

And re-use content:

<include>./another-page.mdx</include>

Extensive but simple.

MDX for developers authoring content, use JavaScript in content.

JavaScript + JSX syntax
Custom Components
Include/Embed Content
TypeScript Twoslash: show type information in codeblocks.
Shiki Notations
Extend via remark, rehype plugins

---
title: Hello World
---

import { db } from "@/lib/db";

export async function DataView() {
  const products = await db.select().from("products");
  return products.map(product => <div key={product.id}>{product.name}</div>)
}

<DataView />

<auto-type-table path='./my-file.ts' name='CardProps' />

Content, always up-to-date.

Combining the power of MDX and React Server Components, use the latest data from database, server — anywhere, to be part of your content.

Works on React Server Components
Display data from database, CMS, anything
auto-type-table for documenting types based on TypeScript Compiler
OpenAPI playground for documenting your APIs

Docs For Engineers.

Framework Agnostic

Official support for Next.js, Tanstack Start, React Router, Waku — portable to any React.js framework.

A truly composable framework.

Separated as Content → Core → UI, offering the high composability that engineers love — you can use Hanzo Docs as a library, without adapting the entire framework.

hanzo-docs-mdx

Use MDX in your React framework elegantly.

hanzo-docs-core

Headless library for building docs + handling content.

hanzo-docs-ui

UI library for building docs.

hanzo-docs-openapi

Extend Hanzo Docs to render OpenAPI docs.

hanzo-docs-obsidian

Extend Hanzo Docs to handle Obsidian-style Markdown.

Adopts your content.

Designed to integrate with any content source, Hanzo Docs works on MDX, Content Collections, and even your own CMS.

BaseHub CMS Sanity Payload CMS

Hanzo Docs MDX

import { loader } from '@hanzo/docs/core/source';
import { docs } from '@hanzo/mdx:collections/server';

export const source = loader({
  source: docs.toHanzo DocsSource(),
  baseUrl: '/docs',
});

My CMS

My PageArticle

Another PageArticle

ComponentsArticle

Getting StartedArticle

MDX Editor

---
title: Hello World
---

# Hello World!

This is my first document.

Enhance your search experience.

Integrate with Orama Search and Algolia Search in your docs easily.

Learn More

Search...

Getting Started

Use Hanzo Docs in your project.

Components

The UI Components for your docs.

MDX Content

Using MDX for content.

User Guide

How to use Hanzo Docs.

The shadcn/ui for docs

Hanzo Docs CLI creates interactive components for your docs, offering a rich experience to your users.

Commands

A Framework of Dream.

Made Possible by You.

Hanzo Docs is 100% powered by passion and open source community.

SponsorsContributors

+28

Some of our best contributors.

Build Your Docs

light and gorgeous, just like the moon.

Battery guaranteed.
Actively maintained, open for contributions.
Fully open-source.
Open source, available on Github.
Within seconds.
Initialize a new project instantly with CLI.
Read docsOpen GitHub

Build excellent documentations,your style.