Skip to navigation


This guide is deprecated. Info here is probably out of date. Proceed with caution!

x0 is a zero-config tool with built in support for MDX. You will need to install the library and set up the npm script.


npm install --save-dev @compositor/x0

Then, in your package.json add the following to the scripts:

  "start": "x0 docs",
  "build": "x0 build docs"

Customizing the layout

x0 supports MDX files with either .md or .mdx file extensions out of the box. For components requiring providers you will need to use customize _app.js. Here’s an example using Rebass components:

import React from 'react'
import * as Rebass from 'rebass'
import createScope from '@rebass/markdown'
import {ScopeProvider} from '@compositor/x0/components'

export default ({route, routes, ...props}) => (
  <ScopeProvider scope={{...Rebass, ...createScope()}}>
      <Rebass.Container {...props} />