# Code pane and live preview

The text editor is a split view: source on the left, rendered diagram on the right. The preview updates as you type, which turns learning a diagram language into a fast feedback loop rather than a documentation exercise.

The split itself is draggable, so you can give whichever side needs the room.

![image-20260907-090124.png](https://help.gocapable.com/images/91f10c1e-6076-4e40-88c6-415f91ec3eab.webp)

---

## What this is for

* Writing any text diagram.
* Learning a language by trying things and seeing what happens.
* Reading a long source while checking the result.

---

## How it works

| **Action**       | **How**                                                 |
| ---------------- | ------------------------------------------------------- |
| Resize the split | Drag the divider between the panes.                     |
| Preview refresh  | Updates as you type, settling once you pause.           |
| Errors           | Shown in place of the diagram, usually naming the line. |
| Zoom the preview | The preview has its own zoom controls.                  |
| Save             | Explicit, from the editor toolbar.                      |

---

## A few things that catch people out

* A preview that stops updating usually means a syntax error; the error replaces the diagram.
* The preview is the same renderer used on the page, so what you see is what gets published.
* Give the code pane the space when writing, and the preview the space when reviewing.

---

## Related

[Change the diagram languagePicking it, and changing your mind.](https://help.gocapable.com/diagrams/change-the-diagram-language.html)

[Code editor themes and wrappingMaking long source readable.](https://help.gocapable.com/diagrams/code-editor-themes-and-wrapping.html)

[Text editorBack to the editor overview.](https://help.gocapable.com/diagrams/text-editor.html)

---

_The source is right there. Read it._