Introducing Smooth DOC

Smooth DOC premium Gatsby theme.
This article is also available in: Français

Smooth DOC, a premium Gatsby theme to create pro-quality documentation websites.

I am very happy to announce the release of Smooth DOC! I have been working on this new version for several weeks now and it is finally ready 🥳.

How was Smooth DOC born?

Open source is at the heart of my philosophy and it always has been. I started programming at the age of 12. Once my first script was finished I quickly posted it on Codes-Sources. Old French people like me may remember it, it was sort of the ancestor of GitHub.

Since that time I have not stopped creating projects and sharing them with the community. First small libraries, utilities, then big hits like Shipit (a JavaScript deployment tool). Over the years I have learned to write a cleaner code, to expose more intuitive APIs, but also to document and market my projects.

My biggest projects to date are SVGR and Loadable Components. You are probably wondering why I am telling you about these projects when we are supposed to be talking about a Gatsby theme. Well, these projects are the starting point of Smooth DOC.

Thanks to my experience in open source, I understood that having a website and documentation is crucial in the success of a project, whether it's open source or not. Consider these two examples: Tailwind and Stripe. One is an open source CSS framework, the other a go-to payment solution. Both are successful tech products and they both have one thing in common: incredible documentation!

The success of your project requires the creation of perfect documentation. And that's exactly what I created Smooth DOC for.

Smooth DOC was initially a simple library, a sort of hand-made documentation factory. Then over time I made it more robust, I added some features.

With the advent of Gatsby, I was able to make something really portable and reusable out of it. After two years of development, Smooth DOC is now ready to be shared with the community!

What is a Gatsby theme?

Gatsby Logo

Gatsby is a high performance static site building framework. We're talking about JamStack, a stack that emerged a few years ago. The idea is simple, we start from any source (files, a CMS or a database) and we generate a complete site which can be served statically and hidden on CDNS.

A Gatsby theme is a pre-configured Gatsby. All the plugins are in the right place, all the components are ready, the generation of the pages, the CSS, the sitemaps, in short you can put your feet up and relax.

How does Smooth DOC work?

MDX Logo

Smooth DOC uses MDX files as its source. Do you know the Markdown? Do you know React? Well the MDX is a mix of both. Basically it allows you to use React components inside a Markdown file. We combine the writing fluidity of Markdown with the flexibility offered by React.

So to summarize, Smooth DOC is a project that allows you to obtain professional quality documentation by writing Markdown files.

Sample Smooth DOC Documentation File:

title: Getting Started
# Getting Started
How to get ready in five minutes...

Pretty intuitive, isn't it?


I'll give you a quick tour of the features offered by Smooth DOC.

Table of contents

Table of contents

On the right of the documentation, a table of contents is automatically generated based on the titles of your documentation. This allows the user to know at a glance the topics covered on the page.

Dark Mode

Dark Mode

Dark mode is supported by default. Sometimes we spend a lot of time on documentation. As a developer, I know that when I read documentation dark mode is a must.

React Live Code Editor

React Live Code Editor

A live code editor, your users can interact directly with the documentation without even the need to open a code editor!

Ready-to-use components

Hero component

Smooth DOC doesn't stop at documentation, it also provides many components for you to create an attractive home page.

And many others...

Many other features are available in Smooth DOC:

  • SEO and sitemap support
  • Images of shares on X, LinkedIn
  • Edit links in GitHub
  • The addition of Carbon Ads to monetize your project
  • Redirection
  • Menu customization
  • Algolia DocSearch
  • ...

How to install Smooth DOC ?

To enable you to install Smooth DOC, you would surely need good documentation. How fortunate it is because I'm referring you to the site of Smooth DOC (made with Smooth DOC of course 🤗). You can find all the necessary information there!

Discuss on TwitterEdit on GitHub