A drag-and-drop canvas for placing content on top of the page canvas - the visual counterpart to hand-editing layout JSON. Open it from Project Files by tapping overlay.json (or any other layout partial file).

Before you start: Project Properties

Set up the page itself first - see Project Properties for choosing between a physical base.pdf and a generated blank canvas.

The canvas

• Palette (left side) - drag a block type onto the canvas to create it: Text, Image, Box, Signature, QR Code, Grid. See Block Types Reference for what each one does.
• Zoom - pinch, mouse wheel, or the on-screen +/− buttons; the reset button snaps back to fit.
• Pan - two-finger drag on a trackpad, or hold Space and drag.
• Select a block by tapping it. Drag on empty canvas space (including the gray area beyond the page) to box-select multiple blocks at once: drag left-to-right to select every block fully inside the box, or right-to-left to select every block the box touches. A plain click on empty space (no drag) clears the current selection. Hold Shift while dragging or clicking to add to the selection, Ctrl to remove from it.
• Arrow keys nudge the selection (one block or several) by 1mm at a time; Delete removes it.
• With multiple blocks selected, click one of them (or press Enter) to open the Align panel: pick a reference point on the 3×3 grid, then tap Align Horizontal (X) or Align Vertical (Y) to line the selection up along that axis against the last-selected block (shown with a thicker border).
• A multi-selection also shows its own bounding-box outline with resize handles - drag one to resize every selected block proportionally at once, each still respecting its own minimum size.
• Right-click / long-press a block (or use its properties panel's ⋮ menu) for Send to Front, Send to Back, and Delete.

Block properties

Tap a block to open its properties panel - every block gets position/size (in mm) and an optional condition (hide it unless an expression is true - see Scripting & Processing), plus whatever's specific to its type (text content, colors, image source, signature field, QR data, grid columns, and so on). Full reference: Block Types Reference.

A text block's content and a QR code's data both accept either plain static text, or a {...}-wrapped expression for anything dynamic - pulling in a submitted value, formatting it, building it from multiple fields. A grid's data works the same way but without the {...} wrapper (it's always a formula, never a mix of literal text and expressions). All of it is real JavaScript, evaluated when the PDF is generated. See Block Types Reference for the exact syntax and examples.

Saving

• The app bar title gets a * suffix whenever there are unsaved changes; the save icon appears in the same spot.
• Closing with unsaved changes prompts to discard or go back and save.
• If the file changes outside the app while you have it open (e.g. you hand-edited the JSON in another editor), a banner offers to Reload (discard in-app changes, pick up the external ones) or Dismiss.

Limitations to know about

• The canvas only shows and edits the first page. Blocks carry an optional page number (for multi-page base.pdf documents), but there's no in-app page switcher yet - to place content on page 2 and beyond, edit the layout JSON directly (the Script Editor edits any plain-text file, not just scripts, or use any external editor) and set "page": 2 (etc.) on those blocks.
• A block's own data/text expression can only see submitted form data, not anything computed elsewhere in the pipeline other than via process.js's presentation data - see Scripting & Processing.