Browser Demo & Offline

What the demo is

The demo is a bounded browser build, not a hosted replacement for the desktop app. It includes the Design, Draw, and Photo workspaces with the shared scene model, tools, undo/redo, layers, and Inspector. Print production (PDF, CMYK, bleed, colour-managed output), on-device inference (background removal, upscaling, visual search), Motion and Email authoring remain outside this bounded demo. Logo tools are part of Design and Code export is a shared panel; their availability follows the enabled browser capabilities. The interface identifies unavailable capabilities where they appear.

The engine loads as WebAssembly and renders with Canvas2D in a browser tab. The public varve.studio demo is hosted on GitHub Pages, which cannot configure the cross-origin isolation headers required for shared-memory WASM, so multi-threaded WASM is unavailable in this deployment. That hosting limitation does not describe every browser deployment or establish a general speed comparison with desktop.

Constrained devices and rendering

The browser build measures the cadence of the actual animation frames and keeps a small amount of CPU and memory headroom. During an active drag or zoom it may use a lower preview backing scale; pan and zoom may also briefly reproject the latest worker frame while a replacement is prepared. That preview can look soft or incomplete until the current state is painted. Varve requests an authoritative redraw after input stops, with warm targets of 500 ms for ordinary work and 1 s for heavy work once required assets are ready. These are targets, not guarantees. Exports use an independent full-fidelity path, and saved document geometry is not changed by preview rendering.

Thumbnails, raster pyramids, and semantic indexing are background work. They are bounded, cancellable, and paused when the page is hidden or frozen so pointer and keyboard input keeps priority. A browser may still discard a tab under memory pressure, so save important work to a real file and keep the recovery copy as a safety net.

WebGPU is attempted only after an adapter and device can be created; a failed or lost device returns to the Canvas2D path. The browser build does not claim access to a Chromebook NPU. The optional on-device model catalog is currently a desktop feature; core browser editing never waits for a model download.

Opening the demo

1. Open varve.studio/try/ in a current Chrome, Edge, or other Chromium-based browser. Firefox and Safari work with the download save fallback described below.
2. A sample document opens directly in the editor.
3. Edit, draw, or import your own PNG/JPEG/SVG artwork. Everything stays in this browser.
4. When you want to keep a file, use File → Save As (or Ctrl+Shift+S) so you choose where it goes.

Saving, recovery, and what "Saved" means

The demo follows your browser's file capabilities. In Chromium browsers it can keep writing to a file you chose (File System Access API), re-asking for permission when the browser requires it. In Firefox and Safari, Save produces a fresh snapshot download each time and the browser-local copy is updated as well, because a download is not a persistent location.

Saved means the write to the destination actually finished. The status bar reports Saving…, Saved, Modified, Not saved, or Save failed with the reason in its tooltip. A cancelled file picker changes nothing and does not mark the document saved. While edits have not reached a destination, the demo writes recovery copies into this browser's storage; they are offered after a crash or a discarded tab and are removed when the document is saved, when you discard it intentionally, or after seven days.

The demo does not auto-save to disk. Set your own save rhythm, or use the desktop app's file workflow for continuous work.

Installing as an app

In Chrome or Edge on desktop and Chromebooks, the demo can be installed like an app: click the install icon in the address bar (or ⋮ → Cast, save, and share → Install page as app). It then opens in its own window with a launcher icon. Installed and tab sessions share the same browser storage, so documents are the same in both.

If install is unavailable (policy, an unsupported browser, or a private window), keep using the demo in a normal tab — every feature behaves identically. Uninstalling the app with "delete data" removes documents and recovery copies; export what you need first.

Offline

Offline operation is real but staged. After one complete online visit, the browser service worker has saved the application shell, its scripts, styles, fonts, and the WASM engine, and the demo can then open and edit offline. The demo banner tells you when you are running from the saved copy and that edits stay on this device.

• First-ever visit offline: no application code has ever run in this browser, so nothing can display an editor. The page explains that the demo is not available offline yet and asks you to reconnect.
• Interrupted setup: if the browser installed the worker but the offline copy is incomplete, a plain page says the copy is not finished and that your saved documents were not touched.
• Private/incognito windows discard everything when they close and cannot install apps.
• Updates catch up later: if the demo updates itself, the new version downloads in the background and asks before reloading.

Storage: what is kept, and how to clean it up

Open File → Settings… → Storage & Offline to see the browser's estimate of storage used, whether the browser has granted persistent storage, how many recovery copies exist, and how many offline app files are cached.

• Ask the browser to keep it requests persistent storage. Browsers may decide based on how often you use the site; a declined request deletes nothing.
• Clear offline app copies removes only the cached copy of the application itself so the next visit downloads a fresh build. Documents and recovery copies are untouched; offline support returns after one complete online visit.
• "Delete browsing data" in browser settings (or uninstalling the app with data removal) deletes documents and recovery copies too. Export anything you need first.

Browser storage estimates are approximate and shared with everything else this site stores. Plan for roughly twice a document's size while a save is in progress. If the device runs low on space, the browser may evict best-effort site data — another reason to save important work to a real file or to the desktop app.

Files on a Chromebook

Saving uses the ChromeOS Files app. When you choose a location, Chrome asks for access and can remember it; if permission expires, the next save asks again and your edits stay put until the write succeeds.

• My Files and removable media work like any other folder. If an SD card or USB drive is removed while a document is open, the next save reports the destination is unavailable — reconnect it and save again, or use Save As.
• Google Drive files can be opened and saved through the Files app, but Drive sync is handled by ChromeOS, not Varve. If a newer copy was synced from another device, Varve refuses to overwrite it and points you at Save As, so both versions survive.
• Offline Drive copies are your Files app's "available offline" setting. Varve does not manage which Drive files stay offline.
• Read-only or shared files cannot be overwritten; the save reports a permission failure and Save As creates your own copy.
• Deleting browsing data or uninstalling the app with data removal deletes documents and recovery copies stored in the browser. Files saved through the Files app live outside browser storage and are not removed by that.
• Private/incognito windows discard everything at the end of the session; save to a file if the work matters.
• ChromeOS Linux (the Linux development environment) keeps its own files; storage there is separate from the browser demo.

Updates

A new build is never forced onto an open document. When an update is ready the demo shows a notice with Update and reload and Dismiss; the reload happens only when you choose it. If an old page references build files that a deploy has replaced, the same notice recovers the session with a reload — your documents are in browser storage, not in those files.

Moving work between browser and desktop

Documents use the same .varve format in both. Save from the demo, then open the file in the desktop app (or vice versa). The demo exports PNG, JPEG, WebP, and SVG; PDF and print production require the desktop app. Optional on-device models, local font installation, and native file paths are desktop features.

Touch, pen, and keyboard on a tablet

The browser demo adapts to tablet and split-screen widths instead of assuming a desktop window. Appearance settings and View > Workspace layout let you choose Automatic, Tablet, or Desktop; Automatic uses available width and reported touch capabilities, not keyboard attachment. In tablet presentation the compact Inspector keeps the canvas interactive, while Layers and Resources remain dismissible drawers.

• One finger draws or selects with the active tool by default. Settings > Drawing input can switch one-finger touch to viewport navigation.
• Two fingers cancel only a provisional first-pointer action, then pan and pinch-zoom the canvas around the gesture; page zoom is not affected. Lift both fingers and start a new contact before drawing again.
• Long-press a stack of overlapping layers for the deep-selection menu — the touch equivalent of right-click.
• Without a keyboard, use the toolbar's Editing controls for latched shape modifiers, deep selection, Duplicate, alignment, and layer-order actions. Touch multi-select stays on the toolbar.
• Pen input is treated as a precision pointer: pressure, tilt, and twist are used when the browser and device report useful values, and strokes fall back to a stable constant response when they do not. Eraser-tip input is preserved where the platform exposes it, but real pressure, palm rejection, hover, and USI button behavior are not certified by browser emulation.

A detachable keyboard is optional. The app adapts to the actual viewport and pointer capabilities, never to assumptions about whether a keyboard is attached. Where the browser reports the on-screen keyboard geometry, dialogs, toasts, and the panel drawer buttons move above it so the field you are editing and its commit controls stay visible. The full touch, pen, keyboard, trackpad, and accessibility reference is Touch, pen, keyboard, and trackpad.

Portrait and landscape use the same editor and document. In portrait the compact Inspector is a shallow lower pane; Resources remains a dismissible modal sheet and Layers is a drawer. In landscape the Inspector uses a reserved side rail. Changing orientation keeps the editor mounted. Browser Back closes the topmost eligible Varve surface when the browser delivers the app's same-page dismissal entry; ChromeOS owns edge-swipe gestures, so physical gesture dispatch remains unverified.

ChromeOS owns some keyboard combinations. Varve switches workspaces with Ctrl+Shift+1…6 for workspaces, then Ctrl+Shift+7 for Logo Tools and Ctrl+Shift+8 for the shared Code panel. Logo'sCtrl+Alt+Shift+L toggle opens Design when needed. Browsers may reserveCtrl+Shift+J for Developer Tools, so use the 8 action or View > Panels > Code Panel in the browser. In the desktop app,Ctrl+Shift+J toggles that same panel. On macOS, use Command+Shift with the same numbers and Command+Shift+J for the desktop Code toggle. Chrome uses Command+Shift+J for Downloads on macOS, so use Command+Shift+8 or the View menu for Code in the browser. Chrome may also reserve Command+Shift+B/M for browser controls; use Varve's View menu for Inspector and Minimap. See the keyboard shortcut reference for the ordered workspace list and panel alternatives. Combinations such as Ctrl+T, Ctrl+W,Ctrl+Shift+I, Ctrl+Shift+J, Ctrl+Shift+B,Ctrl+Shift+M, and Ctrl+P belong to browser controls, so use Varve's View menu, tab strip, or command palette for those actions in the browser demo.

Troubleshooting

• "Varve is not available offline yet" — the browser has no complete offline copy. Reconnect, load the demo once, and let the page settle for a few seconds.
• The demo asks for file access again — browsers do not always remember file permissions between sessions. Choose the same file again, or use Save As.
• Save failed with a permission or quota message — the document stays modified and its recovery copy remains. Free up space or grant access, then save again; nothing was overwritten by the failed attempt.
• An update notice will not go away after updating — close every demo tab and window (including the installed app) and reopen; one old client can keep an update "waiting".