Authoring

How to write documentation

In your MDX folder, create any path/to/my-document.mdx:

---
title: My Document
description: Lorem ipsum...
nav: 0
image: dog.png
---

MARKDOWN

Frontmatter

Any key is optional.

  • title: if not provided, last part of the path is used: my document
  • image:
    • relative (to the md file) or absolute path, eg: dog.png, ./dog.png, ../../dog.png, /dog.png or https://animals.com/dog.png
    • will be used as metadata image if provided
  • nav: order in the navigation (on the same level)

MARKDOWN

All exported components/mdx/index.tsx React components will have MDX treatment.

Grid

Responsive grid.

<Grid cols={2}>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  ...
</Grid>
Result
  • A
  • B
  • C
  • D
  • E
  • F
  • G

Sandpack

See Sandpack docs.

<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': 'latest',
      '@react-three/drei': 'latest'
    },
  }}
  files={{
    '/styles.css': `html,body,#root {height:100%;margin:unset;}`,
    '/App.tsx': `import { Canvas } from '@react-three/fiber'
import { Cloud, CameraControls } from '@react-three/drei'

export default function App() {
  return (
    <Canvas camera={{position: [0,-13,0]}}>
      <Cloud speed={.4} growth={6} />
      <ambientLight intensity={Math.PI} />
      <CameraControls />
    </Canvas>
  )
}`,
  }}
/>
Result
import { Canvas } from '@react-three/fiber'
import { Cloud, CameraControls } from '@react-three/drei'

export default function App() {
  return (
    <Canvas camera={{position: [0,-13,0]}}>
      <Cloud speed={.4} growth={6} />
      <ambientLight intensity={Math.PI} />
      <CameraControls />
    </Canvas>
  )
}

Codesandbox

<Codesandbox id="3rjsl" />
ResultCell fracture
Cell fracture

Gha

Aka. "GitHub alerts"

<Gha keyword="NOTE">Highlights information that users should take into account, even when skimming.</Gha>

or better:

> [!NOTE]
> Highlights information that users should take into account, even when skimming.
Result
Note

Highlights information that users should take into account, even when skimming.

We also support: [!TIP], [!IMPORTANT], [!WARNING], [!CAUTION]
Tip

Optional information to help a user be more successful.

Important

Crucial information necessary for users to succeed.

Warning

Critical content demanding immediate user attention due to potential risks.

Caution

Negative potential consequences of an action.

Hint

Caution

Deprecated, use Gha[keyword="NOTE"] instead.

<Hint>
  I'm a deprecated hint. Use `Gha` instead.
</Hint>
Result
Note
I'm a deprecated hint. Use Gha instead.