Live Avatar Stack

This example shows how to build a live avatar stack with Liveblocks and Solid.js

Image of Live Avatar Stack

Getting started

Run the following command to try this example locally:

$npx create-liveblocks-app@latest --example solidjs-live-avatars --no-api-key --no-vercel

This will download the example and install the example. Next, you must:

  • Create an account on liveblocks.io
  • Copy your public key from the dashboard
  • Replace pk_YOUR_PUBLIC_KEY in src/index.jsx with your public key
  • Run npm run dev and open http://localhost:3000 in your browser

Manual setup

Alternatively, you can set up your project manually:

  • Install all dependencies with npm install
  • Create an account on liveblocks.io
  • Copy your public key from the dashboard
  • Replace pk_YOUR_PUBLIC_KEY in src/index.jsx with your public key
  • Run npm run dev and open http://localhost:3000 in your browser

Deploy on Vercel

To both deploy on Vercel, and run the example locally, use the following command:

$npx create-liveblocks-app@latest --example solidjs-live-avatars --vercel

This will download the example and ask permission to open your browser, enabling you to deploy to Vercel. Next, you must:

  • Create an account on liveblocks.io
  • Copy your public key from the dashboard
  • Replace pk_YOUR_PUBLIC_KEY in src/index.jsx with your public key
  • Push a commit to update the Vercel demo with the key
  • Run npm run dev and open http://localhost:3000 in your browser

Develop on CodeSandbox

After forking this example on CodeSandbox, create the pk_YOUR_PUBLIC_KEY environment variable as a public.

We use cookies to collect data to improve your experience on our site. Read our Privacy Policy to learn more.