# playhtml > Create interactive, collaborative html elements with a single attribute Latest version **2.16.0** (published 2026-11-04) · MIT license · 0 weekly downloads ## Install ```sh npm install playhtml pnpm add playhtml yarn add playhtml bun add playhtml ``` ## Health **Score 75/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 2.16.0 | | Published | 2026-11-04 | | First published | 2023-07-06 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 6 | | Unpacked size | 1.8 MB | | Known vulnerabilities | 0 | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 517 | | Author | Spencer Chang | | Maintainers | spencerc99 | | Keywords | html, collaboration, fun, real-time, persistence, html energy | ## Links - npm: https://www.npmjs.com/package/playhtml - Repository: https://github.com/spencerc99/playhtml - Homepage: https://playhtml.fun - Issues: https://github.com/spencerc99/playhtml/issues - Funding: https://github.com/sponsors/spencerc99 - npm.io page: https://npm.io/package/playhtml ## Dependencies (6) - [yjs](https://npm.io/package/yjs.md) 13.6.18 - [lit-html](https://npm.io/package/lit-html.md) ^3.2.1 - [partysocket](https://npm.io/package/partysocket.md) ^1.2.0 - [y-partyserver](https://npm.io/package/y-partyserver.md) ^2.2.0 - [@playhtml/common](https://npm.io/package/@playhtml/common.md) ^0.11.0 - [@syncedstore/core](https://npm.io/package/@syncedstore/core.md) ^0.6.0 ## Alternatives - [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads - [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads - [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads - [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads - [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads ## Recent versions - 2.16.0 (latest) — 2026-11-04 - 2.11.0-view-b6379a202ef33d01adc7fb9defe2f13b6e70617c (view) — 2026-06-22 - 2.11.0-next-60ccf229ca04485ccec2d4964e1b64da3e6fe960 (next) — 2026-06-22 - 2.1.12-beta.0 (beta) — 2024-08-13 - 2.15.1 — 2026-10-30 - 2.15.0 — 2026-09-25 - 2.14.1 — 2026-08-11 - 2.14.0 — 2026-08-05 - 2.13.2 — 2026-07-23 - 2.13.1 — 2026-07-06 - 2.13.0 — 2026-07-06 - 2.12.0 — 2026-07-02 - 2.11.3 — 2026-06-30 - 2.11.2 — 2026-06-29 - 2.11.1 — 2026-06-29 - … 64 more at https://npm.io/package/playhtml/versions ## README # playhtml 🛝🌐 [![npm release](https://img.shields.io/npm/v/playhtml?color=%23ff980c)](https://www.npmjs.com/package/playhtml) [![Downloads](https://img.shields.io/npm/dm/playhtml)](https://www.npmjs.com/package/playhtml) [![Size](https://img.shields.io/bundlephobia/min/playhtml?color=%23c6e1ea)](https://www.npmjs.com/package/playhtml) _interactive, collaborative HTML elements with a single data attribute_ playhtml is a fast, small (~300KB), library-agnostic, and expressive library for magically creating collaborative interactive HTML elements that persist their state across sessions. It aims to be infrastructure for creating lived-in, alive internet spaces filled with traces of past visitors and the life of present visitors. ```html
🛋
``` That's it. The couch is draggable for everyone on the page, and its position persists across sessions. https://github.com/spencerc99/playhtml/assets/14796580/00e84e15-2c1c-4b4b-8e15-2af22f39db7a **📚 [Full documentation →](https://playhtml.fun/docs/)** playhtml is in beta and actively developed. Join the [Discord](https://discord.com/invite/SKbsSf4ptU) to get help and show what you've built. ## 30-second install **Vanilla HTML** — drop in from a CDN, no build step: ```html
🛋
``` **React:** ```bash npm install playhtml @playhtml/react ``` ```tsx import { PlayProvider, CanMoveElement } from "@playhtml/react";
🛋
 ; ``` See [getting started](https://playhtml.fun/docs/getting-started/) for both paths in depth. React users should also read the [React API reference](https://playhtml.fun/docs/reference/react-api/). ## What's in the box **Built-in capabilities** — drop these attributes on any element: | Attribute | What it does | | --------------- | ------------------------------------------------------------- | | `can-move` | Drag anywhere; position persists and syncs | | `can-toggle` | Click to flip an on/off state | | `can-spin` | Rotate by dragging | | `can-grow` | Click to scale up, alt-click to scale down | | `can-duplicate` | Click to clone a target element | | `can-mirror` | Auto-sync attributes, children, and form state (experimental) | | `can-hover` | Sync hover state across users | | `can-play` | Fully custom capability with your own logic | Each has a live demo and full docs in the [capabilities reference](https://playhtml.fun/docs/capabilities/). **Beyond capabilities:** - **[Element data](https://playhtml.fun/docs/concepts/)** — persistent, synced state scoped to a single element - **[Page-level data](https://playhtml.fun/docs/data/page-data/)** — shared data channels not tied to DOM elements (counters, votes, etc.) - **[Presence & cursors](https://playhtml.fun/docs/data/presence/)** — ephemeral per-user state with custom channels, plus multiplayer cursors - **[Events](https://playhtml.fun/docs/data/events/)** — fire-and-forget broadcasts for transient actions (confetti, pings) - **[Shared elements](https://playhtml.fun/docs/advanced/shared-elements/)** — cross-page and cross-domain state for interconnected sites - **[Dynamic elements](https://playhtml.fun/docs/advanced/dynamic-elements/)** — `setupPlayElement` and `selector-id` for runtime-added nodes - **[SPA navigation](https://playhtml.fun/docs/advanced/navigation/)** — works with Astro ViewTransitions, React Router, Next.js, htmx boost, Turbo ## Building with AI Point any coding agent (Claude, Codex, Cursor, Copilot, ChatGPT, ...) at one guide: ```text Read https://playhtml.fun/docs/llms.txt first, then help me build a playhtml element that... ``` Or install it as a skill so your agent picks it up automatically: ```bash npx skills add spencerc99/playhtml --skill building-playhtml-elements ``` More options in the [building with AI](https://playhtml.fun/docs/integrations/building-with-ai/) guide. ## Examples - Live demos at [playhtml.fun](https://playhtml.fun) and [playhtml.fun/experiments/](https://playhtml.fun/experiments/) - Source examples in `website/` and `packages/react/examples/` - Capability demos (interactive, running side-by-side with the code) on every [capabilities page](https://playhtml.fun/docs/capabilities/) ## Help & Community - **Docs:** [playhtml.fun/docs](https://playhtml.fun/docs/) - **Discord:** [discord.gg/SKbsSf4ptU](https://discord.gg/SKbsSf4ptU) - **Email:** [hi@spencer.place](mailto:hi@spencer.place) ## Data policy All data is currently stored by a [PartyKit](https://partykit.dev) instance under my account and is not encrypted. Anyone with the room name can access the data. Custom persistence options (your own storage backend) are on the roadmap. ## Contributing See [CONTRIBUTING.md](CONTRIBUTING.md). Contributions for new built-in capabilities are especially welcome — the same `can-play` API powers all of them. ## Support & Maintenance If you enjoy using this, please consider [sponsoring the project](https://github.com/sponsors/spencerc99). This helps fund the hosting costs for the syncing and persistence services and keeps the library maintained over time. ## Licensing This repository uses two licenses: - **MIT** — applies to `packages/` (the playhtml library, React bindings, shared types, extension-types package). See [`LICENSE`](LICENSE). - **CC BY-NC-ND 4.0** — applies to everything else (`website/`, `extension/`, `tools/`, `apps/docs/`), which contain Spencer's personal art, product copy, visualizations, and exhibition work. See [`LICENSE-ART`](LICENSE-ART). The library is free to use, modify, and embed commercially. The art, experiments, and extension UI are visible as receipts of authorship but may not be copied commercially or redistributed as derivatives. --- _Source: https://npm.io/package/playhtml · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._