The split-pane layout
The documentation editor has two panels side by side:
- Left panel — page tree: shows all pages in the current category as a collapsible tree. Click a page to open it in the editor. Use the three-dot context menu on any page to add child pages, reorder, publish, unpublish, or delete. Add new root pages with the button at the bottom.
- Right panel — content editor: shows the selected page's title, description, published toggle, and the markdown body editor. Changes are saved with the Save button.
Basic markdown syntax
| Element | Syntax |
|---|---|
| Heading 1 | # Heading |
| Heading 2 | ## Heading |
| Bold | **text** |
| Italic | *text* |
| Inline code | `code` |
| Link | [label](https://url) |
| Image |  |
| Bullet list | - item |
| Numbered list | 1. item |
| Blockquote | > text |
| Horizontal rule | --- |
Tables
Markdown tables use pipe characters to define columns:
| Column A | Column B |
|----------|----------|
| Cell 1 | Cell 2 |The second row (dashes) is required. You can align columns with colons: :--- left, :---: centre, ---: right.
Code blocks
Wrap multi-line code in triple backticks. Optionally add a language identifier for display purposes:
```javascript
const greeting = "hello";
```MDC components
Yaplet documentation supports a set of built-in components beyond standard markdown. These use the ::component-name syntax. The most common ones:
- ::note and ::callout — highlighted info, warning, or tip boxes.
- ::steps — numbered step list with visual connectors.
- ::card-group / ::card — a grid of info cards with icons and titles.
- ::accordion — expandable FAQ-style sections.
- ::tabs — tabbed content panels.
For full syntax examples for each component, click the Help button in the markdown editor toolbar — it opens an in-editor reference with copy-ready examples.
AI assistance
The editor toolbar has three AI buttons:
- AI Generate — describe what you want and the AI writes a first draft.
- AI Continue — extends existing content by appending new sections.
- AI Edit — rewrites or improves selected content based on your instructions.
- AI Title — generates a concise title from the page body.
- AI Description — writes a one-sentence page description from the body.
Saving and previewing
Click Save to persist your changes. If you try to navigate away with unsaved changes, the editor will warn you. Click Preview to see a rendered view of the current markdown — this shows exactly how the page will appear to visitors once published.