Documentation Generators - A curated list: MkDocs, Docsify, Vuepress
Tags: webdev, vue, react, appseed
Published: 2020-12-13 11:24:12

---
title: Documentation Generators - A curated list: MkDocs, Docsify, Vuepress
published: true
description: A curated list with modern documentation generators to use: Vuepress, MkDocs, Docsify
tags: webdev, vue, react, appseed
cover_image: https://raw.githubusercontent.com/app-generator/static/master/documentation-generators/docsify-screen-sm.png
canonical_url: https://blog.appseed.us/documentation-generators-mkdocs-docsify-vuepress/
---
Hello Coders,

This article presents a curated list with modern, [open-source](https://appseed.us/admin-dashboards/open-source) **documentation generators** useful when we want to explain in deep how a software product can be used by others. All tools are free, actively supported, and production-ready.

> *Thanks for reading!* - Content provided by **[App Generator](https://appseed.us/)**.

---

To document a software product is a recommended practice even for small projects and becomes a necessity once the product is getting bigger (more modules, features) or is being used by many users. 
Good documentation triggers a faster adoption of your product and might decrease the required LIVE support and 1-1 assistance with your users.

- ✨ [MkDocs](https://www.mkdocs.org/) - Python based
- ✨ [Docsify](https://docsify.js.org/) - Vue based
- ✨ [Docute](https://docute.org/) - Vue based
- ✨ [Vuepress](https://vuepress.vuejs.org/) - Vue based
- ✨ [Docusaurus](https://v2.docusaurus.io/) - powered by React

Regarding the list, I've used Mkdocs in production but I'm super tempted to switch to Docsify that looks damn good, is actively supported, and provides search and internationalization "out of the box". 

---

Regarding this type of products, I noticed a few common problems: 

**Search** - this is a big problem and *[Lunr](https://lunrjs.com/)* solves it when your docs are still light. *[Algolia](https://www.algolia.com/)* comes to the rescue but is not free. 

**Internationalization (i18n)** - A modern documentation system, IMO, should provide this feature. This is my first reason not to use *[MkDocs](https://www.mkdocs.org/)* for my future projects. 

**Technology lockdown** - It would be nice to start using a documentation system without being forced to learn the technology that powers the product. *[Docusaurus](https://v2.docusaurus.io/)* might be a good choice but requires a minimum React knowledge and this can be a show stopper for a backend developer or someone that dislikes React.    

---

Feel free to suggest more generators or submit PROS, CONS remarks in the comments section. **Thank You!**  

---

## ✨ [MkDocs](https://www.mkdocs.org/)

Simple, Python-based documentation generator that uses Markdown format for input files - BSD-2-Clause License.

**Official information** - MkDocs is a fast, simple, and downright gorgeous static site generator that's geared towards building project documentation. Documentation source files are written in Markdown, and configured with a single YAML configuration file.

---

> Github metrics

- 11k Stars, 1.6k Forks, Last commit: 5days ago
- 120 open issues and 17 pulls requests
- Used by 9k users, 160 Contributors

---

> PROS (advantages of using MkDocs)

- Easy to set up, well documented
- Fast in development and also in production
- Default Search feature by [Lunr](https://lunrjs.com/), Algolia can be integrated with ease
- Components via [Markdown-Include](https://github.com/cmacmackin/markdown-include)

---

> CONS (disadvantages)

- No Multilanguage support
- Hardcoded footer - can be hacked but unsupported by default
- Few themes available

---

![Documentation Generator MkDocs - Homepage screen](https://raw.githubusercontent.com/app-generator/static/master/documentation-generators/mkdocs-screen.png)

---

## ✨ [Docsify](https://docsify.js.org/)

A modern Vue-based documentation generator that renders the files without a translation phase. In other words, the docs are rendered as a classic SPA.

**Official Information** - A magical documentation site generator. Docsify generates your documentation website on the fly. Unlike GitBook, it does not generate static HTML files. Instead, it smartly loads and parses your Markdown files and displays them as a website. To start using it, all you need to do is create an `index.html`.

---

> Github metrics

- 16k Stars, 4k Forks, Latest commit 20h ago (not so relevant maybe)
- 113 open issues and 33 pulls requests
- Used by 1.6k users, 154 contributors

---

> PROS

- No statically built HTML files
- Simple and lightweight
- Smart full-text search plugin
- Multiple themes
- SSR support
- Internationalization

---

> CONS

- The users should be familiar with Vue, Nodejs, and related tools

---

![Documentation Generator Docsify - Homepage screen](https://raw.githubusercontent.com/app-generator/static/master/documentation-generators/docsify-screen.png)

---

## ✨ [Docute](https://docute.org/)

Docute is basically a JavaScript file that fetches Markdown files and renders them as a single-page application.

It's totally runtime-driven so there's no server-side components involved which also means there's no build process. You only need to create an HTML file and a bunch of Markdown documents and your website is almost ready!

**Docsify and Docute** are pretty much the same, but with different UI and different usages.

Docute (60kB) is 3 times bigger than Docisfy (20kB), because we use Vue, Vue Router and Vuex while Docsify uses vanilla JavaScript under the hood.

---

> Github metrics

- 3k Stars, 400 Forks, Last commit: 6mo ago
- 71 open issues and 11 pulls requests
- Used by 24 users, 16 contributors

---

![Documentation Generator Docute - Homepage screen](https://raw.githubusercontent.com/app-generator/static/master/documentation-generators/docute-screen.png)

---

## ✨ Vuepress

Vue-powered Static Site Generator with a minimal setup with markdown-centered project structure.
VuePress generates pre-rendered static HTML for each page and runs as a SPA once a page is loaded.

---

> Github metrics

- 18k Stars, 3.6k Forks, Latest commit 20h ago (not so relevant maybe)
- 300+ open issues and 100 pulls requests
- Used by 13k users, 350 contributors

---

> PROS

- No statically built HTML files
- Simple and lightweight
- Internationalization
- Vue can be used in Markdown files

---

![Documentation Generator Vuepress - Homepage screen](https://raw.githubusercontent.com/app-generator/static/master/documentation-generators/vuepress-screen.png)

---

##✨ Docusaurus

This generator is built using React to build the UI and Markdown/MDX as input format.

---

> Github metrics

- 20k Stars, 2.4k Forks, Last commit: 18h ago (not so relevant maybe)
- 160 open issues and 18 pulls requests
- Used by 6k users, 500 contributors

---

> PROS

- Fast in production - has an internal architecture similar to Gatsby (PRPL pattern)
- Use React and MDX

---

![Documentation Generator Vuepress - Homepage screen](https://raw.githubusercontent.com/app-generator/static/master/documentation-generators/docusaurus-screen.png)

---

> Thanks again! Let me know your thoughts in the comments. 

---

Btw, my (nick) name is **Sm0ke** and I'm pretty active also on [Twitter](https://twitter.com/Sm0keDev).