Exported Files
Understanding the Format and Parsing
This is the manual for the old version of Rive (formerly Flare). Visit the Help Center for the new Rive here.
Each time you make a change to your Rive project in the editor, you must re-export the file in order for those changes to update within your project. Rive can export your asset as either a JSON or binary data. The runtime you are using will determine how you may export your asset (see chart below). Each runtime has its own parser built in, so no need to write one yourself!
The exported binary file holds everything in a smaller file that is quicker to load at runtime. Everything is stored in a non-human readable format, including image, bone, node, and animation data.
The JSON format is the serialized version of animations, nodes, bones and image data in a (mostly) human-readable format.
| Binary | JSON |
Flare Flutter | Yes | Yes |
Flare Swift | Yes | |
Flare-JS | Yes | Yes |
Flare C++ | Yes | |
Flare React | Yes | Yes |
Flare Framer | Yes | Yes |
When you are ready to integrate your Rive file into your project you can export a '.flr' file from the editor. By clicking the top right 'Export' icon, you can either export the '.rive' file to be used in your project or download a copy of the entire Rive file as '.rive-app'.
Export Button on Top Left
Upon selecting the 'Export' option in the above menu, you can either export it as a Binary or JSON. This format will depend on which runtime you are using, you can reference the chart above.
Toggle Options
When you have made your selections, you can click the 'Export' button and a '.rive' file will be downloaded to your 'Downloads' folder.
In most cases, you can simply drag and drop your '.rive' file into your projects folder, however some folders are structured slightly differently.
Once you have downloaded the '.rive' file, navigate to your C++ project directory and drop the file into the 'assets' folder.
Once you have downloaded the '.rive' file, navigate to your Xcode project and drop the file into the folder, when prompted make sure to 'Add to targets'.
Once you have downloaded '.rive' file, navigate to your project directory and add the 'assets' folder and drop the file into the newly created 'assets' folder.
Then you need to update the project's 'pubspec.yaml' to include your '.rive' file under 'assets'.
Once you have downloaded the '.rive' file, navigate to your JS project directory and drop the file into the 'resources' folder.
Once you have downloaded the '.rive' file, navigate to your React project directory and drop the file into the 'src' folder.
Last modified 2yr ago