Permalink
Branch: master
Find file Copy path
181 lines (132 sloc) 9.62 KB

Open Collective Patreon

Chat Chat

Docz video

🎩   Features

  • 🧘 Zero config and easy. Don't worry about complex configurations steps.
  • ⚑️ Blazing Fast. Full hot reload support with webpack 4 and automatic code splitting.
  • πŸ’… Easy to customize. Create and use real customizable themes.
  • πŸ“ MDX Based. Write markdown with all power of components.
  • πŸŽ› Pluggable. With plugins, you can manipulate a lot of things through the docz flow and data.
  • πŸ” Typescript Support. We have a full support for your type definitions.

πŸš€ Β  Roadmap

We still have a long road to go, this is just the beginning. So to further improve docz we've created a roadmap that you can see the next features and improvements. Give us your feedback:

Docz Roadmap

πŸ€” Β  Why?

Libraries that make our life easier coming up every day. Styleguides and design system are growing so fast. Today, tools that allow us to be quick and effective in what we are doing are really necessary. We can't lose time with tasks that should be trivial for us. Thinking about that docz came out.

Documenting our things is one of the most important and heavy processes when you're creating something new. We waste a lot of time with unnecessary setups to build something that can represent and we want with our own style.

πŸ‘‰πŸ» Β  More info on our website

πŸŽ› Β  Plugins

  • css - Parse css files inside your documents
  • netlify - Deploy your documentation to Netlify
  • postcss - Use Docz with PostCSS

πŸ—ƒ Β  Examples

🌍   Around the world

🚧   Warning!

Due to performance issues docz uses babel 7 and webpack 4. So, if you're using some older version of this packages you'll probably get some errors! About webpack 4 we can't do anything, but about babel, we indicate that you update your babel version. You can do that just by running babel-upgrade:

npx babel-upgrade --write

πŸ“Ÿ Β  Install and Usage

Simplicity is one of our core principles. Therefore, getting started with docz is something really easy and quick. First of all, you will need to install docz and some theme on your project using your favorite package manager (we'll asume yarn for this example):

$ yarn add docz docz-theme-default --dev

Special note for create-react-app and other users

There is a known temporary version mismatch issue in v0.13 of docz that causes an Uncaught TypeError: Cannot read property 'close' of undefined error. To fix, add this to your package.json and rerun rm yarn.lock && yarn:

"resolutions": {
  "ansi-styles": "^3.2.0"
}

See associated tracking issues for webpack v4.28.4 and ansi-styles v3.2.0. You can track v0.14 development here.

Then create some .mdx anywhere inside your project:

---
name: Button
---

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

# Button

<PropsTable of={Button} />

## Basic usage

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

Now, just run your dev server:

$ yarn docz dev

That's it! Now you have a real badass documentation πŸ‘Š

Any doubt? Check our docs to see more about docz!

🀝   Contributions

Contributions, issues and feature requests are very welcome. Please make sure to read the Contributing Guide before making a pull request.

πŸ’ͺ🏻 Β  Contributors

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

πŸ’­ Β  Needing Help?

If you need some help you can chat with us on our Discord server, you have a great team to help you:


Pedro Nauck

πŸ’» πŸ“– πŸ› πŸ‘€

Nicholas Eduardo

πŸ’» πŸ“– πŸ›

Marcelo Piva

πŸ’» πŸ“– πŸ›