CodeNewbie Community 🌱

Sankalp Swami
Sankalp Swami

Posted on • Originally published at

Tools That Have Made React Documentation A Piece of Cake

Full article is available on Aviyel
React Component Documentation
If you are a front end developer, chances are; you already had used React at least once till now. It all started with Facebook’s decision to launch live chat integrations to the platform, way back in 2013. The task was complex, maybe more complex than Facebook’s UI architecture with untraceable DOM mutation in those days. And then React saw the light of the day!
React fixed the DOM race conditions plaguing Facebook’s UI for a while through ‘Flux’ architecture to control DOM mutations and deploying an irreversible component state. It got so popular with time that a Stack Overflow survey in 2019 crowned React as the sixth most used framework in the dev circle. Today, most tech companies including Bloomberg, Air Bnb and Discord use React for their overall UI and UX architectures.

As far as React’s documentation is concerned, the dev economy is already filled with tons of tools where each platform has an edge over others. In the post, I have curated a number of tools I used for React documentation.

PS: Just because I prefer these tools for my documentation needs, you don’t have to buy them. However, the purpose is to serve developers an exhaustive list they can put out for consideration.

Tools I Use to Document React Component



Professional projects require regular documentation, period. What would you answer when your peer asks if a particular component has already been built or need source code at one place to configure a bug in your product? Well, you’d be needing a robust documentation tool here; one that saves time, and you can get through its UX hassle-free.

In that case,Docz is my first preference. Why? It has a Gatsby foundation so you can easily develop dynamic websites at a fast pace. Moreover, it’s already stuffed with all general use-cases so you won’t need external configurations to work your way around. Another feature that you may want to consider is Docz’s support of MDX formats. That way, you’ll be able to navigate through the standard remark/rehype ecosystem, and access MDX plugins during curating your docs. Plus, the changes are deployed live while you are writing down your documentation.

Documenting React Components with Docz

  • Use  yarn add docz --dev to install Docz. Write some MDX files in your space and run docz dev
  • All your results would be available at http://localhost:3000
  • To publish, use docz build and a static version of your doc will be generated.
  • A typical docz .mdx file has a front-matter a-la Jekyll, some imports and markdown mixed with components, like this:
name: Button
menu: Components
route: /components/button


import Button from './Button'# 

The button

I am in love with the Button Component

Enter fullscreen mode Exit fullscreen mode
  • Check out custom themes for steps to add more properties to your doc created with the above snippet.
  • You can also use import { Playground, PropsTable } from "docz"; built-in components to write standard docs.
  • <PropsTable /> take your React components and display them in a neatly formatted table consisting of properties. By default, the properties available are: name, default value, type, and description.
Button.propTypes = {


   * I want an inverted component button 

  inverted: PropTypes.bool

Button.defaultProps = {

  inverted: true 
Enter fullscreen mode Exit fullscreen mode
  • Also Docz’s Playground Component helps to render React components in docs and creates tables with valuable content describing the React components with live-editable code below the rendered component.

You can always create u=custom themes and plugins with Docz. To save time, use the ones already curated by the community.

Other super tools are waiting for you here on Aviyel. Follow this link if you want to save your precious time which you are wasting on building custom documentation sites.


Top comments (0)