Editor Layout

The editor is where you build your graphic novel. It opens when you select a work from your works list and is arranged in four zones around a central canvas.

┌────────────────────────────────────────────────────────────┐
│  Header — breadcrumb · save status · undo/redo · publish   │
├───────────┬────────────────────────────────┬───────────────┤
│  Left     │                                │  Right        │
│  sidebar  │            Canvas              │  inspector    │
│  (Tree /  │   your page or panel, with     │  (Panel /     │
│  Assets / │   zoom, grid, and rulers       │  Layer / ...) │
│  Tools)   │                                │               │
├───────────┴────────────────────────────────┴───────────────┤
│  Timeline — animations and audio for the current panel     │
└────────────────────────────────────────────────────────────┘

Both sidebars and the timeline are resizable — drag the thin handle between a sidebar and the canvas to change its width (roughly 280–380 px on the left, 320–420 px on the right), or drag the top edge of the timeline to change its height. Each zone can also be collapsed with its chevron button to give the canvas more room; collapsed sidebars shrink to a narrow rail with an expand button.

Header bar

The header stays visible at all times and is split into three areas.

Left: where you are, and whether you're saved

• PanelWave CMS logo — click to leave the editor and return to your works. The small beta tag next to the wordmark marks the CMS as a beta (it also appears in the Backstage header and on the sign-in screens).
• Breadcrumb — shows your current position (work › chapter › page › panel) and updates as you navigate.
• Branch badge — the branch you are working on (normally main).
• Save status badge — see Saving below.

Center: editing controls

• Undo (Ctrl+Z) and Redo (Ctrl+Shift+Z) — step backward and forward through your edits.
• View Undo History — opens a panel listing your recent actions so you can see what each undo step will revert.
• Locale selector — a dropdown (English, Deutsch, Français, Español) that controls which language you are editing. Localized fields such as panel titles and speech bubble text are edited per locale; see Localization.

Right: actions

Contextual help

A small help icon (a circled question mark) sits at the top right of most screens and editor sections. Clicking it opens the matching page of this documentation in a new tab — hover it to see which page. In the editor, the icon in the inspector header follows the active tab (Panel, Layer, Hotspot, Speech, Page, or A11y; on Perf it opens this page), the one in the left sidebar follows Tree, Assets, or Tools, and the timeline's icon opens Animations. The works list and every Backstage tool carry one too.

Left sidebar

The left sidebar has three tabs:

• Tree — the structure tree: your work broken down into chapters, pages, and panels. Select anything here to open it on the canvas. Creating, reordering, and organizing content happens in this tab — see Pages & Panels.
• Assets — your uploaded artwork, audio, and video. Drag an image from here straight onto the canvas to use it. See Assets.
• Tools — the tool palette, grouped into Navigation (Select V, Hand H, Zoom Z), Drawing (Rectangle R, Circle C, Pen P), and Content (Speech Bubble S, Text T, Image I). The active tool decides what clicking and dragging on the canvas does. With the Text tool, new text layers use the font, size and colour set in the Tools panel; with the Speech Bubble tool the panel explains that balloon typography comes from the work, character and bubble styles (see Speech Bubbles).

Canvas

The center zone renders the page or panel you are editing, with its own toolbar for the output format, zoom, grid, rulers, and snapping. Canvas interactions have their own page: Canvas.

Right inspector

The inspector shows editable properties for whatever is selected, organized into tabs:

The Layer, Hotspot, and Speech tabs are grayed out until you select a matching element on the canvas, and the inspector switches to the right tab automatically when you click one. Edits in the inspector appear on the canvas immediately — there is no separate "apply" step. On a narrow inspector the tab strip wraps onto a second row instead of pushing tabs out of view.

The Performance tab

The Perf tab estimates the reader's cost of what you are editing. It changes nothing on the canvas and updates live as you add, hide, or swap layers; the one thing you can edit here is the work's preload setting (below).

• Scope. In panel view it covers the open panel, including unsaved edits. In page view it covers every panel placed on the current page ("This page (4 panels)").
• Download, requests, and decoded memory. The totals for all visible image, video, and audio layers. Pick a Screen density — 1× (desktop), 2× (most phones, the default), or 3× (high-end phones) — and the estimate uses the same file the reader would load: for images the smallest responsive variant wide enough for the layer at that density, for videos the H.264 variant when there is one, otherwise the original. Decoded memory is the size of the unpacked bitmap (width × height × 4 bytes), which is what actually fills a phone's memory.
• Load time per network. A small table for Slow 3G, 4G, and Wi-Fi — the panel (or page) on its own, and With preload, i.e. including the panels the player fetches ahead of the reader.
• Files. Each media layer with the file it resolves to (a variant such as w1280 or optimized, h264, or original) and its size. Sizes marked ≈ are approximated from the image area because the variant's exact size isn't recorded.
• Preload. The work's preload setting as a small form — Strategy (None, Lookahead, or Aggressive (5+ ahead)), Panels ahead (0–20) and Parallel downloads (1–16) — followed by how many panels the player fetches after this one along the chapter's graph edges and how much that adds. A change applies to the estimates at once (the With preload column follows) and is saved to the work; it ships in the published manifest as settings.preload (see Settings), so it is what the player really does. Without a setting the work uses lookahead, two panels ahead; with None the tab says the player does not preload for this work. On a read-only work the form is disabled.
• Suggestions. Concrete fixes, as warnings or hints:
  • an image that loads a heavy original (over 2 MB) because it has neither an optimized nor a responsive variant — run Optimize or the responsive backfill in the Assets library;
  • images without responsive variants (phones download the full-size file), or far wider than they are ever shown;
  • assets without stored dimensions (memory estimate incomplete) and layers pointing at an asset that is no longer in the library;
  • videos without a poster frame (readers see an empty panel until playback starts) or without an H.264 variant;
  • budgets: more than 5 MB for the panel, more than about 150 MB of decoded images, more than 15 layers, or more than 15 MB of preloaded panels on top.

When nothing needs attention the tab shows No issues found. Open a panel with media layers if it reads Nothing to estimate.

Timeline

The bottom zone is the Timeline for the current panel. It's where panel animations and audio tracks are arranged over time. Collapse it with the chevron when you don't need it. See Animations and Audio.

Views in the editor

• Panel view — the canvas shows a single panel filling the frame. This is where you edit layers, speech bubbles, and hotspots.
• Page view — the canvas shows a whole page with all its panels laid out, numbered in reading order. This is where you arrange panel placement. The Page View / Panel View toggle appears in the canvas toolbar once your work has pages. Double-clicking a panel in page view opens it in panel view.

The differences between the two views are covered in detail on the Canvas page.

Saving your work

The editor saves for you. You normally never need to think about it:

You can also save manually at any time with Ctrl+S — useful right before previewing or publishing. When the editor is idle with nothing to save, the badge reads Auto-save enabled.

Read-only works

A work can become read-only — when it is above your plan's publication limit, or when its team is suspended. You can still open it in the editor, read it, preview it, and export it; you just can't change it.

A Read-only banner under the header explains why and what to do (for a plan limit: upgrade, buy a Work Pass, or archive a work you no longer edit). While it shows, the editor does not auto-save — any edits you make stay in the browser and are not sent — so you won't see a stream of permission errors. See Plans & Limits for how the CMS decides which works stay editable.

The write actions are hidden or disabled rather than failing:

• Structure tree — no New Chapter button; the create, rename, duplicate, move and delete menu items are disabled, drag reordering is off, and the Delete key is ignored.
• Canvas — panels can't be added, deleted or dropped as files; moving a panel on the page changes only your view and is not saved.
• Assets tab — upload (button, drop zone and picker), replace, metadata, variants, delete and every folder action are hidden; copy, download and details stay.
• Perf tab — the preload form is disabled.
• Backstage tools — the same banner appears above Characters, Extras, the Localization Workshop (which also opens without its automatic string extraction), Audio and Paywall, and their add / edit / delete / reorder actions are hidden; everything stays readable.

Should an edit still reach the server, it is refused with a single Read-only toast rather than an error per keystroke. Export, archive, trash / restore and comments are not affected by the read-only state.

Next steps