Choose your path

A 30-second decision helper. Open the recipe that matches your stack.

Use this when

You have the .riv file in hand and you are about to drop it into a project.

Decision helper

Rule of thumb

If you are not sure, use Vanilla Web. It works in every environment listed below and the wrapper code for React/Framer reuses the same names anyway.

Your stack	Use this recipe
Plain HTML page	Vanilla Web
WordPress (custom HTML block, theme, page builder)	Vanilla Web
Webflow, Squarespace, Wix, similar builders (custom embed block)	Vanilla Web
Shopify (custom liquid or script block)	Vanilla Web
Any site with a <script> or "Custom HTML" embed slot	Vanilla Web
Static site generators (Astro, Eleventy, Hugo)	Vanilla Web in a client island
React (CRA, Vite, custom)	React / Next.js
Next.js, Remix, Gatsby (SSR/SSG with React)	React / Next.js + client-only wrapper
Framer	Framer
Vue / Svelte / Solid / Angular	Vanilla Web inside a client-only component
iOS, Android, Flutter, React Native	Use the Rive native runtimes — see rive.app/docs. The .riv file Lupian sends you works on every Rive runtime.

Why Vanilla Web is the default

• It works in every web environment without modification.
• No build tool required.
• The artboard, state machine, input and event names are the same whether you load the file from vanilla JS, React, or Framer.
• You can switch to React or Framer later without changing the .riv file.

What stays the same across stacks

The .riv file, and the names inside it:

• Artboard name (e.g. Hero).
• State machine name (e.g. State Machine 1).
• Input names and types (boolean, number, trigger).
• Event names fired by the animation.

These are set by Lupian in the Rive editor. Your wrapper code just references them — the names should match what we send in your handoff notes exactly.

Next step

• Default: Vanilla Web recipe.
• React/Next: React / Next.js recipe.
• Framer: Framer recipe.
• First, check what Lupian sends you so the names in the snippet match your file.