Overview

Contentrain includes a built-in Markdown editor designed for content models that use the MD or MDX content type. When a project administrator creates a content model with Markdown or MDX as the content format, content creators write and edit their content directly in this editor.

The Markdown editor provides a distraction-free writing experience while giving you access to all standard formatting options. Your content body is stored in a .md or .mdx file, while the structured fields (title, slug, status, and any custom fields) are managed separately as frontmatter — all handled automatically by Contentrain.

Editor Interface

The Markdown editor in Contentrain offers three viewing modes to suit your workflow:

• Edit mode — A full-width writing area where you compose your Markdown content. The toolbar at the top provides quick-access buttons for common formatting actions such as bold, italic, headings, links, images, code blocks, and lists.

• Preview mode — Renders your Markdown as formatted output so you can review how the content will appear before publishing.

• Split view — Displays the editor and the live preview side by side, letting you write and review simultaneously.

You can switch between these modes using the toggle buttons in the editor toolbar. The toolbar also includes buttons for undo/redo, inserting tables, and adding horizontal rules.

Supported Markdown Syntax

The Contentrain Markdown editor supports the full range of standard Markdown syntax. Below is a reference for the most commonly used elements.

Headings

Use the # symbol followed by a space to create headings. The number of # characters determines the heading level:

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

You can also insert headings quickly using the toolbar dropdown.

Bold, Italic, and Strikethrough

Format inline text using the following syntax:

**bold text**
*italic text*
~~strikethrough text~~
***bold and italic text***

The toolbar provides dedicated buttons for bold and italic formatting.

Links and Images

Create links and embed images with the following patterns:

[Link text](https://example.com)
[Link with title](https://example.com "Title")

![Alt text](/static/image.png)
![Alt text](/static/image.png "Image title")

When inserting images, you can reference assets that have been uploaded through the Contentrain Asset Manager. Use the asset path as it appears in the assets table.

Code Blocks

For inline code, wrap text in single backticks:

Use the `console.log()` function to debug.

For multi-line code blocks, use triple backticks with an optional language identifier for syntax highlighting:

```javascript
function greet(name) {
  return `Hello, ${name}!`;
}
```

The editor supports syntax highlighting for a wide range of languages including JavaScript, TypeScript, Python, HTML, CSS, and many more.

Lists

Create unordered lists with -, *, or +, and ordered lists with numbers:

- Item one
- Item two
  - Nested item
  - Another nested item

1. First step
2. Second step
3. Third step

You can nest lists by indenting with two or four spaces.

Blockquotes

Use the > character to create blockquotes:

> This is a blockquote.
>
> It can span multiple paragraphs.

Blockquotes can be nested and can contain other Markdown elements such as headings, lists, and code blocks.

Tables

Create tables using pipes | and hyphens -:

| Column 1 | Column 2 | Column 3 |
|----------|----------|----------|
| Row 1    | Data     | Data     |
| Row 2    | Data     | Data     |

You can align columns by adding colons to the separator row:

| Left     | Center   | Right    |
|:---------|:--------:|---------:|
| Aligned  | Aligned  | Aligned  |

The toolbar includes a table insertion button that generates the basic table structure for you.

Horizontal Rules

Insert a horizontal rule to separate sections:

---

You can also use *** or ___ to produce the same result.

MDX Support

When your content model is configured with the MDX content type, you can use JSX components directly inside your Markdown content. This is useful for embedding interactive elements, custom UI components, or reusable content blocks.

import { Callout } from '../components/Callout';

# Getting Started

Here is a standard paragraph in Markdown.

<Callout type="info">
  This is a custom callout component rendered inside MDX content.
</Callout>

MDX files are processed as .mdx rather than .md. The available components depend on your frontend framework and project setup. Coordinate with your project administrator or developer to understand which components are available for use in your content.

Frontmatter and Content Storage

Contentrain automatically manages the relationship between your structured content fields and the Markdown body. Understanding how this works can help you create content more effectively.

• Frontmatter is generated automatically from the fields defined in your content model. Fields like title, slug, description, and any custom fields you have configured appear in the YAML frontmatter block at the top of the .md or .mdx file. You do not need to edit frontmatter manually — Contentrain handles it through the content form fields.

• Body content is everything you write in the Markdown editor. This content is stored in the .md or .mdx file, separate from the JSON index that Contentrain maintains for structured data.

• System fields such as ID, createdAt, updatedAt, and status are managed by Contentrain and included in the frontmatter automatically. The slug field is required for all MD and MDX models and is used to generate the file name.

This separation means your structured data remains queryable through the Contentrain API, while your long-form content lives in standard Markdown files that any static site generator or framework can consume.

Tips and Best Practices

• Use headings to structure your content. Start with ## (Heading 2) for top-level sections within your content body, since # (Heading 1) is typically reserved for the page title.

• Preview before publishing. Use the split view or preview mode to check your formatting, especially for tables and code blocks, before setting the content status to publish.

• Keep images in the Asset Manager. Upload images through the Contentrain Asset Manager rather than referencing external URLs. This ensures your assets are version-controlled alongside your content in the Git repository.

• Use fenced code blocks with language identifiers. Adding a language identifier (e.g., ```javascript) enables syntax highlighting and makes code examples easier to read.

• Break up long content with horizontal rules. Use --- to create visual separation between major sections when headings alone are not sufficient.

• Write descriptive alt text for images. Good alt text improves accessibility and helps with SEO when your content is rendered on the web.

• Leverage MDX for reusable patterns. If your project uses MDX models, work with your development team to create components for recurring content patterns such as callouts, tabs, or embedded media.

For video tutorials on using the Markdown editor and other Contentrain features, visit the Contentrain Walkthroughs page.