explaingit

doczjs/docz

★ 23,606TypeScriptAudience · developerComplexity · 3/5QuietLicenseSetup · moderate

TLDR

Docz generates interactive documentation sites for React component libraries by mixing Markdown prose with live, runnable component demos.

Mindmap

mindmap
  root((repo))
    What it does
      MDX documentation
      Live component demos
      Auto-generated sites
    Tech stack
      TypeScript
      React
      GatsbyJS
    Use cases
      Document components
      Design systems
      Component libraries
    Key features
      Hot reloading
      Static output
      SEO friendly

Things people build with this

USE CASE 1

Build an interactive documentation site for a React component library with live, clickable examples.

USE CASE 2

Create a design system guide where each component can be tested and tweaked directly in the browser.

USE CASE 3

Maintain accurate component documentation that automatically stays in sync with your actual code.

Tech stack

TypeScriptReactGatsbyJSMDX

Getting it running

Difficulty · moderate Time to first run · 30min

Requires Node.js and npm/yarn; initial build and Gatsby setup can take 10-15 minutes.

Use freely for any purpose including commercial, as long as you keep the copyright notice.

In plain English

Docz is a tool that makes it easy to write and publish documentation for React component libraries and design systems. The problem it solves is that documenting UI components typically requires building a custom documentation site from scratch, a significant time investment that distracts from building the actual product. With Docz, you write documentation files using MDX, a format that mixes regular Markdown prose with React components. This lets you embed live, interactive demos of your components directly into the documentation page. For example, you can write a paragraph explaining a Button component and then show a working, clickable button right next to the text, not just a code snippet. Docz takes those MDX files and automatically generates a complete documentation site with live reloading during development. It is built on top of GatsbyJS, which means the output is a static website that is fast, SEO-friendly, and easy to deploy anywhere, no server required. You would use Docz when you are building or maintaining a React component library or design system and want documentation that is both accurate and interactive. It is particularly useful for teams that want their examples to stay in sync with the real component code, since the examples are the actual components running live. It is written in TypeScript and supports React.

Copy-paste prompts

Prompt 1
How do I set up Docz to document my React component library and add live interactive examples?
Prompt 2
Show me how to write an MDX file in Docz that displays a Button component with different props and states.
Prompt 3
How do I deploy a Docz documentation site and customize its theme and navigation?
Prompt 4
What's the best way to organize component documentation in Docz for a large design system?
Open on GitHub → Explain another repo

Generated 2026-05-18 · Model: sonnet-4-6 · Verify against the repo before relying on details.