pedronauck/docz

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

# Docz 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. ## Why? 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](https://www.gatsbyjs.org) and [Gatsby theme shadowing](https://www.gatsbyjs.org/docs/themes/shadowing/). ## Getting started Start by adding `docz` as a dependency to your project with Yarn or npm: ```bash $ yarn add docz # react react-dom # or $ npm install docz # react react-dom ``` > **Note**: `react` and `react-dom` will not be installed automatically. You'll have to install them yourself. Then, create `.mdx` files anywhere in your project: ```mdx --- 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`: ```typescript import React from 'react' import t from 'prop-types' const Button = ({ children, type }) => <button type={type}>{children}</button> 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: ```bash yarn docz dev ``` This starts a local development server and opens your documentation site in the browser. ## Build