make the web feel alive

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

toggles for everyone live!

Communal by default. Shared state, presence, and cursors for shared spaces rather than solitary feeds.
Library-agnostic, fast, expressive. Works with plain HTML, React, or any framework.
No backend to run. Real-time sync and persistence taken care of.
Customize as needed. Extend the library with your own expressive experiences.

FIG. 01 · 30-second install

Vanilla HTML
React

<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 →