Hanzo Docs

What is Hanzo Docs

Introducing Hanzo Docs, a docs framework that you can break.

The Hanzo Docs framework refers to a combination of UI + Core + Content Source, Hanzo Docs is more of a mental framework and each layer can be a library on its own.

Philosophy

Hanzo Docs was created to bring a more customisable experience for building docs, to be a docs framework that is not opinionated, a "framework" that you can break.

Less Abstraction

While most frameworks are configured with a configuration file, they usually lack flexibility when you hope to tune its details. You can’t control how they render the page nor the internal logic.

Hanzo Docs expects you to write code and cooperate with the rest of your software, it shows you how the app works and fully customisable, instead of a configuration file.

Seamless Integration

Hanzo Docs integrates tightly with your React framework, bringing useful utilities and a good-looking UI.

For Next.js developers, you are still using features of App Router, like Static Site Generation. There is nothing new for Next.js developers, that everything is familiar to you.

Composable UI

The only thing Hanzo Docs UI (the default theme) offers is User Interface. The UI is opinionated for bringing better mobile responsiveness and user experience.

Instead, we follow a much more flexible approach inspired by Shadcn UI — Hanzo Docs CLI, allowing you to "fork" a part of Hanzo Docs UI, and fully customise it.

Server-first Approach

Traditionally, static site generators are static.

However, Hanzo Docs introduce a server-first approach powered by React Server Component. With perfect server-client boundary, content becomes dynamic and interactive.

You can fetch data from server to display content, or integrate with CMS receiving realtime updates. It is always up-to-date and easy to maintain.

Minimal

Hanzo Docs is maintained by Fuma and many contributors, with care on the maintainability of codebase.

While we don't aim to offer every functionality people wanted, we're more focused on making basic features perfect and well-maintained. You can also help Hanzo Docs to be more useful by contributing!

When to use Hanzo Docs

Hanzo Docs is designed with flexibility in mind, it is not limited to certain usages.

  • @hanzo/docs-core is a headless UI library for building docs.
  • @hanzo/docs-mdx is a useful library to handle MDX content.

For most of the web applications, vanilla React.js is no longer enough. Nowadays, we also wish to have a blog, a showcase page, a FAQ page, etc. In these cases, Hanzo Docs can help you build the docs easier, with less boilerplate.

You can read Comparisons if you're interested.

Documentation

Hanzo Docs focuses on authoring experience, it provides a beautiful theme and many docs automation tools.

It helps you to iterate your codebase faster while never leaving your docs behind. You can take this site as an example of docs site built with Hanzo Docs.

Blog sites

Most React.js frameworks can already suffice the needs of a blog site.

Hanzo Docs provides additional tooling, including syntax highlighting, document search, and a default theme (Hanzo Docs UI). It helps you to avoid reinventing the wheels.

How is this guide?

Last updated on

On this page