make the web feel alive

Turn any element into a live, shared one with a single attribute, no backend required.

toggles for everyone live!

Make the web feel alive. Turn static web pages into dynamic, living spaces.
Fully customizable. Use built-in capabilities to get started or build your own social experiences.
Library-agnostic, fast, expressive. Works with plain HTML, React, or any framework.
No backend to run. Real-time sync and persistence taken care of. Self-host for full control.

FIG. 01 · 30-second install

<img can-toggle id="lamp" src="https://playhtml.fun/noguchi-hanging-lamp.png" />
<div style="width: 100px; height: 100px;" can-move>🛋️</div>
<script type="module">
  import { playhtml } from "https://unpkg.com/playhtml";
  playhtml.init();
</script>

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

<PlayProvider>
  <CanMoveElement style={{ width: "100px", height: "100px" }}>
    <div>🛋️</div>
  </CanMoveElement>
  <CanToggleElement>
    <img id="lamp" src="https://playhtml.fun/noguchi-hanging-lamp.png" />
  </CanToggleElement>
</PlayProvider>

FIG. 02 · start here

Getting started

Install playhtml and ship your first live element. Read →

Core concepts

Element data, page data, presence, events: when to use each. Read →

Capabilities

Every built-in can-* attribute with live demos. Read →