Recipestarter
Drag with can-move
Drag two shared stickers inside a bounded area and keep their positions across reloads.
- can-move
- dragging
- bounds
Examples
Browse complete PlayHTML recipes and smaller live demos from across the docs. Recipes open on their own page and can be remixed in the playground. Docs demos jump to the guide that explains them. The Sites collection shows finished work made with PlayHTML and opens each project on its original URL.
To test a collaborative example, open it in two browser windows. Use a regular and private window, or use two different browsers. Then follow the steps on the example page.
19 results
Sites are curated on Are.na
Loading sites from Are.na…
Examples
Recipestarter
Switch with can-toggle
Share one persistent on or off switch with every connected browser.
- can-toggle
- switch
- boolean
Recipestarter
Presence with can-hover
Show an ephemeral hover effect to everyone while any connected reader is hovering.
- can-hover
- hover
- presence
Recipestarter
Emoji-only mirrored textarea
Filter a textarea to emoji while can-mirror shares its current value.
- can-mirror
- textarea
- input filtering
Recipestarter
Growing mirrored list
Append direct list children and let can-mirror share the resulting DOM.
- can-mirror
- dynamic DOM
- lists
Recipestarter
Shared click counter
Increment one persistent count with a merge-safe can-play data update.
- can-play
- counter
- shared data
Recipeintermediate
Shared guestbook
Add short notes to a persistent shared list capped at the latest 20 entries.
- can-play
- guestbook
- shared list
Recipeintermediate
Shared audio file
Play, pause, and restart one audio file for everyone using a shared timeline.
- can-play
- audio
- audio file
Recipeadvanced
Synchronized sound
Send a one-shot cue to everyone currently connected, or share a loop that late joiners can join.
- can-play
- events
- audio
Recipeadvanced
Shared Matter.js physics
Drag, drop, add, and reset a small set of physics bodies shared across browsers.
- can-play
- physics
- Matter.js
Docs demostarter
Grow a balloon
Grow or shrink a balloon and share its current scale.
- can-grow
- scale
- click
Docs demostarter
Spin a wheel
Drag a wheel to rotate it for everyone on the page.
- can-spin
- rotation
- dragging
Docs demointermediate
Duplicate rabbits
Create shared copies from one template and reset the collection.
- can-duplicate
- cloning
- dynamic elements
Docs demointermediate
Shared doodle strip
Draw a tiny face and add it to a shared strip capped at 20 doodles.
- can-play
- drawing
- canvas
Docs demoadvanced
Shared prize wheel
Run one seeded animation so every reader lands on the same result.
- can-play
- animation
- requestUpdate
Docs demoadvanced
Native controls mirror playground
Test shared forms, contenteditable fields, hover, focus, and nested elements.
- can-mirror
- forms
- contenteditable
Docs demointermediate
Send a rain event
Trigger a temporary rain effect for everyone currently connected.
- events
- animation
- transient
Docs demointermediate
Live reactions
Broadcast short-lived emoji reactions without storing shared state.
- events
- emoji
- transient
Docs demointermediate
Online presence indicator
Show one live colored dot for each reader currently on the page.
- presence
- online
- React