Live avatar stack

See users currently online with <LiveAvatars>

Open page in two windows

How to use

Add <LiveAvatars>. If the user has no picture, a placeholder made from the user's color and name will be displayed. Change size="" and show="" attributes for more options.

---
import LiveAvatars from 'astro-collab/LiveAvatars.astro'
---
<!-- Basic -->
<LiveAvatars></LiveAvatars>

<!-- Change avatar size (pixels) -->
<LiveAvatars size="32"></LiveAvatars>

<!-- Only show your avatar -->
<LiveAvatars show="self"></LiveAvatars>

<!-- Only show other people's avatars -->
<LiveAvatars show="others"></LiveAvatars>

---
import 'astro-collab/live-avatars'
---
<!-- Basic -->
<live-avatars client:load></live-avatars>

<!-- Change avatar size (pixels) -->
<live-avatars size="32" client:load></live-avatars>

<!-- Only show your avatar -->
<live-avatars show="self" client:load></live-avatars>

<!-- Only show other people's avatars -->
<live-avatars show="others" client:load></live-avatars>

A minimal working example can be found here.

Customise

Customise with CSS parts:

<style is:global>
  live-avatars::part(avatar) {
    padding: 12px;
  }

  live-avatars::part(avatar_picture_wrapper) {
    border: 2px solid black;
  }
</style>

All CSS parts:

user,
avatars,
avatar,
avatar_picture_wrapper,
avatar_picture,
avatar_fallback

Important note

All multiplayer components must be wrapped in a single LiveblocksRoom component, check the quick start guide for more info.

Components

@ctnicholasdev