Meaning stays. Geometry changes.
Compose separates the document you edit from the geometry it draws. Text, stable IDs, order, explicit connections and comparison cells are stored in the project. Each layout is derived from that data. The preview, SVG download, PNG conversion and print view use the same SVG scene.
Four structures, four meanings.
| Type | What the document says | What layout may change |
|---|---|---|
| Steps | Cards are in the supplied order. Adjacent cards form the sequence. | Wrapping, card sizes, columns and connecting paths. |
| Decisions & connections | Only the explicit directed connections exist. A card can have no links, repeated links, a self-loop or a cycle. | Ranks, card positions and orthogonal routes. Dense graphs may have crossing lines. |
| Comparison | Named options share named criteria. Each cell is supplied text. Empty and unknown values are retained. | Column widths, row heights and text wrapping. No numerical chart or winner is inferred. |
| Photo guide | The first embedded photo, numbered captions and normalized marker coordinates. Unplaced captions have no marker. | The photo’s displayed size and caption arrangement. The whole image is contained, without cropping. |
Changing type retains the other type’s data in the project. A steps-to-decisions switch creates no graph connections. Reordering graph cards changes the editor order, not the relation endpoints. Replacing a photo clears the markers assigned to it; place the captions again on the new picture. Undo restores the old picture and assignments.
What travels in each export.
- Editable project: versioned JSON, including all supported content, IDs, connections, comparison cells, theme, format and embedded raster bytes. Open it here to resume editing.
- SVG: shapes, paths, text and embedded raster data. It has no external image references or foreignObject content. Other vector editors may edit its objects; Compose does not import SVG as a project.
- PNG: rasterized from that SVG at 1× or 2×. Maximum edge 8192 pixels; maximum area 16,777,216 pixels. If it is too large, use 1× or SVG.
- Print / Save PDF: the browser’s print dialog, with the whole visual fitted to one A4 page. Tall compositions shrink. Use PNG or SVG when retaining readable long-form dimensions matters.
The format options set a minimum canvas shape. Long content can grow beyond that shape; it is not cut to a fixed poster size. Fonts use the system font stack. An SVG opened on another device can use different fonts and may wrap differently if an external editor recomputes its text. The SVG’s supplied line breaks and coordinates are explicit.
Your project on this device.
Projects are stored in IndexedDB when the browser permits it. “Saved in this browser” is shown only after a successful write. Clearing site data or losing access to this browser can remove those copies. Download an editable project for a backup. Project content is processed in this browser; the app modules make no network requests. The Wasteland’s shared page chrome is separate from the composition.
Photo imports accept still JPEG, PNG and WebP files up to 20 MiB and 40 million source pixels. The browser decodes and orients the picture, then stores a raster resized to at most 2000 pixels on its longest edge. This is the stored photo, not an archival original. Imported projects must contain matching embedded raster headers and dimensions; the browser also decodes every photo before replacing the current document.
Practical limits, stated.
| Cards / connections | 40 / 60 |
|---|---|
| Comparison options / criteria | 6 / 20 |
| Text field / original pasted notes | 12,000 / 200,000 characters |
| Portable project | 20 MiB UTF-8 |
| Embedded photo budget | 12 images in the format, 12 MiB of embedded raster file bytes in total, 16 million total pixels. Photo guide currently displays the first image. |
| Undo history | Up to 60 edits in the current editing session. |
Unsupported versions, unsafe keys, dangling references and out-of-range values are rejected, rather than silently repaired or truncated. Pasting notes splits nonempty lines into literal card headings and keeps the original input. It does not infer decision branches or summarize content.
A checker you can take away.
Download the project checker ZIP, extract it into an empty folder, and use Node.js 22 or later:
node check.mjs example.compose.json node check.mjs your-project.compose.json
The first file is an invented example included in the ZIP. The checker validates supported structure, references, limits and raster headers, checks an exact JSON roundtrip, and compiles a layout. It uses the same data validator and layout engine as the editor, so it is a portable inspection aid, not an independent proof of those modules. It uses approximate Node text metrics and does not decode compressed raster pixels, verify browser glyphs or certify that a complex layout looks good.
Test evidence.
Development checks cover literal Unicode and markup-like text, malformed imports, version/ID/reference constraints, JSON roundtrips, cycles and repeated graph links, node-obstacle routing, comparison gaps, unplaced photo markers, image bounds and export allocation limits. Real Chromium browser checks exercise editing, undo, phone-width layout, comparison changes, explicit links, browser storage, actual SVG/PNG/JSON downloads, camera orientation and photo decoding. These are examples and adversarial cases, not a claim about every possible project or every phone browser.
Review the final visual before sending it. Layout is a heuristic, and system fonts differ. Compose keeps the words and relations you supply; it cannot check whether the explanation itself is correct.
Document model · Layout and SVG renderer · File and storage operations