---
title: Writing Content
description: How to write and organize content or documentation pages in CamelMind using Markdown and MDX.
---

CamelMind uses [MDX](https://mdxjs.com/) — Markdown extended with JSX. MDX combines standard Markdown with React components, giving you all the simplicity of Markdown plus interactive components such as callouts, tabs, and step-by-step guides.

To publish a page, simply:

1. Create an `.mdx` file inside the `content/` directory.
2. Add the page to `nav/nav.yml`.
3. Start writing.

<Callout type="tip">
Unlike many documentation frameworks, CamelMind does not generate URLs from your folder structure. Instead, every page is mapped to a URL in <code>nav/nav.yml</code>, giving you complete control over your site's navigation.
</Callout>

---

## File format

Every content file is a plain `.mdx` file with optional YAML frontmatter at the top:

```mdx
---
title: My Page
description: A short summary used in search results and meta tags.
last_updated: "2026-06-01"
hide_table_of_contents: true
---

Body content goes here.
```

### Frontmatter fields

| Field | Required | Description |
|---|---|---|
| `title` | Yes | Page title shown in the browser tab and sidebar |
| `description` | No | Short summary for search results and `<meta>` description |
| `last_updated` | No | Override the value determined by the `showLastUpdated` configuour specific date.|
| `hide_table_of_contents` | No | Set to `true` if you want to hide the page's Table of Content. |

---

## Markdown basics

CamelMind supports full [CommonMark](https://commonmark.org/) Markdown plus [GitHub Flavored Markdown](https://github.github.com/gfm/), including tables, task lists, and strikethrough text. For basic formatting syntax, see [GitHub document](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax).

---

## Code blocks

Use fenced code blocks with a language identifier for syntax highlighting:

````mdx
```bash
npm run dev
```

```typescript
const greeting = "Hello, world!"
```

```yaml
nav:
  - label: "Getting Started"
    dropdown: true
```
````

<Callout type="tip">
Supported languages include `bash`, `typescript`, `javascript`, `python`, `yaml`, `json`, `mdx`, `css`, `html`, `sql`, and many more.
</Callout>

---

## Inline elements

```mdx
**Bold text**
*Italic text*
`inline code`
[Link text](https://example.com)
![Alt text](image.png)
```

---

## Images

Store images in `public/images/` and reference them with a root-relative path:

```mdx
![Diagram](/images/architecture.png)
```

Images automatically support click-to-zoom on documentation pages.

---

## Partial content

If you need to reuse the same content across multiple pages, create it as a partial.

Store reusable snippets as `.mdx` files in the `/content/_partials` directory, then include them anywhere in your documentation using the `<Partial>` component:

```mdx
<Partial file="_partials/your-snippet.mdx" />
```

Using partials helps you maintain shared content in a single place, making updates easier and ensuring consistency across your documentation.

<Callout type="note">
Partial files are intended for inclusion only and should **not** be referenced directly in any `nav/*.yml` file.
</Callout>

---

## MDX components

Because CamelMind uses MDX, you can embed React components directly into your documentation without importing them.

```mdx
<Callout type="tip">
This is a tip.
</Callout>
```
rendered as:

<Callout type="tip">
This is a tip.
</Callout>


and this:

```mdx
<Steps>
  <Step n={1} title="Install">
    Run the installer.
  </Step>

  <Step n={2} title="Start">
    Launch the development server.
  </Step>
</Steps>

```
rendered as:

<Steps>
  <Step n={1} title="Install">
    Run the installer.
  </Step>

  <Step n={2} title="Start">
    Launch the development server.
  </Step>
</Steps>


See [MDX Components](/guides/mdx-components) for the full component reference.

---

## Hide content from rendering

Sometimes you may want to keep notes or draft content in your documentation source without publishing it—for example, documentation for an upcoming feature, content that's still under review, or reminders for yourself.

Wrap the content in an MDX comment to prevent it from being rendered.

```mdx
{/*
This is the hidden cargo that my camel carries but my users don't know.
*/}
```

Everything inside the comment block is ignored when CamelMind builds your documentation, so it won't appear on the published site. Once the information is ready, simply remove the comment markers to make it visible in your documentation.

---

## Organizing content

A typical documentation project looks like this:

```text
content/
├── getting-started/
│   ├── introduction.mdx
│   └── installation.mdx
├── guides/
│   ├── writing-content.mdx
│   └── navigation.mdx
└── reference/
    └── configuration.mdx
```

These folders are only for organization.

Unlike most documentation frameworks, CamelMind does not derive URLs from the file system. Instead, each page is mapped to a URL in `nav/nav.yml`, making it easy to reorganize your content without breaking links.