Getting started

playhtml makes HTML elements live and shared. Add an attribute like can-toggle to an element, and when anyone changes it, everyone on the page sees the change. The new state is saved for the next visitor too.

You don’t need a backend. Elements sync through a server we run, or you can run your own.

Try it

This switch is shared with everyone reading this page right now. Flip it.

Make your own

Vanilla HTML

Add can-toggle and a unique id to an element, then add the playhtml script at the end of <body>:

<body>
  <div id="my-light" class="light" can-toggle></div>

  <style>
    .light {
      width: 80px; height: 80px; border-radius: 50%;
      background: gold; filter: brightness(0.4);
    }
    /* can-toggle adds the "toggled" class when the light is on */
    .light.toggled {
      filter: brightness(1.2) drop-shadow(0 0 24px gold);
    }
  </style>

  <script type="module" src="https://unpkg.com/playhtml/dist/init.es.js"></script>
</body>

Open the page in two windows and click the light. It turns on in both.

The id is how playhtml tells elements apart, so each one needs its own. The script goes after your elements because it looks for them as soon as it loads.

To pass options, like showing everyone’s cursors, import playhtml and call init() yourself instead of using the script tag above:

<script type="module">
  import { playhtml } from "https://unpkg.com/playhtml";
  playhtml.init({ cursors: { enabled: true } });
</script>

React

Install playhtml and its React package (React 16.8 and up):

npm install playhtml @playhtml/react

Wrap your app in PlayProvider once, then wrap an element in CanToggleElement. The element needs a unique id.

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

export function App() {
  return (
    <PlayProvider>
      <CanToggleElement>
        <div id="my-light" className="light" />
      </CanToggleElement>
    </PlayProvider>
  );
}

CanToggleElement adds the toggled class when the light is on:

.light {
  width: 80px; height: 80px; border-radius: 50%;
  background: gold; filter: brightness(0.4);
}
.light.toggled {
  filter: brightness(1.2) drop-shadow(0 0 24px gold);
}

Open the page in two windows and click the light. It turns on in both.

To pass options, like showing everyone’s cursors, use <PlayProvider initOptions={{ cursors: { enabled: true } }}>.

Where to next

Read these in order:

1. Core concepts: the three things playhtml shares (data on elements, the people on the page, and events) and when to use each.
2. Built-in elements: every can-* attribute (move, spin, grow, and more) with live demos.
3. Custom elements: build your own shared element, like a counter or a guestbook.
4. People and presence: who’s on the page, their names and colors, and cursors.

Using a coding agent? See Building with AI.

Join the community

Share what you’ve made, get help, and see what others are building on Discord.

Join the playhtml Discord