/docz

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

Primary LanguageTypeScriptMIT LicenseMIT

Chat

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

Table of Contents

📟   Start a New Project

Use create-docz-app to quickly get started :

npx create-docz-app my-docz-app
# or
yarn create docz-app my-docz-app --example typescript

➕   Add Docz to an Existing Project

Start by adding docz as a dependency :

$ yarn add --dev docz@next # react react-dom

# or

$ npm install --save-dev docz@next # react react-dom

Note: react and react-dom will not be installed automatically. You'll have to install them yourself.

Then, add .mdx files anywhere in your project:

---
name: Button
route: /
---

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

# Button

<Props of={Button} />

## Basic usage

<Playground>
  <Button type="submit">Click me</Button>
  <Button>No, click me</Button>
</Playground>

And a Button component Button.jsx:

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

const Button = ({ children, type }) => <button type={type}>{children}</button>

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

Finally, run the Docz development server:

$ yarn docz dev

That's it! You now have an interactive site to showcase and debug your components, and some badass documentation as a nice bonus 👊

🎩   Features

  • 🔩 Powered by Gatsby. Bundling and ecosystem powered by Gatsby.
  • 🧘 Zero config and easy. Don't worry about complex configurations steps.
  • ⚡️ Blazing Fast. Hot reload support and automatic code splitting out of the box.
  • 💅 Easy to customize. Create and use real customizable themes.
  • 📝 MDX Based. Write markdown enhanced by the power of components.
  • 🎛 Pluggable. Use plugins to manipulate and customize Docz to suit your needs.
  • 🔐 Typescript Support. Full support for TypeScript. Write your type definitions with no extra setup required.

Still not convinced ? Check our docs to learn more about Docz!

🤔   Why?

Libraries that make development easier are appearing every day. Style guides and design systems are growing in popularity. Today, tools that allow us to get our best work done and be efficient are necessary. We shouldn't be spending too much time on tasks that should be trivial. This is why we created Docz.

Documenting code is one of the most important and time-heavy processes when you're creating something new. A lot of time is wasted on unnecessarily attempting to build a documentation site that will match the style you want.

🗃   Examples

👉🏻   More info on our website

🎛   Plugins

🌍   Around the world

💪🏻   Contributors

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

🤝   Contributing

All kinds of contributions are very welcome and appreciated !

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

  1. ⭐️ Star the project
  2. 💬 Help people in the issues by sharing your knowledge and experience
  3. 🐛 Find and report issues
  4. 📥 Submit PRs 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

Good First Issue

And make sure to read the Contributing Guide before making a pull request.

You can also contribute money to help secure docz's future.

Open Collective Patreon

💭   Need Help?

If you need some help, feel free to open an issue with a description of the problem you're facing or chat with us on our Spectrum Community.