---
title: Creating docs
---

By creating a MDX file inside your docs folder it will be created as a page, with the path defined by the filename.
Inside all docs files, you can define the following options:

<div style="overflow-x:auto;">
  <table>
    <tr>
      <th>Key</th>
      <th>Required?</th>
      <th>Description</th>
    </tr>
    <tr>
      <td>title</td>
      <td>Yes</td>
      <td>Page title</td>
    </tr>
    <tr>
      <td>description</td>
      <td>No</td>
      <td>Page description</td>
    </tr>
    <tr>
      <td>image</td>
      <td>No</td>
      <td>Used for og:image</td>
    </tr>
  </table>
</div>

### Example:

```mdx
---
title: 'My Example'
description: 'A simple description for this page'
image: /banner.jpeg
---

Wow, this is a nice page
```

## Embeding files

In a documentation website, sometimes you will need to embed well known services (like CodeSandbox, Twitter, or others...). If you need to
do it, you can simply copy-paste the link (powered by the awesome [gatsby-remark-embeder](https://www.gatsbyjs.org/packages/gatsby-remark-embedder/)).
Make sure to check the [supported services](https://github.com/MichaelDeBoey/gatsby-remark-embedder#supported-services).

https://youtu.be/QfcozcbDhNM

## Code Highlight

### Title

To show the title, just add it to your code block. Ex: `title=src/myfile.css`

```css title=src/myfile.css
.gatsby::before {
  content: 'niceee...';
}
```

### Line numbers

If you want to show line number, just add a option `lineNumbers=true`.

```js lineNumbers=true
const rocket = {
  launch: () => console.log('Launching...'),
};

rocket.launch();
```

### React live

As mentioned in the introduction, this theme uses `react-live`, so you can
create a playground for live editing React components.

To use it, just add a `live=true` option to your code block.

```jsx live=true
function MyComponent() {
  function handleButtonClick() {
    alert('wowww');
  }

  return <button onClick={handleButtonClick}>Hey, click me!</button>;
}

render(<MyComponent />);
```