Pubvay Help

What it's for. Each template is a ready-laid-out dispatch with sample copy. Faster than building from scratch; you replace the words and images.

Quick way

Dashboard → New Dispatch form → pick a template from the dropdown → Create.

Templates available

• Newsletter — cover, lead article, two short articles, sign-off. 5 pages.
• Magazine Feature — cover, lede, multi-section body with pull quote and sidebar, close. 4 pages.
• Slide Deck — title, agenda, section divider, content, big stat, quote, contact. 7 pages.
• Poster — one tall page: kicker, hero headline, 3 stat columns, CTA link.

Tips

• Templates ship with all four context layouts (mobile, tablet, desktop, large) already filled in. Tune any of them later.
• You can replace the sample text in place — every block is just a regular block once the project exists.

What it's for. A dispatch reads on phones, tablets, laptops, and big monitors. The renderer picks the right layout for the reader's screen width. You author each layout in the composer.

Quick way

Top of canvas → the context selector (Mobile · Tablet · Desktop · Large).

Breakpoints the renderer uses

• Mobile — 0–700 px
• Tablet — 701–1050 px
• Desktop — 1051–1800 px
• Large — 1801 px+

Tips

• When you switch context for the first time, the layout is auto-adapted from an existing one. The orange "✨ Auto-adapted from another view" hint reminds you to drag, resize, or tweak fields so the design feels right for that size.
• Block content is shared across contexts unless you toggle Override for this view in the Inspector → Content section.
• Block typography (font, size, color) can be different per context. The blue dot on a field in the inspector means "this context has a custom value."

What it's for. The canvas is the artboard for the current context. The grid is a visual ruler; snap forces drag/resize to land on grid lines.

Where

Settings (gear icon) → Canvas Grid section.

Settings

• Page Fit — Single screen uniformly scales the artboard to fit the reader's window. Fit width, scroll vertically lets long pages scroll.
• Artboard Width / Height — pixel dimensions. The renderer always shows your design at these dimensions, just scaled.
• Grid Size — gridline spacing (default 24 px). Smaller = finer control, more visual noise.
• Snap — on/off toggle. Snap to chooses between gridlines and the type scale's base unit.
• Safe Margin — a "don't place near the edge" area visualized in the grid. Useful when content might be clipped by reader chrome.

Tips

• Hold Shift while nudging with arrow keys to move by one grid unit instead of one pixel.
• If your design feels cramped or sparse at a context, change the artboard dimensions there — every other context stays unchanged.

What it's for. Build a page by stacking blocks: headings, body text, lists, images, dividers, etc.

Quick way

Inspector → Add section → choose a type → click Add Block.

Block types

• Heading / Subheading / Deck / Body — text at decreasing emphasis.
• Eyebrow (kicker) — small label above a headline, often colored.
• Byline / Caption / Credit — meta text.
• Pull Quote — featured quote, styled separately from body.
• Sidebar — boxed aside.
• List — bullet or numbered (toggle in Content section).
• Stat Grid — value/label pairs.
• Image — placed from your asset library.
• Button Link — internal navigation to another page.
• Divider / Spacer — visual rule and empty space.

Tips

• New blocks land in the next free slot on the page.
• Block defaults (size, font stop) come from sensible per-type presets. Change one block, then click Save Block Default to make that style the new default for new blocks of the same type.

Action	Shortcut	Menu
Copy	⌘C	Edit → Copy block
Paste (any page or context)	⌘V	Edit → Paste block
Duplicate (same page)	⌘D	Edit → Duplicate block
Delete	⌫	Edit → Delete block

Step by step — paste to another page

1. Click the block → ⌘C.
2. Switch to the destination page using the page dropdown.
3. ⌘V. The pasted block lands slightly offset so it's visible.

Tips

• The clipboard holds one block at a time and lives in memory only. It clears on reload.
• Paste carries over the block's full styling, including any paragraph style reference. If the destination project doesn't have that style defined, the block falls back to its explicit values.
• Shortcuts are skipped while you're typing in a text input — native field copy/paste keeps working.

Quick way

• Shift + click to add a block to the selection; shift + click again to remove it.
• Plain click outside the group → resets to just that block.
• Drag any selected block → the whole group moves by the same amount.
• ⌫ → deletes everything currently selected.

Distribute

Select 3 or more blocks → Inspector → Distribute H (horizontal) or Distribute V (vertical). The outer two stay put; middle blocks move so the spacing between leading edges is equal.

Align (single or group)

Same Inspector row: Left · Right · Top · Bottom · Center X · Center Y. These align to the page bounds.

Tips

• The Inspector always shows the primary selection (the last block you clicked). Editing inspector fields only affects that block.
• Locked blocks (Inspector → Lock frame) stay put during group drag.
• Distribute is a no-op with fewer than 3 selected — use Center X / Y for centering two.

Quick way

Inspector → Content → toolbar above the textarea: B · I · U · Link.

Step by step

1. Click in the textarea, select the text you want to format.
2. Click the matching button. The selection is wrapped with the tag, e.g. <b>bold</b>.
3. Click Apply Content to push the change to the canvas.

Allowed tags

<b>, <strong>, <i>, <em>, <u>, <br>, <a href="…">. Anything else (scripts, styles, custom tags) is escaped to literal text on save.

Tips

• You can type tags directly in the textarea — useful for pasting pre-formatted copy.
• Links must use http://, https://, / (relative), or # (anchor). Other schemes are stripped.
• Links automatically get rel="noopener noreferrer" when rendered.

Quick way

1. Add Block → List.
2. In the Content section, type one item per line. Hit Apply Content.
3. Toggle Numbered list below the textarea to switch between bulleted (default) and numbered.
4. Or click Add Row to append a placeholder "New item" line, then type over it.

Tips

• Blank lines are dropped — only non-empty lines become list items.
• Inline formatting works inside list items: <b>, <i>, <a href="…">, etc.
• The bullet/number color follows the dispatch accent color.

Quick way

Select a Body block → Inspector → Body Layout → check Drop cap (lead-in).

Tips

• Only the first paragraph of the body gets the drop cap. If the block contains multiple paragraphs (rare), only the first letter of the whole block is affected.
• The drop cap floats left for ~3 lines. If the block is too short, it may overflow visually — make the block taller.
• Drop cap colour matches the dispatch accent color.

What it's for

Sometimes you want a shorter headline on mobile, a different caption on desktop. Per-context content overrides let one block carry different text per layout — no extra blocks.

Quick way

1. Switch to the context you want to differ (e.g. Mobile).
2. Select the block.
3. Inspector → Content → check Override for this view.
4. Edit the text in the textarea → Apply Content.

Other contexts continue to show the block's shared content.

Tips

• Uncheck the override to clear it and re-inherit the shared content.
• Edits to the shared content (override off) overwrite all contexts — including ones with no override set.

Settings (gear icon) → Canvas Grid → Page Fit

• Single screen — fit both dimensions. The renderer uniformly scales the whole artboard so it fits the viewport. Used for covers, posters, slide-deck pages, anything that should be "all visible at once."
• Fit width — scroll vertically. Scales to fit width; long pages scroll down. Used for articles, newsletters, anything with more content than fits a single screen.

Tips

• Fit applies to the current context. You can have desktop be scroll and mobile be single-screen if it suits the content.
• In scroll mode, height has no upper bound from the renderer's perspective — make the artboard as tall as the content needs.

Align (Inspector)

Six buttons: Left · Right · Top · Bottom · Center X · Center Y. They align the selected block (or the multi-selection bounding box) to the page bounds.

Lock frame

Inspector → toggle Lock frame. The block can't be dragged or resized until unlocked. Useful for backgrounds, decorative elements you don't want to bump accidentally.

Hide in this layout

The toggle next to Lock. Removes the block from the current context only — useful when a block makes sense on desktop but not mobile.

Tips

• Locked blocks still respond to group drag of unlocked blocks — they stay put while the rest moves.
• Hidden blocks remain in the data; toggle off to bring them back.

Page background

Inspector → Page tab → Background. Choose Color / Gradient / Image.

Block background

Select the block → Inspector → Background. Same control set; applies to that block.

Image backgrounds

• Source — pick from the Asset library (uploads go to Cloudflare Images automatically).
• Fit — Cover (fills, may crop) / Contain (fits, may letterbox) / Fill (stretches) / Tile / None.
• Focal point — drag the dot to anchor the visible part when cropping.
• Opacity — 0–1 alpha.

Tips

• For solid colors, use the picker or paste a hex value (#RRGGBB).
• Gradients support Linear (angle adjustable) or Radial.
• Background image opacity blends with the underlying color — good for muted hero images.

Where

Inspector → Appearance section.

Controls

• Padding — uniform inside spacing in pixels (or a scale stop).
• Border color / width / radius — solid border on all four sides.
• Background color — fill behind the block. The × button clears it.
• Opacity — 0–1 alpha for the whole block.

Tips

• To make a "card" — set background color + padding + border radius. Border width is optional.
• Use the scale-stop dropdown next to numeric inputs to keep padding/radius consistent across the dispatch.

Where

Select a Body block → Inspector → Body Layout.

Controls

• Columns — 1 to 4.
• Column gap — pick a scale stop or set custom pixels.

Tips

• Columns work best when the block is wider than tall — give it enough horizontal space.
• The renderer flows text from one column to the next automatically; you don't control individual column breaks.

What it's for

Name a typography setup ("Body Default", "Quote Italic") and reuse it everywhere. Edit the style → every block using it updates.

Quick way

• Inspector → Text Style → Style dropdown picks a style for the selected block.
• Manage… next to the dropdown opens the editor.

Step by step

1. Manage… → type a name in New style name → + Add.
2. On the right pane: pick Font, Type scale stop, optionally Line height / Align / Text color / Drop cap.
3. The preview pane updates live.
4. Save.
5. Back in the inspector, the Style dropdown now lists your new style. Pick it on a block.

Override rules

• A style provides defaults. Anything set explicitly on the block overrides the style.
• To unset an override and re-inherit, clear the inspector field (delete the value or use the × next to color pickers).

Tips

• Deleting a style doesn't break blocks that referenced it — they keep their explicit values; they just lose the style defaults.
• Styles travel with the dispatch (stored in the manifest). Export .zdx and reopen → styles come along.

What it's for

Instead of typing 16, 18, 24, 32 px ad hoc, pick stops (-2 to +5). Each stop is base × ratio^stop. Change the base for a context, every stop scales together.

Where

Settings → Type Scale section.

Defaults

• Ratio — Perfect fourth (1.333), Major third (1.250), Golden (1.618), etc.
• Base — different per context (e.g. 14 mobile, 16 desktop) so type stays readable on small screens.
• Stops — named (fine, small, body, lead, h3, h2, h1, display) so you read by intent, not by px.

Quick way to use a stop on a block

Inspector → Text Style → use the stop picker next to Font Size. Switching from "Custom px" to a stop locks the size to the scale.

Tips

• If a stop's px value looks wrong, change the base or ratio in Settings → Type Scale → every block using that stop updates.
• You can still use literal px on a per-block basis when you need an exception.

Where

Settings → Fonts button → opens the Fonts dialog.

Step by step — add a Google font

1. Fonts dialog → search the catalog.
2. Click the font to add it to the project. Selected weights are loaded automatically.
3. Close the dialog. The font now appears in the Font Family picker (Inspector → Text Style).

System fonts

System UI, Serif, Monospace are always available with no download.

Tips

• Fewer fonts = smaller dispatch export. Each Google font adds bytes.
• You can preview fonts in the dialog before adding.
• Removing a font from the library doesn't break blocks using it — they fall back to the nearest available family.

Where

Page dropdown (top of canvas) and Pages tab (right rail).

Actions

• Add page — Pages tab → + New Page. Pick a type (Cover, Article, Index, Media, Chart, NASQ).
• Duplicate — Pages tab → click the page → Duplicate. Useful for repeating layouts (e.g. multi-page features).
• Delete — page menu → Delete. Confirms first.
• Reorder — drag pages in the Pages tab to change the order.

Tips

• The page type drives the renderer's default chrome (e.g. cover pages don't show folio numbers).
• Page Title shows in the Inspector → Page section. Running Head and Show page number toggle in the same place.

Quick way

1. Add Block → Button Link.
2. In the Inspector → set Label (button text) and Target page.
3. Choose a Transition (Fade / Slide / None).

Tips

• Internal links work in the published viewer, in the .zdx exports, and in the macOS viewer.
• Use these for "Next chapter →" buttons, table-of-contents pages, or any hop the reader should make explicitly.

Quick way

• Right rail → Assets tab → + Upload. Or drag files onto the tab.
• Or, when picking an image for a block: + Upload from the picker.

What happens behind the scenes

Uploads go to Cloudflare Images. They're served at exactly the size each context needs (Cloudflare picks the variant for you) so dispatches stay fast.

Tips

• Use the asset's usage count to see how many blocks reference it before deleting.
• You can Replace… an image — every block using it gets the new image automatically.
• JPEG/PNG/WebP/AVIF are all supported. Cloudflare picks the optimal format per reader's browser.

Where

Select an image block → Inspector → Media section.

Settings

• Fit — Cover (default, fills, may crop) / Contain (fits inside) / Fill (stretches).
• Focal point — drag the dot on the image preview to anchor the visible region.

Tips

• Focal points matter most with Cover fit. The renderer keeps that point in view when cropping.
• Different contexts can have different focal points — set them per context as needed.

Save (⌘S)

Pushes changes to the server. Persists across reloads. Always free; happens often.

Save As… (⌘⇧S)

Exports the dispatch as a .zdx file and downloads it to your computer. The .zdx is a single zip with everything the renderer needs (HTML, CSS, JS, pages, media, manifest) — opens in any browser or the Pubvay macOS viewer with no internet required.

Tips

• The output filename comes from Settings → File Name. Pick something readable; URL-safe slugs are best.
• You can re-export anytime; each .zdx is a self-contained snapshot.
• Re-export after editing any styles, blocks, or images to refresh the .zdx.

Where

Dashboard → share next to a project opens the share dialog. Or Settings → Visibility.

Options

• Private — only you can open the composer. No public URL.
• Link — generates a URL like pubvay.com/d/<short-code>. Anyone with the link can read; nobody can edit.
• Public — same URL, but the dispatch is meant to be found and indexed.

The share dialog

Changing the visibility saves immediately — there's no separate confirm step. Once a dispatch is on Link or Public you also get:

• The share URL with a one-click Copy button.
• A QR code — point a phone camera at it to open the dispatch on that device. Handy for checking how a layout reads on mobile without typing a URL.

Tips

• Public link is read-only. The composer and source files are not exposed.
• Toggle back to Private to revoke the link. The short code is kept, so switching back restores the same URL.
• Public links serve the latest saved version. Edits go live as soon as they save.

Where

Dashboard → Import a dispatch… under the new-project form. Pick any .zdx and it becomes a new private project, then opens in the composer.

Why this exists

A .zdx carries everything: manifest, pages, styles, fonts, type scale and media. Because nothing is locked away in a proprietary blob, a file you exported months ago — or that someone sent you — can be re-opened and edited. Round-tripping is the whole point of the format.

What comes across

• Every page, with blocks and all four context layouts.
• Styles, the font library, type scale and named paragraph styles.
• Bundled media. Images hosted on the asset CDN stay linked by id.

Notes

• The import always creates a new project — it never overwrites an existing one. Import twice and you get two projects.
• Imports arrive as Private. Set visibility yourself afterwards.
• The index.html inside the archive is discarded and rebuilt on your next export, so an imported dispatch always ships with the current renderer.
• Content is re-sanitized on the way in, so a hand-edited or third-party file can't smuggle markup into your readers' browsers.
• Limit is 50MB per file.

Where

File → Version history…. The list shows restore points for the current page, newest first.

How restore points are made

Every save writes one — but they're bucketed to one per five minutes, so a long editing burst collapses into a single entry instead of hundreds. The most recent 20 are kept per page; older ones fall away.

Restoring

Click Restore next to an entry. Before anything is overwritten the current state is written to history as its own restore point, so a restore you didn't mean can be undone by restoring the entry just above it.

Notes

• History is per page, not per dispatch. Restoring one page leaves the others alone.
• Snapshots live server-side and are never included in a .zdx export.
• This is separate from ⌘Z undo, which is in-memory and only covers the current session.

How it works

Roughly 1.2 seconds after your last edit, the page saves on its own. The status line in the toolbar tracks it: Unsaved changes while a save is pending, then Saved · just now, counting up as time passes.

The delay is deliberate. Dragging a block fires a change on every pointer move, so the timer resets continuously and the drag saves once when you let go — not sixty times a second.

You can still save manually

⌘S and File → Save work exactly as before, and force an immediate save.

If a save fails

Offline or server errors leave the status on Unsaved changes and the next edit retries. Closing the tab with unsaved work triggers the browser's "leave site?" warning, so a dropped connection can't quietly cost you a page.

Notes

• Switching pages cancels any pending autosave for the page you left — it had already saved, or you'd have seen the warning.
• Autosave feeds version history, but bucketing keeps the list readable.

Two ways to open a dispatch in the Mac viewer

1. Double-click a .zdx file in Finder.
2. Click an https://pubvay.com/d/<code> link in Mail. The OS routes it to the viewer (Universal Links). Other browsers / no app installed → falls back to opening in the browser.

Window presets

Toolbar buttons resize the window to canonical viewport widths (Mobile · Tablet · Desktop · Large) — useful for testing how a dispatch reads on each device size.

Tips

• Arrow keys navigate pages (left / right).
• ⌘O opens a .zdx from disk; ⌘L opens by pasting a Pubvay URL.
• Window resize uniformly scales the artboard — wraps and layout don't shift. PDF-style behavior.