> ## Documentation Index
> Fetch the complete documentation index at: https://docs.autype.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Editor

> The Autype document editor — write Markdown, preview in real time, and use the sidebar panels for variables, styles, citations, and more.

The editor is where you write and design your documents. It combines a **Markdown code editor** on the left with a **live preview** on the right, plus a **sidebar** with panels for managing document elements.

<Frame>
  <img src="https://mintcdn.com/centerbit/xsS3MEtCpKEJ0qMD/images/application/editor-overview/example-full-editor-overview.png?fit=max&auto=format&n=xsS3MEtCpKEJ0qMD&q=85&s=e76ac670895351bf9c18ffdfb4825c5f" alt="Editor overview showing code editor, preview, and sidebar" width="2161" height="1273" data-path="images/application/editor-overview/example-full-editor-overview.png" />
</Frame>

***

## Layout

The editor has three main areas:

| Area            | Position       | Description                                                              |
| --------------- | -------------- | ------------------------------------------------------------------------ |
| **Toolbar**     | Top            | Formatting buttons, block type selector, insert menus, export            |
| **Code Editor** | Left           | Write Markdown with syntax highlighting, autocomplete, and inline errors |
| **Preview**     | Right          | Live-rendered preview of your document (Web or PDF mode)                 |
| **Sidebar**     | Far left/right | Panels for variables, styles, citations, images, and more                |

On mobile, the editor and preview are shown as separate tabs — switch between them with the **Editor** / **Preview** toggle.

***

## Toolbar

The toolbar provides quick access to formatting and inserting elements. Hovering over any toolbar button shows a **tooltip** describing its function.

<Frame>
  <img src="https://mintcdn.com/centerbit/xsS3MEtCpKEJ0qMD/images/application/editor-overview/editor-toolbar.png?fit=max&auto=format&n=xsS3MEtCpKEJ0qMD&q=85&s=46f9287eb0283731b25c08b59305d4ea" alt="Editor toolbar" width="766" height="35" data-path="images/application/editor-overview/editor-toolbar.png" />
</Frame>

### Block type selector

A dropdown at the left of the toolbar lets you change the current block type:

| Block type     | Markdown prefix   |
| -------------- | ----------------- |
| Paragraph      | *(none)*          |
| Paragraph 2    | `\| `             |
| Heading 1–6    | `# ` to `###### ` |
| Code block     | ` ``` `           |
| Unordered list | `- `              |
| Ordered list   | `1. `             |

### Inline formatting buttons

To apply formatting, **select the text** you want to format first, then click the corresponding button. To remove formatting, select the formatted text (including the Markdown syntax characters) and click the button again.

| Button                                  | Action        | Markdown syntax |
| --------------------------------------- | ------------- | --------------- |
| <Icon icon="bold" size={16} />          | Bold          | `**text**`      |
| <Icon icon="italic" size={16} />        | Italic        | `*text*`        |
| <Icon icon="underline" size={16} />     | Underline     | `++text++`      |
| <Icon icon="strikethrough" size={16} /> | Strikethrough | `~~text~~`      |
| <Icon icon="highlighter" size={16} />   | Highlight     | `==text==`      |
| <Icon icon="link" size={16} />          | Insert link   | `[text](url)`   |

### Insert menus

The toolbar includes additional buttons and dropdown menus for inserting:

* <Icon icon="list" size={16} /> **Bullet List** / <Icon icon="list-ordered" size={16} /> **Numbered List** — toggle list formatting
* <Icon icon="table" size={16} /> **Table** — insert a table with a size picker
* <Icon icon="image" size={16} /> **Image** — standard Markdown image or image directive
* <Icon icon="braces" size={16} /> **Code Block** — insert a fenced code block
* <Icon icon="separator-horizontal" size={16} /> **Spacer** — insert vertical spacing (1–3 lines or custom px)
* <Icon icon="table-rows-split" size={16} /> **Page Break** — insert a page break (portrait or landscape)
* <Icon icon="square-dashed-bottom" size={16} /> **Page Section** — insert a page section with alignment (top, center, bottom)
* <Icon icon="list-tree" size={16} /> **Indices** — TOC, list of figures, list of tables, list of abbreviations, bibliography
* <Icon icon="sigma" size={16} /> **Math** — insert a block math expression
* <Icon icon="qr-code" size={16} /> **QR Code** — URL, WiFi, or vCard
* <Icon icon="variable" size={16} /> **Variable** — insert an inline variable reference
* <Icon icon="calendar" size={16} /> **Date** — insert a dynamic date variable with format, offset, and timezone
* <Icon icon="chart-column" size={16} /> **Chart** — bar, line, pie, doughnut, radar, polar, scatter, bubble

***

## Preview modes

The preview pane supports two rendering modes, toggled via the preview header. Which mode you prefer to work with is largely a matter of personal preference — both show your document content, just in different ways.

### Web preview (HTML)

<Frame>
  <img src="https://mintcdn.com/centerbit/xsS3MEtCpKEJ0qMD/images/application/editor-overview/web-preview-only.png?fit=max&auto=format&n=xsS3MEtCpKEJ0qMD&q=85&s=be0e2cab65e82072e78dc315ee297623" alt="Web preview showing real-time HTML rendering" width="665" height="1176" data-path="images/application/editor-overview/web-preview-only.png" />
</Frame>

* Renders your document as styled HTML **in real time** — updates instantly as you type
* Shows **variable placeholders** as-is (not yet processed), so you can see where variables are used
* Best for **everyday writing and editing** — the instant feedback makes it ideal for checking that your Markdown syntax is interpreted as expected
* Shows a close approximation of the final output, though page layout details (margins, headers, footers, page breaks) are not represented

### PDF preview

<Frame>
  <img src="https://mintcdn.com/centerbit/xsS3MEtCpKEJ0qMD/images/application/editor-overview/pdf-preview-only-with-controls.png?fit=max&auto=format&n=xsS3MEtCpKEJ0qMD&q=85&s=4ab3aa9e3b6b68d9a35c4b4b26b460a5" alt="PDF preview showing the rendered document" width="674" height="1228" data-path="images/application/editor-overview/pdf-preview-only-with-controls.png" />
</Frame>

* Shows the **fully rendered document** exactly as it will look when exported — including page layout, margins, headers, footers, and page breaks
* Best for **fine-tuning layout** and verifying the final appearance of your document
* A new render is triggered after saving (either via the auto-save interval or a manual save)
* A **refresh indicator** shows when a new render is in progress

<Note>
  Rendering time depends on document size and current server load — it can take up to **1 minute** for large documents. Documents with many images will take longer to render.
</Note>

***

## Auto-save

Your document is **continuously synchronized with the server in real time**. Every change you make is sent to the server immediately, ensuring that an up-to-date version is always persisted.

You can trigger a manual save by pressing **⌘S** (Mac) or **Ctrl+S** (Windows/Linux), or by clicking the **save icon** next to the document name in the top bar.

### Save icon states

The save icon next to the document name indicates the current sync status:

| Icon                                           | State                | Description                                                                     |
| ---------------------------------------------- | -------------------- | ------------------------------------------------------------------------------- |
| <Icon icon="save" size={16} color="#22c55e" /> | **Synced**           | All changes have been saved successfully                                        |
| <Icon icon="save" size={16} color="#8b5cf6" /> | **Auto-save active** | Auto-save is enabled — changes will be saved automatically at the next interval |

In addition to continuous sync, **snapshots** are automatically created at regular intervals. These snapshots can be accessed through the [Version History](/getting-started/editor/sidebar-history) panel to review or restore previous states of your document.

<Note>
  On unstable network connections, synchronization may be interrupted temporarily. Changes made offline will be synced once the connection is restored. If you've had the editor open for a long time without activity and experience issues, a simple **page reload** will re-establish the connection and resolve most problems.
</Note>

***

## Real-time validation

The editor highlights syntax errors and warnings directly in the code. **Clicking on an error or warning** navigates you directly to the line where the problem occurs. Hover over an underlined section to see the error message in a tooltip.

### Errors

**Red underlines** indicate syntax errors — for example, invalid attribute values or unclosed directives. Documents with errors **cannot create a new version** and will **not trigger a new PDF render** or any other export format.

<Frame>
  <img src="https://mintcdn.com/centerbit/xsS3MEtCpKEJ0qMD/images/application/editor-overview/validation-error-image-width-must-be-number.png?fit=max&auto=format&n=xsS3MEtCpKEJ0qMD&q=85&s=ae738325b461cdd8f32e31dde72e5959" alt="Validation error — image width must be a number" width="1409" height="351" data-path="images/application/editor-overview/validation-error-image-width-must-be-number.png" />
</Frame>

### Warnings

**Yellow underlines** indicate warnings — for example, missing citation references or undefined abbreviations. Documents with warnings can still be **saved and rendered** normally, but you should review them to ensure the output is as expected.

<Frame>
  <img src="https://mintcdn.com/centerbit/xsS3MEtCpKEJ0qMD/images/application/editor-overview/validation-warnings-citation-and-abbreviation-notfound.png?fit=max&auto=format&n=xsS3MEtCpKEJ0qMD&q=85&s=a99b27810506605361087346ddd7184f" alt="Validation warnings — citation and abbreviation not found" width="1412" height="362" data-path="images/application/editor-overview/validation-warnings-citation-and-abbreviation-notfound.png" />
</Frame>

***

## Real-time collaboration

When multiple users have the same document open, their **avatars** appear in the top bar so you can see who is currently active.

<Frame>
  <img src="https://mintcdn.com/centerbit/xsS3MEtCpKEJ0qMD/images/application/editor-overview/colaboration-users-topbar.png?fit=max&auto=format&n=xsS3MEtCpKEJ0qMD&q=85&s=85454197030b70bcbda5d79edfd8fa12" alt="Collaborator presence indicators in the top bar" width="543" height="118" data-path="images/application/editor-overview/colaboration-users-topbar.png" />
</Frame>

Inside the editor, each collaborator has a **colored cursor** and their **text selections** are visible to everyone. Hover over a cursor to see who is typing. All changes from other users appear in real time.

<Frame>
  <img src="https://mintcdn.com/centerbit/xsS3MEtCpKEJ0qMD/images/application/editor-overview/multiple-users-cursor-in-editor.png?fit=max&auto=format&n=xsS3MEtCpKEJ0qMD&q=85&s=86c9da9c0cd3b74115bf3f313c6ecc60" alt="Live cursors and selection sync in the editor" width="385" height="164" data-path="images/application/editor-overview/multiple-users-cursor-in-editor.png" />
</Frame>

***

## Export

Click the **download button** in the top bar to export your document:

<Frame>
  <img src="https://mintcdn.com/centerbit/xsS3MEtCpKEJ0qMD/images/application/editor-overview/export-button.png?fit=max&auto=format&n=xsS3MEtCpKEJ0qMD&q=85&s=12cf4c93d06f943e1d09ef9b686b8794" alt="Export button in the top bar" width="466" height="200" data-path="images/application/editor-overview/export-button.png" />
</Frame>

| Format   | Description                                           |
| -------- | ----------------------------------------------------- |
| **PDF**  | Portable Document Format — most common for sharing    |
| **DOCX** | Microsoft Word format — editable in Word, Google Docs |
| **ODT**  | Open Document Format — editable in LibreOffice        |

<Tip>
  The exported document will look virtually identical to the **PDF preview** (\~99% match). Minimal differences may occur if a font is rendered slightly differently between the preview and the export engine.
</Tip>

***

## Sidebar panels

The sidebar on the left provides access to all document management panels. Click an icon to open the corresponding panel.

| Icon                                     | Panel                                                          | Description                                     |
| ---------------------------------------- | -------------------------------------------------------------- | ----------------------------------------------- |
| <Icon icon="file-text" size={16} />      | [Documents](/getting-started/editor/sidebar-documents)         | Switch between documents in the current project |
| <Icon icon="history" size={16} />        | [Version History](/getting-started/editor/sidebar-history)     | View and restore previous versions              |
| <Icon icon="variable" size={16} />       | [Variables](/getting-started/editor/sidebar-variables)         | Manage document variables                       |
| <Icon icon="layers" size={16} />         | [Bulk Generation](/getting-started/editor/sidebar-bulk)        | Generate multiple documents from a template     |
| <Icon icon="book-a" size={16} />         | [Abbreviations](/getting-started/editor/sidebar-abbreviations) | Define abbreviation expansions                  |
| <Icon icon="book-open" size={16} />      | [Citations](/getting-started/editor/sidebar-citations)         | Manage bibliography sources                     |
| <Icon icon="image" size={16} />          | [Images](/getting-started/editor/sidebar-images)               | Upload and manage document images               |
| <Icon icon="palette" size={16} />        | [Styles](/getting-started/editor/sidebar-styles)               | Manage and apply document style presets         |
| <Icon icon="brain" size={16} />          | [Knowledge Base](/getting-started/editor/sidebar-knowledge)    | Attach reference documents for AI context       |
| <Icon icon="sparkles" size={16} />       | [AI Assistant](/getting-started/editor/sidebar-chat)           | Chat with AI to edit your document              |
| <Icon icon="message-circle" size={16} /> | [Comments](/getting-started/editor/sidebar-comments)           | Add and manage inline comments                  |

### JSON View

At the bottom of the sidebar, a **JSON view** toggle lets you switch from Markdown editing to the raw JSON document schema. The JSON represents the **complete document structure** — it can be used directly with the [Developer API](/api-reference/introduction) and contains everything except uploaded media files.

<Frame>
  <img src="https://mintcdn.com/centerbit/xsS3MEtCpKEJ0qMD/images/application/editor-overview/editor-json-editor-view.png?fit=max&auto=format&n=xsS3MEtCpKEJ0qMD&q=85&s=fe269c4ad090ab530e8245262f9b4379" alt="JSON view of the document schema" width="2093" height="1274" data-path="images/application/editor-overview/editor-json-editor-view.png" />
</Frame>

In the top-right corner of the JSON editor, you'll find a **"Read-only"** button. By default, the JSON view is read-only for safe inspection. Clicking this button enables editing mode, allowing you to modify the JSON directly.

<Warning>
  Only edit the JSON if you have a solid understanding of JSON and the document schema format. Invalid changes can break your document. JSON editing is **not available during live collaboration sessions** to prevent inconsistent document states between collaborators.
</Warning>