> ## Documentation Index
> Fetch the complete documentation index at: https://rive.app/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Getting Started

> Install the Rive Unreal plugin, run your first Artboard via URiveActorComponent, and display it in UMG.

This guide walks you through installing the Rive Unreal plugin, importing a `.riv` file, and displaying it in UMG.

<Info>
  **Prerequisites**

  * Unreal Engine 5.6 or above.
  * A C++ toolchain. The Rive plugin is a C++ plugin, so it's compiled as part
    of your project regardless of how you install it:
    * **Windows**: Visual Studio 2022 with the **Game development with C++**
      workload (it includes the Windows SDK and .NET components Unreal needs).
    * **macOS**: Xcode with the command-line tools (`xcode-select --install`).
</Info>

## 1) Install the Plugin

<Tabs>
  <Tab title="Fab (Recommended)">
    <Steps>
      <Step>
        Open the Epic Games Launcher or Unreal Editor.
      </Step>

      <Step>
        Open Fab.
      </Step>

      <Step>
        Search for Rive or go directly to:\
        [https://www.fab.com/listings/3a2968c1-4a1d-427c-934e-92e4d8578b77](https://www.fab.com/listings/3a2968c1-4a1d-427c-934e-92e4d8578b77)
      </Step>

      <Step>
        Add the plugin to your engine or project.
      </Step>

      <Step>
        Restart Unreal Engine if prompted.
      </Step>
    </Steps>
  </Tab>

  <Tab title="GitHub">
    <Steps>
      <Step>
        Clone the repository:

        ```bash theme={null}
        git clone https://github.com/rive-app/rive-unreal.git
        ```
      </Step>

      <Step>
        Copy the `Rive` plugin folder into your project's `Plugins/` directory.
      </Step>
    </Steps>
  </Tab>
</Tabs>

## 2) Build the Project

The Rive plugin is C++, so your project must be compiled before the editor
can load it.

<Tabs>
  <Tab title="Windows">
    <Steps>
      <Step>
        Right-click your `.uproject` file and choose **Generate Visual Studio
        project files**.
      </Step>

      <Step>
        Open the generated `.sln` in Visual Studio 2022.
      </Step>

      <Step>
        Set the configuration to **Development Editor** / **Win64** and build.
      </Step>
    </Steps>
  </Tab>

  <Tab title="macOS">
    <Steps>
      <Step>
        Right-click your `.uproject` file and choose **Generate Xcode
        project**.
      </Step>

      <Step>
        Open the generated project in Xcode and build the editor target.
      </Step>
    </Steps>
  </Tab>
</Tabs>

Alternatively, double-click the `.uproject` directly — if the plugin modules
aren't built, Unreal offers to rebuild them; click **Yes**.

## 3) Enable the Plugin

1. Open Edit → Plugins.
2. Locate Rive under Runtime.
3. Enable the plugin.
4. Restart the editor if required.

## 4) Import a Rive File

1. Open the Content Browser.
2. Drag and drop a `.riv` file into your project.

Unreal creates a **Rive File** asset. You can inspect this asset by double-clicking it.

<Info>
  A **Rive File** is an Unreal asset. It does not render directly.
</Info>

<Warning>
  The Unreal runtime does not yet support referenced assets. Be sure to embed all assets in the `.riv` file.
</Warning>

## 5) Create a Widget

1. Right-click on the **Rive file** asset and select **Create Rive Widget** from the context menu.

<Frame>
  <img src="https://mintcdn.com/rive/a3RZupK5rr01QGMI/images/unreal/DuelistContextMenu.png?fit=max&auto=format&n=a3RZupK5rr01QGMI&q=85&s=517347c8b6b6b4d0933d778737d19bf4" alt="Duelist Context Menu" className="mx-auto" style={{ width:"73%" }} width="426" height="344" data-path="images/unreal/DuelistContextMenu.png" />
</Frame>

You can inspect the created widget by double-clicking it.

<Frame>
  <img className="hidden dark:block" src="https://mintcdn.com/rive/a3RZupK5rr01QGMI/images/unreal/DuelistWidgetInspector.png?fit=max&auto=format&n=a3RZupK5rr01QGMI&q=85&s=c2096271ff7b9d0dc2ed647ce5c211af" alt="Duelist Widget Inspector" width="3399" height="1780" data-path="images/unreal/DuelistWidgetInspector.png" />

  <img className="dark:hidden" src="https://mintcdn.com/rive/a3RZupK5rr01QGMI/images/unreal/DuelistWidgetInspector.png?fit=max&auto=format&n=a3RZupK5rr01QGMI&q=85&s=c2096271ff7b9d0dc2ed647ce5c211af" alt="Duelist Widget Inspector" width="3399" height="1780" data-path="images/unreal/DuelistWidgetInspector.png" />
</Frame>

## 6) Create a Blueprint

1. You can now use the widget in a blueprint just as you would any other widget.

   <Frame>
     <img src="https://mintcdn.com/rive/a3RZupK5rr01QGMI/images/unreal/DuelistAddWidgetBP.png?fit=max&auto=format&n=a3RZupK5rr01QGMI&q=85&s=5fe92d5291013390c2fff2b7a51cdeff" alt="Duelist Add Widget BP" className="hidden dark:block" width="4335" height="999" data-path="images/unreal/DuelistAddWidgetBP.png" />

     <img src="https://mintcdn.com/rive/a3RZupK5rr01QGMI/images/unreal/DuelistAddWidgetBP.png?fit=max&auto=format&n=a3RZupK5rr01QGMI&q=85&s=5fe92d5291013390c2fff2b7a51cdeff" alt="Duelist Add Widget BP" className="dark:hidden" width="4335" height="999" data-path="images/unreal/DuelistAddWidgetBP.png" />
   </Frame>

## 7) Bind a ViewModel

If the Rive File is not using **autobinding**, you must assign a viewmodel. This can be done in blueprints using the **Make View Model** node.

<Frame>
  <img src="https://mintcdn.com/rive/a3RZupK5rr01QGMI/images/unreal/DuelistSetViewModel.png?fit=max&auto=format&n=a3RZupK5rr01QGMI&q=85&s=a13159226bdbd07b01a841309e2eaee5" alt="Duelist Set View Model" className="hidden dark:block" width="1780" height="799" data-path="images/unreal/DuelistSetViewModel.png" />

  <img src="https://mintcdn.com/rive/a3RZupK5rr01QGMI/images/unreal/DuelistSetViewModel.png?fit=max&auto=format&n=a3RZupK5rr01QGMI&q=85&s=a13159226bdbd07b01a841309e2eaee5" alt="Duelist Set View Model" className="dark:hidden" width="1780" height="799" data-path="images/unreal/DuelistSetViewModel.png" />
</Frame>

Your **Rive File** is now setup for use in your application. The next page will show you how to observe changes in the ViewModel.

<img src="https://mintcdn.com/rive/a3RZupK5rr01QGMI/images/unreal/DuelistScreenshotUE.png?fit=max&auto=format&n=a3RZupK5rr01QGMI&q=85&s=01076c5c827eecff8daa838d37f9913e" alt="Duelist Screenshot UE" className="hidden dark:block" width="3199" height="1800" data-path="images/unreal/DuelistScreenshotUE.png" />

<img src="https://mintcdn.com/rive/a3RZupK5rr01QGMI/images/unreal/DuelistScreenshotUE.png?fit=max&auto=format&n=a3RZupK5rr01QGMI&q=85&s=01076c5c827eecff8daa838d37f9913e" alt="Duelist Screenshot UE" className="dark:hidden" width="3199" height="1800" data-path="images/unreal/DuelistScreenshotUE.png" />
