Skip to content

Repository files navigation

Rive Analyzer

A small, static website that loads a .riv file entirely in the browser and renders two things: a full inventory (artboards, state machines, inputs, view-model properties, observed states/events) and an opinionated, scored A–F best-practice advisor. No server, no upload — the file is analyzed client-side with @rive-app/canvas-advanced (WASM).

Honest positioning

This is not a claim to deeper Rive parsing or codegen than what already exists. Prior art in this space (e.g. nano-step's rive-playground) already does broad .riv parsing and codegen well.

What this site adds — and the only thing it adds — is podium-mcp's adviseRive: a codified best-practice catalog that turns an inventory into a scored result (0–100, A–F, findings with rationale + fix hints + doc links), the same advisor podium's rive_analyze MCP tool exposes to agents. This site is a plain-browser front end for that one thing. If you need parsing/codegen breadth, use rive-playground; if you want a graded, agent-friendly best-practice check, that's what lives here.

Live-only v1 — boundary and honest gaps

The site loads files with the low-level @rive-app/canvas-advanced runtime (RiveFactory({wasmBinary})rive.load(bytes)), the same path as podium's e2e/fixtures/rive-web/host.html. It reads one live instance per artboard; there is no static/binary-format half yet. Concretely:

  • Text runs are not enumerated. The low-level runtime can only read a named text run (artboard.textRun(name)), not list all of them, so textRuns is reported empty rather than guessed.
  • Events and observed states are autoplay-only. Each state machine is advanced a few frames to capture whatever autoplay transitions/events surface; nothing is fired programmatically, so a trigger with no observed autoplay effect is reported as driven-but-unverified, never fabricated.
  • No static source. podium-mcp/analyzer's mergeRiveReport supports merging a live instance with a static .riv parse (full nested inventory, including artboards a live instance never visits). This site only ever passes the live half. Adding a static src input (parse the same bytes the user dropped) would close this gap and is the natural v2 addition.

Everything rendered is verbatim from the podium analyzer pipeline (mergeRiveReport + adviseRive) — this site never re-derives a rule or a score; see src/analyzer-bridge.ts and src/live-reader.ts.

Quickstart

npm install
npm run dev        # http://localhost:5173, hot-reload
npm run build      # tsc + vite build → dist/
npm run preview    # serve dist/ locally
npm run test:e2e   # build + Playwright smoke against the built site (local only)

The smoke test (e2e/smoke.mjs) boots vite preview programmatically, drives Chromium via plain playwright (matching podium's own e2e/*.e2e.mjs convention — no @playwright/test runner needed for one flow), loads the bundled public/vehicles.riv sample through the same "Load sample" button a user would click, and asserts the inventory, at least one advisor finding, and the A–F grade/score all render. It never talks to a deployed URL.

Deploy

Not deployed yet — every step below is a TODO gated on repo/GitHub access this environment doesn't have. The pipeline is prepared as files only:

  • .github/workflows/deploy-pages.yml — checkout → npm civite build (with RIVE_ANALYZER_BASE=/rive-analyzer/ so the project-pages subpath resolves) → upload-pages-artifactdeploy-pages.
  • vite.config.ts's base reads RIVE_ANALYZER_BASE, defaulting to / so local dev/build/preview/the smoke test are unaffected.

TODO (requires the user's own GitHub auth):

  1. git init this directory (or fold it into an existing remote) and gh repo create (or push to an existing repo) — not done here.
  2. Push to the main branch the workflow watches.
  3. In the repo's Settings → Pages → Build and deployment, set Source to GitHub Actions.
  4. Push again (or re-run the workflow via workflow_dispatch) — Pages will serve at https://<user>.github.io/rive-analyzer/.

Relationship to podium-mcp

src/analyzer-bridge.ts imports mergeRiveReport + adviseRive and shared types from podium-mcp/analyzer — the browser-safe half of podium's Rive analyzer, the same thing podium's rive_analyze MCP tool and rive_e2e_init's advisor step use. See podium's docs/rive-e2e.md and docs/rive-analyzer-spec.md for the catalog and coverage identity this advisor is part of.

About

In-browser Rive (.riv) inventory + scored best-practice & optimize advisor. 100% client-side, powered by podium-mcp/analyzer + @rive-app/canvas-advanced.

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages