doclinthDocs

Visual editor

The Design tab in the template editor lets you edit a template by eye: select any element on the rendered page and move, resize, recolour or restyle it — no CSS required. It sits alongside the Code and Tests tabs; open it whenever you want to nudge a logo or change an accent colour without hunting through markup.

Selecting elements

  • Click any element to select it. A breadcrumb of its ancestors appears above the page.
  • Click a selected element again to step up to its parent container.
  • Elements repeated by {{#each}} share one source element, so selecting any instance selects them all — a badge shows how many. Editing one edits every copy, which is the right behaviour for a template.
  • Elements whose attributes come from Handlebars expressions are selectable but read-only here — edit their style in the code editor.

Moving, resizing & snapping

  • Drag a selected element to reposition it. Flow elements move with a relative offset, so siblings never reflow and the change is trivially reversible.
  • Dragging snapsthe element’s edges and centre to the page margins, page breaks and neighbouring elements, with a magenta alignment guide. Hold ⌥ Alt while dragging to place it freely.
  • Resize with the eight handles. The original unit (%, mm or px) is preserved. If a flex, grid or table parent overrides the size, the inspector says so rather than silently lying.
  • Arrow keys nudge the selection by 1px; hold ⇧ Shift for 8px.

The inspector

The right-hand rail edits the current selection:

  • Position & size — exact X/Y offsets and width/height, each with a Reset that removes the override.
  • Colour — text, fill and border, from a hex field, the palette harvested from your own document, or a fixed library of swatches.
  • Type — family (from the renderer’s font list), size, weight, line height, letter spacing, italic/underline/strikethrough, alignment and case.
  • Box — padding, margin, border width/style, corner radius, drop shadow and opacity.

If a stylesheet !important rule beats your inline edit, the inspector names the offending selector so you can fix it in the code editor. Every edit is a single ⌘Z/⌘⇧Z undo step.

Proof stays the source of truth

The Design surface renders your template in the browser for fast, interactive editing, but the Proof — the real PDF from the render service — remains the ground truth for pagination and fidelity. After your edits settle, the editor quietly flags when the proof no longer matches your draft and offers a one-click re-render; it never renders behind your back. When the layout matters, render a fresh proof and, before going live, run document tests.

What it deliberately doesn’t do

  • It is a tweak layer, not a drag-and-drop canvas: it won’t add or delete elements. Structure lives in the code editor or comes from AI authoring.
  • Templates with dynamic tag names (<{{tag}}>) or badly broken markup can’t be mapped safely; Design mode says so and points you back to the code editor.
  • Remote images may show broken in the Design surface even though they render fine in the Proof — a rendering-security constraint, not a problem with your template.