Docs / Using the editor

Writing in the editor

A text editor on the left, the live diagram on the right, and a few tools that keep the two in step.

#The workspace

The editor at volley.sh/edit has three parts:

• The toolbar along the top, with the diagram's title, its save status, the layout buttons, the Share menu and the Settings and help menu (the gear).
• The source pane on the left, where you write.
• The diagram pane on the right, which redraws as you type, with a bar of diagram tools along its bottom.

The sidebar on the far left takes you to the rest of Volley: your diagrams, collections, capture tools, these docs and the syntax guide. Collapse it to a rail of icons with the button at its bottom.

#Layouts

The three layout buttons in the toolbar switch between Source only, Source and diagram, and Diagram only. Volley remembers your choice. On narrow screens there is no side-by-side layout, so you switch between source and diagram.

In the side-by-side layout, drag the divider between the panes to resize them. You can also focus the divider and use ← and → (hold Shift for bigger steps), Home and End for the narrowest and widest source pane, or double-click it to reset.

#Writing

The source pane is a plain text editor with a few helpers.

#Highlighting

Lane names, arrows, keywords, payload keys, strings, numbers and comments are each coloured, so a typo stands out. Values that look like secrets are coloured as a warning, which is a reminder to replace them with <redacted>. The line with the caret is highlighted.

#Indentation and comments

• Tab inserts two spaces, or indents every selected line.
• Shift+Tab removes indentation from the selected lines.
• Enter keeps the current indentation, and adds a level after an if, else or group line.
• Ctrl+/ comments or uncomments the selected lines.

Because Tab indents, it does not move focus out of the editor. Press Esc first, then Tab, to leave the editor with the keyboard.

#Lane name suggestions

When you start typing in a place where a lane name goes, Volley suggests the lanes already in the diagram: at the start of a line, after an arrow, and in order: and note lane lists. Names that start with what you typed come first.

• ↑ and ↓ move through the suggestions.
• Enter or Tab accepts one, or click it.
• Esc closes the list.
• Ctrl+Space opens the list even before you type. It is Ctrl on every platform, including Mac.

Suggestions never appear inside message text or inside fenced code.

#Problems

The bar under the editor reports problems. With none, it says No problems. Otherwise it shows a count, such as "2 errors, 1 warning", and the first problem with its line number. Click the problem to jump to that line, or expand the count to see every problem.

Lines with problems are also marked in the line number gutter. Hover the mark to read the message.

Errors never stop the drawing. Volley draws everything it understands and leaves out only the lines it cannot read. When the source pane is hidden, an errors chip appears in the toolbar; click it to open the editor at the first error.

See Troubleshooting for what each message means.

#The source and the diagram stay in step

• Move the caret and the diagram highlights the elements on that line or in your selection, and scrolls to show them.
• Select an arrow in the diagram and the editor highlights its source lines, including its in: and out: blocks.
• The pencil button in the inspector, Edit line, jumps to a message's source.
• Find in source in a lane's menu jumps to the first line that names that lane.

#Drafts, files and undo

• Drafts. Signed out, your diagram is saved in this browser as you type, and it is there when you come back. Signed in, it is saved to your account. See Accounts and saving.
• New diagram in the sidebar starts a fresh diagram with one starter arrow.
• Open a file. Choose Open a file in the Share menu, or drop a file anywhere on the editor. Volley opens .volley and .txt files, and PNG images exported from Volley, which carry their source inside them. Dropping a .har file opens the HAR import instead.
• Undo. The browser's undo works for everything you type, including indenting and commenting. Actions that replace the whole diagram, such as opening a file, renaming a lane or updating from a recording, show a notice with an Undo button.

#The title and save status

The toolbar shows the diagram's title:, or "Untitled diagram" when there is none. Hover it to see how many lanes, messages and payloads the diagram has.

Next to it, the save status tells you where your work is:

#Appearance

Choose Light, Dark or Match system from the gear menu or from the appearance button at the bottom of the sidebar. Downloads and exports follow the appearance you pick.

#Agent view

Press Alt+Shift+A (Option+Shift+A on Mac), or choose Agent view in the gear menu, to see the page the way an AI agent reads it: the source in a text box and the diagram as plain text. Press Esc to go back. See In-page agent tools.