Exported Files

Understanding the Format and Parsing

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!

Binary

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.

JSON

The JSON format is the serialized version of animations, nodes, bones and image data in a (mostly) human-readable format.

Export Format to Runtime Matrix

Binary

JSON

Flare Flutter

Yes

Yes

Flare Swift

Yes

Flare-JS

Yes

Yes

Flare C++

Yes

Flare React

Yes

Yes

Flare Framer

Yes

Yes

Exporting from Rive

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.

Importing Files To Projects

In most cases, you can simply drag and drop your '.rive' file into your projects folder, however some folders are structured slightly differently.

C++

Once you have downloaded the '.rive' file, navigate to your C++ project directory and drop the file into the 'assets' folder.

Swift

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'.

Flutter

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'.

JS

Once you have downloaded the '.rive' file, navigate to your JS project directory and drop the file into the 'resources' folder.

React

Once you have downloaded the '.rive' file, navigate to your React project directory and drop the file into the 'src' folder.