The Editor

Pages, blocks and components are all written in one place: the editor. It works the way a code editor does - a list on the left, a tab for everything you have open, the text and a live preview in the middle, and a settings dock on the right. This tutorial walks through a working session: opening things, writing with colour, previewing, saving, and setting the editor up the way you like it, smooth typing included.

---

The screen

Open any page from Pages and you are in the editor. Five parts:

• The list (left): This page - the blocks and components the open page uses - then every page as a tree, every block and every component. A filter box at the top narrows all three. Ctrl+Shift+E hides and shows it.
• The tabs (top): one for each page, block or component you have open, in the order you opened them. A dot on a tab means unsaved work.
• The editor and the preview (middle): the text on the left, the page as your site will show it on the right. Drag the divider between them.
• The status bar (bottom): where you are, Unsaved, Discard, Save and Save all.
• The dock (right, the sliders button at the top right): the page's details, SEO, DConfig and history. On a block's tab it holds the block's details and sample values; on a component's, its details and preview props.

The banner above the editor names what you are on - Pages › About, Blocks › contact-card, Components › counter - and the address bar follows the tab, so a bookmark or a link always opens the right thing.

Opening things

Everything in the list opens with a click, as a tab. So does Edit in the Pages, Blocks and Components lists, and so does an address someone sends you. If the editor is already up, the new tab joins the ones you have; nothing you were doing is disturbed.

The + beside each section makes a new one. A new page opens straight away as a tab. A new block or component asks for its name first (lowercase letters, digits and hyphens - it becomes the tag, so it cannot change later), is created, and opens.

Close a tab with its ×, a middle-click, or Delete with the tab focused. Right-click a tab for more: close the others, close those to its right, close all, move it left or right, clone the page or duplicate the block or component, or copy its link. The open tabs are remembered: reload, or come back tomorrow, and they are where you left them.

Try it: open About, then click a block under This page, then a component from the Components section. Three tabs. Click between them - each keeps its own text, scroll position and unsaved changes.

Writing

A page

The page is Markdown with shortcodes, and the text is coloured as you type: headings, code, emphasis, links and lists in Markdown's colours, and every [shortcode] - its opening tag, its closing tag, a self-closing one - in its own, so a block or a card stands out from the prose around it. The toolbar inserts shortcodes with a dialog each; right-click inside one to edit its attributes or jump to the block it names. Long shortcodes fold (the chevrons in the gutter, or the fold-all button).

A block

A block's tab has two parts, HTML and CSS, in the same editor the page uses, coloured for each language. The Format button tidies the HTML's indentation. The dock's Block panel shows its short tag and shortcode (copy either), its project, Bundled and where it is used; Samples is one value per {{placeholder}} - right-click one to insert the placeholder into the template.

A component

A component's tab has four parts - <template>, <props>, <script> and <style> - coloured as HTML, JSON, JS and CSS. It is compiled as you type; the dot beside the parts says Compiles or Does not compile, and the errors show above the text. The dock's Preview props are the values the preview tries - change one and the preview updates; right-click a row to copy it as an attribute or a whole tag. A component from a plugin opens read only, with Copy to a new component to make your own.

Previewing

Three layouts, from the toolbar's three buttons or Ctrl+\ to cycle: editor and preview side by side, editor only, preview only. Preview only adds the width presets (full, tablet, phone), Refresh and Share link - a link that lets someone see the page before it is published, without signing in, that expires and can be revoked.

The preview is the real page, rendered by your site with your theme, fonts and custom CSS, and it shows your unsaved changes - to the page and to any open block it uses, outlined so you can find it. A block no open page uses is drawn on its own, its placeholders filled from the sample values. A component is drawn on its own too, with its preview props.

Saving

Save (Ctrl+S) saves the tab you are on. On a page, that includes the blocks of its you changed - and if one of them is also used elsewhere, you are told where and asked first, once. Save all saves every open page, block and component with changes. A component that does not compile is not saved, and the status bar says so.

Nothing is lost by closing a tab or leaving the editor: unsaved work is kept as a draft and comes back when you open that page, block or component again. Leaving the editor itself with unsaved work asks first, and Cancel keeps you where you were. Discard throws away the current tab's changes.

Setting the editor up

The cog in the banner opens the editor settings, kept per browser:

• Font, size and line spacing: the lettering of the text, the gutter and the colours - all three follow the same setting, on pages, blocks and components alike. Monospace fonts keep shortcodes and Markdown lined up.
• Wrap long lines: off, a long line scrolls sideways and each line number is exactly one line.
• Caret movement - smooth typing. Smooth draws the caret as a small light that glides from letter to letter as you type and move, instead of jumping, so your eye never loses it on a busy line. Typing, selecting, undo and dictation are exactly as before: only the caret you see is animated. Automatic is smooth unless your system asks for reduced motion; Native is the browser's own caret. The choice reaches every text box in the admin and your site's forms in this browser.
• Close the admin menu when the editor opens: the left-hand menu folds to its icon rail for the room while you edit, and comes back when you leave the editor.

The fullscreen button hides the admin around the editor. On a narrow screen the list and the dock slide over the text instead of sitting beside it.

Keys

Key	Does
Ctrl+S	Save the tab you are on
Ctrl+\	Next layout: split, editor only, preview only
Ctrl+Shift+E	Show or hide the list
Ctrl+B, Ctrl+I, Ctrl+K	Bold, italic, link in the page text
Tab / Shift+Tab	Indent and dedent in a block's or component's source
Delete on a tab, Shift+F10	Close it; its menu

Where next: Pages for frontmatter, visibility and history, Blocks for placeholders and collection displays, the Components walkthrough to build one from scratch.