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

# Show the avatar

> Display a session in React or a browser custom element.

Send `avatar.session` from your backend to the browser. Keep your Cloud API key and publisher token on the backend.

## React

```bash theme={null}
npm install @openspline/react
```

```tsx theme={null}
import { Avatar } from "@openspline/react";

<Avatar session={session} />
```

The package also exports `useAvatar()`.

## Browser custom element

```bash theme={null}
npm install @openspline/browser
```

```js theme={null}
import { registerAvatarElement } from "@openspline/browser/element";

registerAvatarElement();
document.querySelector("openspline-avatar").session = session;
```

```html theme={null}
<openspline-avatar></openspline-avatar>
```

Both players handle connection and autoplay permission. For the server's WebSocket transport, pass `{ ...session, transport: "websocket" }`; otherwise they use WebRTC. The built in `avatar.viewer_url` is the fastest way to watch a session.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.