Need help with docz?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

21.8K Stars 1.4K Forks MIT License 1.6K Commits 93 Opened issues


✍ It has never been so easy to document your things!

Services available


Need anything else?

Contributors list

Docz makes it easy to write and publish beautiful interactive documentation for your code.

Create MDX files showcasing your code and Docz turns them into a live-reloading, production-ready site.

docz example


Documenting code is one of the most important and time-consuming tasks when developing software.

A lot of time is spent on building and maintaining custom documentation sites.

Docz enables you to quickly create a live-reloading, SEO-friendly, production-ready documentation site with MDX and customize the look, feel and behavior when required by leveraging GatsbyJS and Gatsby theme shadowing.


There's a create-docz-app, which you can use to start new projects with docz even faster. This app is developed independently of the docz project, and is not officially supported. So use the app at your own risk. You can use

as a replacement for
, when you're creating a new project.

Getting started

Start by adding

as a dependency to your project with Yarn or npm:
$ yarn add docz # react react-dom


$ npm install docz # react react-dom


will not be installed automatically. You'll have to install them yourself.

Then, create

files anywhere in your project:
name: Button
route: /

import { Playground, Props } from 'docz' import Button from './Button'


Basic usage

Click me No, click me

And a Button component

import React from 'react'
import t from 'prop-types'

const Button = ({ children, type }) => {children}

Button.propTypes = { /**

  • This is a description for this prop.
  • Button type.
  • / type: t.oneOf(['button', 'submit', 'reset']), } Button.defaultProps = { type: 'button', } export default Button

Finally, run:

yarn docz dev

This starts a local development server and opens your documentation site in the browser.


yarn docz build
generates a static site in

Try it with

yarn docz serve
or by serving the generated site with your favorite static file server (e.g.
npx serve .docz/dist

You can have

yarn docz build
emit to a different directory by providing a path to the
field in your
or from the command line:
yarn docz build --dest docs-site-directory


The output of docz consists of static assets only. This allows you to deploy your generated

site with any static site hosting provider you'd like.

Start by building your site with

yarn docz build
, if you haven't provided a
flag to your config then you will find your generated files in
to copy to the server.


You can check the complete list of docz examples here.

More info on

Used by


This project exists thanks to all the people who contribute. [Contribute].


All kinds of contributions are very welcome and appreciated!

If you want to contribute time to docz then here's a list of suggestions to get you started:

  1. Star the project on GitHub.
  2. Help people in the issues by sharing your knowledge and experience.
  3. Find and report issues.
  4. Submit pull requests to help solve issues or add features.
  5. Influence the future of docz with feature requests.

If you're looking for a place to start make sure to check issues tagged with the

good first issue

Good First Issue

Read the Contributing Guide before you open a pull request.

You can also sponsor us via OpenCollective to help secure docz's future.

Open Collective

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.