Github url

docz

by doczjs

doczjs /docz

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

19.1K Stars 1.1K Forks Last release: 4 months ago (v2.3.1) MIT License 1.6K Commits 205 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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

Why ?

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.

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 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, add

.mdx
files anywhere in your project:
---
name: Button
route: /
---

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

Button

Basic usage

Click me No, click me

And a Button component

Button.jsx
:
import React from 'react'
import t from 'prop-types'

const Button = ({ children, type }) => {children}

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.

Build

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
.

Deploy

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.

Examples

You can check the complete list of docz examples here.

More info on docz.site

Used by

  • Welcome UI : Customizable design system with react β€’ styled-components β€’ styled-system and reakit.
  • React Hooks Testing Library : 🐏 Simple and complete React hooks testing utilities that encourage good testing practices.
  • Mobx React : mobx-react documentation site.
  • React Google Charts : A thin, typed, React wrapper over Google Charts Visualization and Charts API.
  • Entur : Entur operates the national registry for all public transport in Norway.
  • FAB Specification : πŸ’Ž FABs are a compile target for frontend applications.
  • @umijs/hooks: React Hooks Library.
  • React Yandex Maps: Yandex Maps API bindings for React.
  • Components-extra: Customizable react component blocks built with material-ui and styled-components.
  • Add your site

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 of suggestions 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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.