Top Related Projects
Easy to maintain open source documentation websites.
🃏 A magical documentation site generator.
📝 Minimalistic Vue-powered static site generator
The best React-based framework with performance, scalability and security built in.
The React Framework
The file-based CMS for your Nuxt application, powered by Markdown and Vue components.
Quick Overview
Docz is a zero-config documentation generator for React components. It allows developers to create live-reloading, SEO-friendly, and production-ready documentation sites with minimal effort, using MDX (Markdown + JSX) for writing content.
Pros
- Easy to set up with zero configuration required
- Live reloading and hot module replacement for a smooth development experience
- Built-in components for creating interactive documentation
- Supports TypeScript and Flow for type-safe documentation
Cons
- Limited customization options compared to more complex documentation tools
- Primarily focused on React components, may not be suitable for other types of projects
- Learning curve for MDX syntax for developers new to the format
- Some users report performance issues with large documentation sites
Code Examples
- Creating a basic documentation page:
---
name: Button
route: /button
---
import { Playground, Props } from 'docz'
import { Button } from './Button'
# Button Component
<Props of={Button} />
## Basic usage
<Playground>
<Button>Click me</Button>
</Playground>
- Using the
useConfighook to access Docz configuration:
import { useConfig } from 'docz'
const MyComponent = () => {
const config = useConfig()
return <div>Current base path: {config.base}</div>
}
- Creating a custom theme component:
import { theme } from 'docz'
import { ThemeProvider } from 'theme-ui'
const Theme = ({ children }) => (
<ThemeProvider theme={myCustomTheme}>
{children}
</ThemeProvider>
)
export default theme(Theme)
Getting Started
- Install Docz:
npm install --save-dev docz
- Add scripts to your
package.json:
{
"scripts": {
"docz:dev": "docz dev",
"docz:build": "docz build"
}
}
- Create a
.mdxfile in your project:
---
name: Hello world
route: /
---
# Hello world
Welcome to my documentation!
- Run the development server:
npm run docz:dev
Competitor Comparisons
Easy to maintain open source documentation websites.
Pros of Docusaurus
- More comprehensive documentation and larger community support
- Built-in search functionality and internationalization features
- Easier integration with existing React projects
Cons of Docusaurus
- Steeper learning curve for non-React developers
- Less flexibility in customizing the documentation structure
- Heavier bundle size due to additional features
Code Comparison
Docz:
import { Playground, Props } from 'docz'
import Button from './Button'
# Button
<Props of={Button} />
## Basic usage
<Playground>
<Button>Click me</Button>
</Playground>
Docusaurus:
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
# Button
<Tabs>
<TabItem value="js" label="JavaScript">
{/* JavaScript code */}
</TabItem>
<TabItem value="py" label="Python">
{/* Python code */}
</TabItem>
</Tabs>
Both Docz and Docusaurus are popular documentation tools, but they cater to different needs. Docz focuses on simplicity and ease of use, especially for React component documentation, while Docusaurus offers a more feature-rich solution for larger projects with diverse documentation requirements. The choice between the two depends on the specific needs of your project and your team's familiarity with React.
🃏 A magical documentation site generator.
Pros of Docsify
- Lightweight and easy to set up with no build process required
- Supports multiple themes and plugins for customization
- Can generate a full-text search index automatically
Cons of Docsify
- Limited customization options compared to Docz's component-based approach
- Lacks built-in TypeScript support
- May require more manual configuration for complex documentation structures
Code Comparison
Docsify:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
</head>
<body>
<div id="app"></div>
<script>
window.$docsify = {
name: 'My Docs',
repo: 'https://github.com/username/repo'
}
</script>
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
</body>
</html>
Docz:
import { Playground, Props } from 'docz'
import { Button } from './Button'
# Button
<Props of={Button} />
## Basic usage
<Playground>
<Button>Click me</Button>
</Playground>
Both Docsify and Docz are popular documentation tools, but they cater to different needs. Docsify is simpler to set up and use, while Docz offers more flexibility and integration with React components.
📝 Minimalistic Vue-powered static site generator
Pros of VuePress
- Built on Vue.js, offering seamless integration with Vue components
- Excellent performance due to static site generation and Vue-based enhancements
- Strong community support and extensive plugin ecosystem
Cons of VuePress
- Steeper learning curve for developers not familiar with Vue.js
- Less flexibility in customizing the documentation structure compared to Docz
Code Comparison
VuePress:
<template>
<div class="theme-container">
<Content/>
</div>
</template>
<script>
export default {
name: 'Layout'
}
</script>
Docz:
import { useState } from 'react'
import { useConfig, useCurrentDoc } from 'docz'
export default () => {
const config = useConfig()
const currentDoc = useCurrentDoc()
return <div>{/* Your custom layout */}</div>
}
Key Differences
- VuePress is Vue-based, while Docz is React-based
- VuePress generates static sites, Docz focuses on dynamic component documentation
- VuePress has a more opinionated structure, Docz offers more flexibility
- VuePress has broader use cases, Docz specializes in component documentation
Use Cases
- Choose VuePress for general documentation, blogs, or Vue.js projects
- Opt for Docz when focusing on React component documentation or design systems
The best React-based framework with performance, scalability and security built in.
Pros of Gatsby
- More comprehensive ecosystem with a larger community and plugin library
- Better performance optimization, including image processing and lazy loading
- Supports a wider range of data sources and content management systems
Cons of Gatsby
- Steeper learning curve, especially for developers new to React or GraphQL
- Can be overkill for simpler documentation projects
- Slower build times for large sites compared to more lightweight alternatives
Code Comparison
Docz component example:
import { Playground, Props } from 'docz'
import Button from './Button'
# Button
<Props of={Button} />
## Basic usage
<Playground>
<Button>Click me</Button>
</Playground>
Gatsby component example:
import React from 'react'
import { graphql } from 'gatsby'
import Layout from '../components/layout'
export default function Template({ data }) {
const { markdownRemark } = data
const { frontmatter, html } = markdownRemark
return (
<Layout>
<h1>{frontmatter.title}</h1>
<div dangerouslySetInnerHTML={{ __html: html }} />
</Layout>
)
}
export const pageQuery = graphql`
query($path: String!) {
markdownRemark(frontmatter: { path: { eq: $path } }) {
html
frontmatter {
title
}
}
}
`
The React Framework
Pros of Next.js
- More comprehensive framework for building full-stack React applications
- Better performance optimization with automatic code splitting and server-side rendering
- Larger community and ecosystem, with more plugins and integrations available
Cons of Next.js
- Steeper learning curve due to its broader scope and feature set
- Less focused on documentation-specific features compared to Docz
- May be overkill for simple documentation projects
Code Comparison
Next.js:
// pages/index.js
export default function Home() {
return <h1>Welcome to Next.js!</h1>
}
Docz:
// index.mdx
---
name: Home
route: /
---
# Welcome to Docz!
Key Differences
- Next.js is a full-featured React framework, while Docz is specifically designed for documentation
- Docz uses MDX for content creation, making it easier for non-developers to contribute
- Next.js offers more flexibility in routing and page structure
- Docz provides built-in components for common documentation elements (e.g., Props tables)
Use Cases
- Choose Next.js for complex web applications or when you need more control over the entire stack
- Opt for Docz when creating documentation sites or component libraries with a focus on ease of use
The file-based CMS for your Nuxt application, powered by Markdown and Vue components.
Pros of Content
- Seamlessly integrates with Nuxt.js, providing a powerful content management system for Vue-based applications
- Supports multiple file formats (Markdown, JSON, YAML, CSV) out of the box
- Offers a flexible API for querying and displaying content, making it easy to create dynamic documentation
Cons of Content
- Limited to Nuxt.js ecosystem, whereas Docz is framework-agnostic
- Requires more setup and configuration compared to Docz's simpler approach
- Less focused on component documentation, which is a core strength of Docz
Code Comparison
Content:
const { $content } = require('@nuxt/content')
export default async function ({ params, error }) {
const article = await $content('articles', params.slug).fetch()
return { article }
}
Docz:
import { useConfig, useCurrentDoc } from 'docz'
export const Doc = () => {
const config = useConfig()
const currentDoc = useCurrentDoc()
return <div>{currentDoc.name}</div>
}
Both repositories offer powerful solutions for documentation and content management, but they cater to different needs. Content excels in managing various content types within the Nuxt.js ecosystem, while Docz focuses on creating documentation sites with a strong emphasis on component documentation across different frameworks.
Convert 
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
â ï¸ WARNING
This is an OUTDATED version of Docz, if you are going to use it, be aware that you may possibly find bugs due to the outdated dependencies. Mainly because of all this time without updates, became almost impossible to follow with the decision of keep the same stack and update things.
So, we're working in a new version that will include an entire core refactoring/rewritting by adding Astro behind the scenes as bundler and another cools feature.
Since we really want to don't have so much breakings changes - and try to bring back the spot and quality Docz deserves - this can take a while to be done, please be patient and if you want to help, just send me a message on my Twitter!
Issues related to this old version, also won't be answered, ok? ð
Thank you ð
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 and Gatsby theme shadowing.
Getting started
Start by adding docz as a dependency to your project with Yarn or npm:
$ yarn add docz # react react-dom
# or
$ npm install docz # react react-dom
Note:
reactandreact-domwill not be installed automatically. You'll have to install them yourself.
Then, create .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 starts a local development server and opens your documentation site in the browser.
Build
yarn docz build generates a static site in .docz/dist/.
Try it 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.
Deploying
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
- with basic
- with a gatsby site
- with react native
- with styled-components
- with typescript
- with algolia search
- with gatsby-remark-vscode
- with react-router
- with flow
- with images
- with sass
- with less
- with stylus
- with css modules: works out of the box.
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:
- Star the project on GitHub.
- Help people in the issues by sharing your knowledge and experience.
- Find and report issues.
- Submit pull requests to help solve issues or add features.
- Influence the future of docz with feature requests.
If you're looking for a place to start make sure to check issues tagged with the good first issue label:
Read the Contributing Guide before you open a pull request.
You can also sponsor us via OpenCollective to help secure docz's future.
Top Related Projects
Easy to maintain open source documentation websites.
🃏 A magical documentation site generator.
📝 Minimalistic Vue-powered static site generator
The best React-based framework with performance, scalability and security built in.
The React Framework
The file-based CMS for your Nuxt application, powered by Markdown and Vue components.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot