Your name and color

Every reader has a name and a color that playhtml saves for them. This example shows yours and lets you change them. The change is saved for your next visit and shows up for everyone else on the page.

Live exampleRoom connecting…

RemixCopy private-window link

Test it with another person

1. Keep this page open in your normal window.
2. Copy the private-window link, then paste it into a private or incognito window.
3. Interact in either window and watch the other one update.

Copy the code

Both versions use the same shared data and behavior. The live playground runs the Vanilla HTML version.

Vanilla HTML

Save this as index.html, or open it in the playground to test and change it.

Remix

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Your name and color</title>
  <style>
    :root {
      color: #1c1c1c;
      background: #f4efe5;
      font-family: ui-sans-serif, system-ui, sans-serif;
    }
    * { box-sizing: border-box; }
    body { display: grid; min-height: 100vh; margin: 0; padding: 1.5rem; place-items: center; }
    .me {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      font-size: 1.25rem;
    }
    .dot {
      width: 28px;
      height: 28px;
      border: 1.5px solid #1c1c1c;
      border-radius: 50%;
    }
    label {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-top: 0.75rem;
    }
  </style>
</head>
<body>
  <main>
    <p id="me" class="me"><span class="dot"></span><span class="name">connecting…</span></p>
    <label>name <input id="my-name" placeholder="your name" /></label>
    <label>color <input id="my-color" type="color" /></label>
  </main>

  <script type="module">
    import { playhtml } from "https://unpkg.com/playhtml@latest";

    const card = document.getElementById("me");
    const nameInput = document.getElementById("my-name");
    const colorInput = document.getElementById("my-color");

    // playhtml.people is available once playhtml has connected.
    playhtml.ready.then(() => {
      const { people } = playhtml;

      // Calls back now, then whenever someone's name or color changes
      // (including yours from another tab).
      people.onChange(() => {
        card.querySelector(".name").textContent = people.me.name ?? "anonymous";
        card.querySelector(".dot").style.background = people.me.color;
        if (document.activeElement !== nameInput) {
          nameInput.value = people.me.name ?? "";
        }
        colorInput.value = people.me.color;
      });

      // Setting me.name or me.color saves it for your next visit and shows it
      // to everyone.
      nameInput.addEventListener("change", () => {
        people.me.name = nameInput.value.trim();
      });
      colorInput.addEventListener("input", () => {
        people.me.color = colorInput.value;
      });
    });

    await playhtml.init({ developmentMode: true });
  </script>
</body>
</html>

React

Start with a React + TypeScript project, install the packages below, then replace src/App.tsx with the component.

npm install playhtml @playhtml/react

import { PlayProvider, playhtml, usePeople } from "@playhtml/react";

function YourNameAndColor() {
  // Re-renders when anyone joins, leaves, or changes their name or color.
  const { me } = usePeople();

  // Setting me.name or me.color saves it for your next visit and shows it
  // to everyone.
  return (
    <div>
      <p className="me">
        <span className="dot" style={{ background: me.color }} />
        <span>{me.name || "anonymous"}</span>
      </p>
      <label>
        name
        <input
          value={me.name ?? ""}
          placeholder="your name"
          onChange={(event) => (playhtml.people.me.name = event.target.value)}
        />
      </label>
      <label>
        color
        <input
          type="color"
          value={me.color}
          onChange={(event) => (playhtml.people.me.color = event.target.value)}
        />
      </label>
    </div>
  );
}

export default function App() {
  return (
    <PlayProvider initOptions={{ developmentMode: true }}>
      <main>
        <YourNameAndColor />
      </main>

      <style>{`
        :root { color: #1c1c1c; background: #f4efe5; font-family: system-ui, sans-serif; }
        * { box-sizing: border-box; }
        body { margin: 0; }
        #root { display: grid; min-height: 100vh; padding: 1.5rem; place-items: center; }
        .me {
          display: flex;
          align-items: center;
          gap: 0.6rem;
          font-size: 1.25rem;
        }
        .dot {
          width: 28px;
          height: 28px;
          border: 1.5px solid #1c1c1c;
          border-radius: 50%;
        }
        label {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          margin-top: 0.75rem;
        }
      `}</style>
    </PlayProvider>
  );
}

Read yours

playhtml.people.me is you. Read it once playhtml is ready, and use onChange to update when it changes:

playhtml.ready.then(() => {
  playhtml.people.onChange(() => {
    render(playhtml.people.me.name ?? "anonymous", playhtml.people.me.color);
  });
});

In React, usePeople().me re-renders for you.

Change yours

Set me.name or me.color from a user event. It saves and reaches everyone right away:

playhtml.people.me.name = "Ana";
playhtml.people.me.color = "#3b82f6";

See names and colors for the full API.