The page editor
Layout
- Header: title, path (click opens the page), Published, preview on/off, Save.
- Tabs: HTML · Blocks (only for pages built from blocks, see 7.6) · CSS · JS · Head · Settings.
- Live preview on the right. The divider can be dragged (double-click resets it; with focus, also via the arrow keys). At the top you choose Desktop, Tablet or Mobile.
The preview shows unsaved changes – including to CSS and JS files. It runs in an isolated environment: scripts are executed but cannot access the admin or the API. For Catch-All pages there is a Subpath field to simulate e.g. mein-artikel.
Template data: Below the preview you can expand the Template data panel (it starts collapsed; its height can be dragged at the edge). It shows what this page’s templates see: the variables (page, site, route, today …), the result of nav() and children(), all Collections with their fields and the first 20 entries of data("slug"), as well as the REST data sources, whose data you load with Fetch. You expand objects and lists level by level. When you hover over a row, {{ }} inserts the matching expression into the HTML tab, such as {{ nav().0.title }}. For lists, {% for %} inserts a loop over it. The panel follows an unsaved title, SEO title and Subpath. Local variables from loops, {% set %} or component parameters only come into existence during rendering and are therefore missing. For those, {{ wert|json }} in the preview helps.
HTML tab
The page’s HTML – without <html>, <head> and <body>; the CMS adds the scaffolding itself (including charset, viewport, title, description, CSS and JS). If you do write a complete document with <html>, it is taken over unchanged and CSS/JS are inserted before </head> and </body> respectively.
Toolbar:
| Button | Function |
|---|---|
| Snippet | Insert a Snippet: as Content (copy), as Include (reference) or – for Snippets with slots – as a Component with prepared fill blocks. |
| Image | Choose an image from the file manager, set alt text, sizes and CSS class → a finished <img> with srcset. Alternatively as the template tag {{ image(…) }}, which always uses the current alt text. |
| File link | Insert a link to a file (e.g. a PDF). |
| Data | Insert a loop over a Collection or REST source – with all fields prepared. |
| Format | Indent the code neatly (Prettier). Template tags are preserved exactly. |
| Template help | Cheat sheet of all template functions. |
Emmet
Emmet is built into the HTML and CSS editor. While you type, a recognized abbreviation is underlined with dots and a preview is shown below it:
| Input + Tab | Result |
|---|---|
ul>li.item*3 |
list with three <li class="item"> |
section.hero>h1+p{Text} |
nested elements with content |
a[href=/kontakt]{Kontakt} |
link with attribute |
m10 (CSS, inside a rule) |
margin: 10px; |
bgc#f00 (CSS) |
background-color: #ff0000; |
Without a recognized abbreviation, Tab indents as usual. Esc discards a marker if you didn’t mean to type an abbreviation at all. More shortcuts: Ctrl+E (expand), Ctrl+⇧+A (wrap selection with abbreviation), Ctrl+⇧+D (select surrounding tag). If you rename an opening tag, the closing one follows.
Formatting
Format (or Shift+Alt+F) brings the code into a readable form – ideal for imported pages, which are often on a single line. Ctrl+Z undoes it in one step.
- Template tags (
{{ … }},{% … %}) are protected beforehand and reinserted exactly. - Where additional whitespace would be visible (e.g. between links directly next to each other), Prettier breaks lines differently, such as
</a\n><a. This looks unusual but doesn’t change the rendering. - If the HTML is faulty (e.g. an unclosed tag), a message with line and column appears – the code stays unchanged.
Head tab
Additional content for <head>: meta tags, Open Graph information, fonts, analytics. Template syntax is allowed:
<meta property="og:title" content="{{ page.meta_title }}">
<link rel="canonical" href="https://www.firma.de{{ page.path }}">