The coding panes

Five panes sit under the preview, each connected to one real file on disk. They are not a view of a buffer that gets written later: the file is the document.

HTML

The primary pane. The folder icon at its left connects your main HTML or template file, which is what loads into the preview.

In Creative Mode this pane and the structure tree are the same document seen two ways — add to the tree and it appears here; type here and the tree follows.

In Framework Mode it holds the file as text.

The bar also carries a <head> button in Full HTML mode, for everything above your markup.

CSS

Not a view of your whole stylesheet. It focuses on the rule for whatever you have selected, which is what you want ninety per cent of the time.

Nested CSS works, so hover states, pseudo-elements and media queries all belong inside the block you are already editing.

The globe icon opens the whole stylesheet when you do want the file.

Globals

For the file holding your variables and design tokens — one source of truth for the project’s colour, type and spacing.

Connecting the design system explains how this file is shared with GenCSS, and how the generated and hand-written parts of it stay out of each other’s way.

JavaScript

Behaviour, attached to the element selected in the tree, so logic stays next to the markup it drives. The expanded view gives you the whole file for anything global.

Assets

Images, fonts and media, with your project’s real folders. Drag a file in from the desktop and it lands in the project.

It has its own page: Assets and images.

Saving

By default, edits in the panes are written as you type and the preview follows.

Preferences → Manual save changes that if you would rather press save, and an expanded full-screen editor always asks you to save regardless — a full editor parses as you type, and that does not combine safely with a file that writes as you type.

The collection entry panel never autosaves, whatever this preference says.

Syntax highlighting

On, in the HTML, JavaScript and Globals panes, in both modes.

The CSS pane is a plain field, because it holds one rule rather than a file and there is nothing much to colour.

In Framework Mode, Deep Code Mode turns the panes into full editors with a save button — see Creative Mode and Framework Mode.

Emmet

Works in every pane and in the expanded editors. Type ul>li*3 and press Tab.

Expanding

The expand icon at a pane’s top right opens it full screen. Syntax highlighting, Emmet, inserts and a save button.

Resizing and hiding

Panes drag to resize. The minimise button collapses one to its title bar, and Preferences → Panel Visibility hides one you never use.

More panes

The + buttons add panes connected to other files: another HTML file, another stylesheet, another script, or plain text for a .env, a JSON file or anything else the project needs.

The touch bar along the bottom of a pane inserts values and snippets without typing them — see Inserts.

Extra panes need a licence.