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.
Documenting code is one of the most important and time-heavy processes when developing software.
A lot of time is spent on building and maintaining custom documentation sites.
Docz enables you to quickly create live-reloading, seo-friendly, production-ready documentation sites with MDX and customize the look, feel and behavior when required by leveraging GatsbyJS and Gatsby theme shadowing.
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
Start by adding docz as a dependency :
$ yarn add docz@next # react react-dom
# or
$ npm install docz@next # react react-dom
Note:
reactandreact-domwill 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 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 will start a local development server and open your documentation site in the browser.
yarn docz build will generate a static site for your site in .docz/dist/.
You can try it out 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 dest field in your doczrc.js 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 docz 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 dest flag to your config then you will find your generated files in .docz/dist to copy to the server.
basic - Barebones example.
gatsby - Example using Docz in a Gastby project.
react native - Using Docz in a React Native project.
styled-components - Using Docz with styled-components.
with typescript - Using Docz with Typescript.
with flow - Using Docz with Flow.
with images - Using Docz with images in mdx and jsx.
with sass - Using Docz parsing CSS with SASS.
with less - Using Docz parsing CSS with LESS.
with stylus - Using Docz parsing CSS with Stylus.
with css modules: works out of the box with gatsby
You can check the complete list of docz examples here.
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 :
If you're looking for a place to start make sure to check issues tagged with :
And make sure to read the Contributing Guide before making a pull request.
You can also contribute money to help secure docz's future.
FAQs
It's has never been so easy to documents your things!
The npm package docz receives a total of 3,478 weekly downloads. As such, docz popularity was classified as popular.
We found that docz demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.