Set up your data

Welcome! This guide will walk you through the basics of setting up your first project in Quadraviz. In just a few steps, you'll go from a blank dashboard to a live interactive overlay powered by your data!

Before you start

To follow along with this tutorial, make sure you have:

• A Quadraviz account

• A Rive animation (.riv file)
  We recommend starting with the example file provided here, but you're welcome to use your own.

Step 1: Create your data categories

To organize your data:

1. Open the Quadraviz Controller.

2. Navigate to the Resources tab.

3. Click the + New category button to create a new category.

4. Enter a clear and descriptive name, then click Next.

5. If you already have a category, you can use it as a nested category to create reusable, structured types.

Example: Category structure

Player category

• Player Name

• Player Age

• Player Image

Team of 5 players category

• Team name

• Team logo

• Primary color

• Secondary color

• 5 nested player fields, each representing a role:

  • Top

  • Jungle

  • Mid

  • ADC

  • Support

Step 2: Set up your data

With categories in place, you can now create your actual resources, the data entries.

➤ Create player resources

1. Go to the Player category.

2. Click "New Resource".

3. Fill in the player's Name, Age, and Image.

4. Click Save.

5. Repeat for each of the five players.

➤ Create a team resource

1. Go to the Team category.

2. Click "New Resource".

3. Fill in the team's Name, Logo, Primary and Secondary Colors.

4. For each role (Top, Jungle, etc.), select the corresponding player from your existing Player resources.

5. Click Save.

Step 3: Configure your .riv file

Now that your data is ready, it’s time to link it to your animation.

In the next section, we’ll cover:

• How to import your .riv file into Quadraviz

• How to switch image assets from embedded to referenced

• How to set up animation states (idle, in, out)

• How to bind data from your resources to Rive components using Smart Inputs

→ Continue to: Setting up your Rive file