A React application for interactive testing and visualization of Rive animations. This playground allows you to upload, view, and interact with Rive animations directly in the browser.
- Upload and view Rive animation files
- Inspect animation structure, artboards, state machines, and inputs
- Play and control animations
- Test state machine interactions
- Responsive layout with modern UI
- React 19
- TypeScript
- Vite
- Tailwind CSS
- Shadcn UI components
- Rive React Canvas library
- Node.js (LTS version recommended)
- pnpm
- Clone the repository
git clone https://github.com/yourusername/rive-playground.git
cd rive-playground- Install dependencies
pnpm install- Start the development server
pnpm dev- Open your browser and navigate to
http://localhost:5173
- Upload a Rive animation file (.riv)
- The playground will display the animation
- Explore artboards, animations, and state machines
- Test inputs and interactions with the animation
pnpm buildThe build artifacts will be stored in the dist/ directory.
This project is open source under the MIT license.