Status bar
A thin 24 px strip anchored to the bottom of the editor. Read-only telemetry: cursor position, the colour under the cursor, canvas size, current frame/animation, active tool, zoom, and save state — at a glance, without having to look anywhere else.
Where to find it
Anchored to the bottom of the editor, below the Frames timeline. Visible by default; the showStatusBar preference can hide it (Top bar → SlidersHorizontal → Behavior).
What it shows
The bar has three sections separated by 1 px dividers. On narrow viewports the centre section collapses first to keep the left and right visible.
Left — canvas telemetry
| Element | What |
|---|---|
Cursor X / Y | Pointer position in pixel space. Shows X: — Y: — when the cursor is outside the canvas. |
| Colour chip | A 2 px dot + hex string showing the colour under the cursor (e.g. #A3B59A). Hidden when the cursor is off-canvas or over a fully transparent pixel. |
| Canvas size | W × H px. |
Centre — frame / animation context
| Condition | What it shows |
|---|---|
| Single-frame project | Single frame |
| Multi-frame project (no active animation) | Frame N of M |
| Active animation | Animation name (amber) + step index relative to the animation's keyframes, plus the frame name truncated. The step index is relative to the animation, not the global frameOrder. |
The centre section is hidden on mobile / narrow viewports to keep the left/right sections legible.
Right — tool, zoom, save state
| Element | What |
|---|---|
| Active tool | Icon + label (e.g. ✏️ Pencil). Updates instantly when you change tool via hotkey or palette. |
| Zoom level | Current zoom as a percentage (e.g. 150%). Monospaced. |
| Save indicator | A coloured dot + message — see Save states below. |
Save states
The rightmost indicator reads from useSaveStatus() and is the canonical answer to "did my work make it to disk?". It re-renders every second so the "X ago" timer stays current without polling the store.
| State | Dot | Message | When |
|---|---|---|---|
| Not yet saved | Gray | Not saved yet | Fresh project, no save has run |
| Saving | Orange | Saving… | Autosave or manual Ctrl+S in flight |
| Saved | Green | Saved {relative} — e.g. Saved just now, Saved 2s ago, Saved 3m ago | The most recent save succeeded. Tooltip shows the full ISO timestamp. |
| Failed | Red | Save failed (underlined on hover, clickable) | The most recent save threw. Clicking surfaces the error message as a toast. |
Manual save:
Ctrl+Swrites immediately to browser storage (same path as autosave) and updates this indicator alongside the autosave debouncer. See keyboard shortcuts → File & app.
The Saved X ago timer uses Intl.RelativeTimeFormat and picks the right unit automatically (seconds, minutes, hours, then days). When the centre section is hidden on narrow viewports, the save indicator stays — it never collapses.
Interaction
The status bar is read-only. The only clickable element is the failed-save indicator: clicking it opens a toast with the full error from the persistence layer (typically an IndexedDB quota or DOMException).
To act on what the bar shows, use the matching surface elsewhere in the editor:
| You see this in the bar | …go here to change it |
|---|---|
| Cursor coords | Move the pointer on the canvas |
| Zoom % | + / - keys, or Ctrl+0 for 100% |
| Active tool | Pick another tool from the Tools panel or the command palette |
| Active animation / frame | Frames timeline / Anims tab |
| Save state | Ctrl+S to save now, or wait for autosave |
Related
- Preferences → Behavior →
showStatusBar— hide the bar entirely. - Project backups — separate persistence path; doesn't influence this indicator.
- Keyboard shortcuts — including
Ctrl+Sfor manual save.