UI Layout
Top Toolbar
The toolbar is split into three clusters:
- Left — app identity and the OPEN button for file loading
- Center — reset, play, pause, renderer selector, fit, alignment, and FPS chip
- Right — EXPORT, Settings gear, and MCP Setup (cable icon)
Script Editor
Internal mode — neutral outline, RAV's built-in wiring is active
Editor mode — green pulsing dot, applied editor config is driving the runtime
Canvas
The primary animation viewport. Renders the loaded Rive animation with the selected renderer (Canvas or WebGL2). Fit and alignment are controlled from the main toolbar.
Properties Panel
Contains the Artboard/Animation switcher, ViewModel controls, and state machine inputs. Resizable by dragging the divider, collapsible entirely.
Console
Collapsible panel with two modes: Event Console and JavaScript Console. Both share newest-first ordering, timestamps, follow mode, and outlined action buttons (FOLLOW, COPY, CLEAR). A compact header toggle switches between Events and JS.
Runtime Strip
When the console is closed, only the runtime strip remains visible. It shows the MCP indicator, console toggle, runtime version, loaded file, update status, and playback state with structured iconography.
About Window
Desktop builds include a custom About window accessible from the Settings popover or the native Help menu. It surfaces build metadata, runtime version, credits, product links, and a scrollable dependency inventory.