Getting Started

Install x0 either globally or as a dev dependency in your project.

npm install --global @compositor/x0

npm install --save-dev @compositor/x0

Create a directory for your documentation or other site.

mkdir docs

Start the development server.

x0 docs

Note: if you installed x0 as a dev dependency, add the command above to a run script in your package.json

Create an index.md file in the docs/ directory.

# Hello World

Open your browser to http://localhost:8080 to see the file you just created.

To create another route, add another file to the docs/ directory, for example getting-started.md

# Getting Started

```sh
npm install @compositor/x0
```

The getting-started.md file should now be available at http://localhost:8080/getting-started.

Add a link to the Getting Started page from index.md.

# Hello World

- [Getting Started](getting-started)

Using React components

In addition to markdown, x0 can render any React component as a page. Create a demo.js file.

// demo.js
import React from 'react'

export default class extends React.Component {
  render () {
    return (
      <h1>Demo</h1>
    )
  }
}

x0 also supports MDX format, which allows you to mix JSX with markdown syntax.

import { Box } from 'rebass'

# Hello MDX

<Box p={3} bg='tomato'>
  This will render as a React component
</Box>