Pages & Panels

A PanelWave work is organized in four levels: Work → Chapters → Pages → Panels. Chapters group your story into parts, pages lay panels out for page-capable formats, and panels are the individual story beats readers move through. You manage all of this from the Tree tab in the editor's left sidebar.

The structure tree

The Tree tab shows your whole work as an expandable outline. Each row has an expand/collapse arrow, an icon, its title, and (for panels) small badges:

Selecting a row opens it in the canvas — a page opens in page view, a panel in panel view — and the breadcrumb in the header updates.

Search and filters

At the top of the tree, the search box ("Search chapters, pages, panels...") filters the outline as you type, matching titles and IDs and auto-expanding branches that contain matches. Next to it, three filter buttons narrow the tree to panels that are invalid, have hotspots, or have variants; a clear button appears when any filter is active.

You can also move through the tree with the keyboard: ↑/↓ walk visible rows, → expands (or enters) a node, ← collapses (or goes to the parent), and Enter selects.

Creating chapters, pages, and panels

When the target page already has panels, the Create New Panel dialog offers a Position select — At the beginning or After any existing panel — defaulting to the end, so a new panel can go straight into the right spot in the reading order.

Context menus

Every row has a right-click context menu (also available via the ⋮ button that appears on the row):

Destructive actions ask for confirmation, and every structural change supports undo/redo (Ctrl+Z / Ctrl+Shift+Z). Rename opens the same dialog for chapters, pages and panels (a panel's title can also be edited in the inspector).

Chapters you collapse stay collapsed: the tree remembers them per work for the browser session, so a rename, a new panel or a page reload no longer re-expands what you folded away. Expanding a chapter again, or selecting a panel inside it (which reveals it), lifts that.

Reordering by drag and drop

Each draggable row shows a grip handle (⋮⋮). Drag it to reorder:

• Chapters within the work
• Pages within a chapter
• Panels within a page

A "Drop here" placeholder shows where the item will land — and the item really lands at that position, including panels dragged in from another page or from Unassigned; the canvas renumbers immediately. Moving a page to a different chapter by drag asks for confirmation first. Dragging a panel onto a page of another chapter moves it the same way Move to... does (below), attached at the drop position; dropping it on that chapter's Unassigned bucket moves it into the chapter without placing it on a page. Moving a panel can affect the navigation flow defined in the graph. If you prefer clicks over dragging, Move Up / Move Down in the context menu do single-step reorders.

You can also drag a panel from the tree onto the canvas (in page view) to place it on the current page.

Move to...

Move to... in the context menu opens a dialog that offers only destinations that make sense for the item:

The dialog shows Will move to: with the chosen destination before you confirm. Because a panel's row is shared by every page format's pages of its chapter, moving a page or a panel to another chapter also takes the moved panels off the source chapter's other pages (every format), off its canvas layout, and out of the source chapter's graph — edges to panels that stay behind are dropped, edges among the moved panels travel along, and a moved entry panel is replaced. All of that comes back with Undo: the panels return to their pages at their old positions, with their placements, edges and entry status.

Deleting panels

A panel can be placed on pages of several page formats at once (a mobile page and an A4 page of the same chapter, say). The two delete paths differ:

• On the canvas (page view, Delete or the toolbar), deleting a panel that another page — of any format, including ones not loaded in the editor — still places only removes it from the open page. A toast says where it is still used ("Removed from this page, still used in Mobile portrait") and points you to the tree; the artwork and the panel itself survive. Undo re-attaches it.
• Delete Panel in the structure tree deletes the panel everywhere. When it is placed on more than one page, the confirmation says so — "placed on 2 pages (Tablet portrait, Mobile portrait) and will be removed from all of them" — so you can cancel and use the canvas instead to take it off one page only.

Both paths are one undo step. Deleting a panel also removes it from every page's reading order and layout. Pages edited before that clean-up existed can still list panels that are gone (the timeline then warns Panel not found); Preflight finds them and its Fix button removes the stale entries.

Page layouts

Pages position their panels with percentages of the page, not fixed pixels — a panel at "x 25%, width 50%" sits in the same relative spot on a phone, a 4K screen, or a printed A4 page. Panels may overlap (stacking order is controlled per panel) and can be rotated for dynamic layouts.

Pages also belong to a page format: each format the work supports (see Work Properties → Output) keeps its own set of pages, so the phone-shaped and the A4 layout of the same scene are separate pages you design independently. The format selector above the canvas chooses which format's pages you see and edit.

In the manifest and in exports, pages get format-scoped ids: each format has its own permanent letter and its own counter, so A4 portrait pages are pg-A1, pg-A2, …, desktop pages pg-D1, pg-D2, …, mobile pages pg-M1, … — every format's page numbering starts at 1. The letters are fixed per format (A4 portrait A, A4 landscape L, US portrait U, US landscape W, mobile M, tablet T, desktop D, big screen B, square S, video 16:9 V, flex landscape F), so adding a format or reordering pages never changes the ids of another format's pages.

To edit page-level settings, right-click a page and choose Page Properties. The panel looks and behaves like the panel inspector — the same collapsible sections, which remember their open/closed state — and saves automatically as you edit:

• Layout & Structure — the page Title (edited in the locale currently selected in the header, like other localized text), the chapter the page belongs to, and a Layout Template starting point: Blank, 2 Panels Horizontal, 3 Panels Vertical, Splash (Full Page), 4 Panels Grid, or Custom.
• Visual Properties — a Background Color picker (a curated palette of paper whites, sand/cream tones, and soft pastels, plus custom colors by hex code and a Recent row), optional background image/texture, and Page Margins (top/right/bottom/left, in pixels). The background color renders on the canvas immediately and is part of the published work.
• Transitions & Audio — Transition In and Transition Out effects for entering/leaving the page (fade, slide-left, slide-right, cut, zoom).
• Production — a workflow Status shown as four colored buttons (Draft, Review, Final, Published) and Production Notes for your team. Notes are internal and never appear in the published work.

Arranging the panels themselves — moving, resizing, aligning, distributing — happens visually on the canvas in page view; see Canvas.

Arranging pages by artwork

When a page's panels have their artwork, the editor can lay the page out for you so that every panel keeps its own proportions — the shape its first image gave it, or the frame shape you cropped it to:

• Arrange Panels by Artwork — right-click a page in the structure tree.
• Arrange All Pages by Artwork — right-click a chapter: every page of the chapter, in one go.

Both work on the page format open in the editor (the format selector); switch the format and run it again for the next one. The panels are packed in reading order into rows that span the page width: each row's height follows from the shapes in it, and of all the ways to break the sequence into rows the one that fills the page best wins. A stack that would be too tall is scaled down evenly, one that is too short is centred. Panels are separated by the work's gutter width (Work Properties → Typography; 10 px on an A4 page when none is set).

Arranging the open page is one undo step. Script imports lay pages out before any artwork exists — run Arrange All Pages by Artwork per format once the images are in.

Panel properties in the inspector

Select a panel and open the Panel tab in the right inspector. Changes apply to the canvas immediately and are picked up by auto-save.

Basic Properties

• Panel ID — the internal identifier (read-only).
• Friendly ID — the short, human-readable identifier (e.g. ch1-p022) the panel is known by outside the editor: published manifests, work archives and exported JSON key panels by it. Every new panel gets one automatically (ch{chapter}-p{number}, the next free number in its chapter); panels created before that receive one on their next publish or export. You can rename it here — it must be unique within the work. A duplicated panel gets a fresh id.
• Reading Order — the panel's position in the page's reading sequence; this is the number shown in the blue badge in page view.
• Title and Description — edited in the locale currently selected in the header. The description is read by screen readers, so a short sentence describing what happens in the panel makes your work accessible to blind and low-vision readers.

Layout & Transform

The numeric twin of dragging on the canvas:

• Position (X, Y) and Size (W, H) — in percent of the page (0–100%).
• Rotation — from −180° to 180°.
• Z-Index — stacking order for overlapping panels (0–9999, higher is on top), plus Bring to Front / Bring Forward / Send Backward / Send to Back buttons. The buttons renumber the page's panels to a gapless stack (0, 1, 2, …) in drawing order, so the order is saved and exported as you see it; each click is one undo step.
• Lock Position — prevents accidental dragging; Lock Aspect Ratio keeps the panel's proportions when resizing.

Frame Shape

Frame Shape crops the panel's visible area to a fixed ratio, centred: Whole image (no crop), Strip 4:1, Strip 3:1, Panorama 21:9, Wide 16:9, Landscape 3:2, Landscape 4:3, Square 1:1, Portrait 3:4, Portrait 2:3, Tall 9:16 and Tall strip 1:3. Use it for strip panels cut from wider artwork (a 4:1 strip from a 21:9 image) or a tall strip from a portrait one, instead of dragging the crop edges by hand. With Apply to all page formats (on by default) the crop is set on every page that places the panel, in every format. A crop made by hand shows as Custom crop. Arrange by artwork treats a cropped panel by the shape of its visible area.

Content Settings

• Shareable — allow readers to share this panel.
• Content Warnings — tags (e.g. "violence, language") that alert readers to sensitive content; they also produce the W badge in the tree.

Format Views

Controls how the panel behaves across reading formats:

• Allow Page View / Allow Panel View — whether the panel may appear in each view mode.
• Minimal Focus Rect — the important region of the panel (X, Y, width, height, in % of the panel), set per format. When a reader's screen is smaller than the panel — a landscape panel on a phone, for example — the panel still fills the screen, and the crop is centred on this region instead of the middle of the panel. The editor previews it as the bright area in panel view. Clear removes the region for the current format; the crop is then centred on the panel again.
• Display Duration (ms) — how long the panel is shown during autoplay. Leave it empty to use the work's default seconds-per-panel setting. Panels with a video layer lock the duration to the video length automatically; a toggle switches between Locked to video and manual duration, with a Reset to video length button. See Video Panels.

Layers

A list of the panel's layers and speech bubbles, with visibility toggles and stacking controls. Deeper layer editing happens in the Layer tab — see Layers.

More sections

The rest of the Panel tab manages content that has its own documentation:

Variants

A variant is an alternative version of the panel that the reader sees when a condition on your story variables is true — a different line of dialogue after a choice, other artwork once a door is open. Click + Add Variant in the Variants section to open the variant editor:

• Variant — an id for the variant (e.g. var-left-path), unique within the panel.
• Condition (JSON Logic) — built with the rule builder. Its variable dropdown lists the variables defined in the work's Variables designer; define a variable there first if it's missing. Variants are checked in order and the first match wins.
• Overrides — the panel fields this variant replaces (title, description, duration, layers, speech bubbles, hotspots, …). Copy from panel starts from the panel's current value.

Each variant in the list shows its id and a When: … summary of its condition. Preflight reports variants that would be skipped at publish — no condition, no overrides, a duplicate id, or a condition naming an unknown variable; see the VARIANT_* codes in the Validation Code Reference.

Related pages