In our material about custom software development process stages we talked about the need of good documentation. But aren’t words just words without a proper example? This time we’d like to show you some frontend documentation style guides with best practices.
Thanks to the good documentation people can understand how things work if key employees decide to leave the company. Documented coding guidelines help bring consistency. So, what are the best tools available for writing documentation and for building style guides?
.mdxfile is almost the same as a Markdown file, it helps you to import interactive JSX components. There are MDX plugins for Next.js and Gatsby.
- You can use Docusaurus. It’s often used by Facebook and many major open sources projects like Redux, Prettier, Gulp, and Babel. You can document anything with its help.
- There are many other ways for documentation on such sites as React, IBM’s design system, Apollo and Ghost CMS. If you work with the Vue framework, you can try VuePress. MkDocs is an open source static site generator for creating documentation, written in Python and configured with a single YAML file. GitBook is a popular paid product that’s free for open-source and non-profit teams.
- Such tools as Storybook, Docz and Styleguidist can display interactive UI components and document their API. A style guide creates an easily searchable overview of all your UI components.
- Docz is a React-only project but it can work on support for Preact, Vue and web components. It is the newest tool, but has already amounted over 14,000+ stars on GitHub. It provides two components —
<Props>that are imported and used directly in
Feel free to check more useful guides and tools in this great material.
We can also suggest you read about frontend developer handbook, a guide on frontend development. It might be used as a useful recap, but at the same time, this edition might be actual as never!