https://github.com/mandrasch/rive-vite-demo
Simple demo repository for usage of Rive in Vite projects.
https://github.com/mandrasch/rive-vite-demo
javascript rive vite webgl
Last synced: 2 months ago
JSON representation
Simple demo repository for usage of Rive in Vite projects.
- Host: GitHub
- URL: https://github.com/mandrasch/rive-vite-demo
- Owner: mandrasch
- Created: 2023-12-23T11:52:18.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-28T14:57:21.000Z (over 2 years ago)
- Last Synced: 2025-01-23T14:36:24.188Z (over 1 year ago)
- Topics: javascript, rive, vite, webgl
- Language: HTML
- Homepage: https://rive-vite-demo.vercel.app
- Size: 112 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# rive-vite-demo
Simple demo repository for usage of [Rive](https://rive.app/) in Vite projects. Have fun!
## Local setup
```
npm i
npm run dev
```
You can also open the repository in StackBlitz:
[](https://stackblitz.com/github/mandrasch/rive-vite-demo)
_(If you experience errors, disable Ad or Tracking blockers)_
## TODOs / goals
- [ ] Integrate simple example for State Machines (https://marmelab.com/blog/2023/01/30/rive-animation-state-machine.html)
## How was this created?
```
# https://vitejs.dev/guide/
npm create vite@latest . -- --template vanilla-ts
# https://help.rive.app/runtimes/overview/web-js
npm install @rive-app/canvas
```
Modified the loading with help of [@Aratmany](https://github.com/Aratmany) in this [thread](https://github.com/rive-app/rive-wasm/issues/342#issuecomment-1877085435). Thanks very much!
Added `src/vite-env-override.d.ts` for .riv files, included this in `src/vite-env.d.ts` ([Vite Client Types](https://vitejs.dev/guide/features.html#client-types)).
## Credits
- vehicles.riv - example file provided by Rive