Load and show your Ready Player Me avatars on the web.
In the Quickstart you learned how to open the Avatar Creator in an iframe and get a valid Avatar URL.
This guide will teach you how to display the avatar in your website or app. Loading and displaying the avatars in your web app or page requires a webGL-based rendering tool and the Canvas.
There are many different open source options. We recommend model-viewer, as it is straightforwad to get started.

Model Viewer

The easiest way to load and display avatars on a web-page is to use the open-source package model-viewer ( The following example shows how to import and use the model-viewer for loading a Ready Player Me avatar.
  1. 1.
    Copy the code below into a file and open it in your browser.
  2. 2.
    Change the avatar URL to display a different avatar.
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script type="module" src=""></script>
#modelviewer {
height: 400px;
width: 600px;
<model-viewer id="modelviewer" alt="Ready Player Me Avatar"
src="" shadow-intensity="1" camera-controls