# x0

[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.

## Installation

```shell
npm install --save-dev @compositor/x0
```

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

```json
{
  "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:

```jsx
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.Provider>
      <Rebass.Container {...props} />
    </Rebass.Provider>
  </ScopeProvider>
)
```

[x0]: https://compositor.io/x0

[rebass]: https://rebassjs.com