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).
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.
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, sotextRunsis 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'smergeRiveReportsupports merging a live instance with a static.rivparse (full nested inventory, including artboards a live instance never visits). This site only ever passes the live half. Adding a staticsrcinput (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.
npm install
npm run dev # http://localhost:5173, hot-reloadnpm run build # tsc + vite build → dist/
npm run preview # serve dist/ locallynpm 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.
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 ci→vite build(withRIVE_ANALYZER_BASE=/rive-analyzer/so the project-pages subpath resolves) →upload-pages-artifact→deploy-pages.vite.config.ts'sbasereadsRIVE_ANALYZER_BASE, defaulting to/so localdev/build/preview/the smoke test are unaffected.
TODO (requires the user's own GitHub auth):
git initthis directory (or fold it into an existing remote) andgh repo create(or push to an existing repo) — not done here.- Push to the
mainbranch the workflow watches. - In the repo's Settings → Pages → Build and deployment, set Source to GitHub Actions.
- Push again (or re-run the workflow via
workflow_dispatch) — Pages will serve athttps://<user>.github.io/rive-analyzer/.
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.