JavaScriptOpen SourceResources

Document Your Projects with Docz

Docz is a zero-config, webpack 4 powered documentation system. To break barriers and facilitate the creation of tools was the purpose that Docz arose. Document our things is one of the most important and painful process that exist when you’re creating something new. We lose a lot of our precious time with unnecessary setups to be able to build something that can represent and express what we want with our own style.

You have many ways and alternatives if you want to create some documentation for your project or even create a big design system to help your partners. Looking over these alternatives available, Docz keeps the best parts of them and fills the missing pieces of each one by being a tool with these principles:

  1. Zero config and easy to learn. No unnecessary build steps with confusing setups.
  2. Blazing fast. Built with performance in mind from the start.
  3. Easy to customize. Create something that will be easy to use and customize.
  4. MDX Based. Have the best standard to write documents.
  5. Pluggable. Plugins are the best choice when you need a custom and flexible solution.

Installation is easy: $ yarn add docz --dev. Docz uses MDX as a standard format because of the flexibility that turns possible to write JSX inside markdown files. It can also use Markdown for templating. The good thing about Docz is that you don’t need to follow any strict file architecture, you can just create your .mdx files anywhere on your project.

Docz has some built-in components that help you to document your things. Using the power of components and making some AST parsing algorithms to work on the source data for these components, we can do a lot of things, like render your components on the fly, create tables with contents, custom getters by traversing your file, etc.

---
name: Button
---

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

# Button

## Basic usage

<Playground>
  <Button>Click me</Button>
  <Button kind="secondary">Click me</Button>
</Playground>

The above code results in:

Learn more about Docz on their official website. You can contribute to the project by forking the Github repository.