Component controls stories. Write your components documentation with MDX and JSX. Design, develop, test and review in a single site.
Edit this page

Quick Start

🗒️ Migration of a docz site

docz is an easy to use, zero-config documentation system using Gatsby.
component-controls provides migration compatibility for many of the documentation features in docz.
a migration example can be found here: source

Add gatsby theme

yarn add gatsby @component-controls/gatsby-theme-stories

Configurattion file path

By default, the docz configurration file is kept in the project main folder, while component-controls uses a .config sub-folder by default.


module.exports = {
plugins: [
resolve: '@component-controls/gatsby-theme-stories',
options: {
configPath: '.',

Launch scripts

Next, you should add the gatsby develop and gatsby build scripts to the project's package.json


"scripts": {
//component-controls scripts
"build-docs": "gatsby clean && gatsby build",
"start": "gatsby develop -p 9022",
//docz original scripts
"develop": "docz dev",
"build": "docz build --dest public",
"serve": "docz serve"