DEV Community

Cover image for Using MDX with Docz Has Never Been This Easy!
Chandrika Deb
Chandrika Deb

Posted on

Using MDX with Docz Has Never Been This Easy!

Code documentation seems to be a cumbersome process for most developers. However, with the right set of practices and manageable tools, the task gets a bit painless. For me, Docz is the go-to tool for documentation needs as it creates SEO-friendly, interactive, production-ready documentation sites in a heap of minutes. The Gatsby-powered OSS has helped me to cut down the overheads of building and maintaining custom documentation sites. If you are an open source contributor, you can contribute to Docz here.

FYI- It is already popular on GitHub with 21k stars ⭐ and 26k weekly downloads. In a nutshell, πŸ‘€ Docz is a zero-config, typescript-supported OSS with customisable themes and plugins to style your document.

The software uses MDX ( .mdx files) extensively to render desirable formatting features in your doc. For a heads-up, MDX is short for Markdown with JSX. It finds use cases in building React components to Markdown files and speeds up the document workflow. With MDX, you can make interactive charts, alert components and directly add them to your documentation. That’s how MDX does all the heavy-lifting formatting for your doc. Now that you have a fair idea about Docz and MDX, let’s dive deep into the integration- using Docz with MDX.

aviyel-docz-with-mdx

The Use Cases: Docz with MDX

Did you ever stumble upon questions like β€œI want to build a new component for my new feature? Is it already there? If yes, what it does? Does it work the same I want it to be?” The foremost use-case of Docz and MDX is to create documentation that can be shared and used over and over by a developer network in an organisation.

You can also use the feature to build reusable React components for your front-end project. The combination also finds use in agile software development to bookmark several documentation phases including Implementation Details, SRS, Design Documents, Test Cases, and End User Documents.

If you are settled with Docz, use the tool to create an online resume. That’s how you have an edge to impress your interviewer and showcase your front-end skills.

documentation-humor

To read full article, please visit Aviyel πŸš€

Discussion (2)

Collapse
michaelcurrin profile image
Michael

I haven't heard of Docz

It's worth adding a link to Getting Started on MDX site

mdxjs.com/getting-started/

Next.js has an MDX plugin too if you want a Gatsby alternative for MDX.

nextjs.org/blog/markdown

Try out Docsify. It's a Vue-based docs site tool that uses Markdown.

Collapse
zyabxwcd profile image
Akash

haha..the meme at the end cracked me up