Recipeintermediate
Shared audio file
Play, pause, and restart one audio file for everyone using a shared timeline.
- can-play
- audio
- audio file
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
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
Drag a hat and cat
Drag two shared objects and keep them inside a bounded area.
- can-move
- dragging
- bounds
Docs demostarter
Shared toggle
Click a switch and share its on or off state with every reader.
- can-toggle
- switch
- boolean
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 demostarter
Shared hover
Hover over a target and show that live state to other readers.
- can-hover
- presence
- awareness
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 demostarter
Emoji-only mirrored textarea
Filter a textarea to emoji and mirror its value to every reader.
- can-mirror
- textarea
- input filtering
Docs demostarter
Growing mirrored list
Append list items and mirror the changing child list without custom data.
- can-mirror
- dynamic DOM
- lists
Docs demointermediate
Shared click counter
Increment one persistent count shared by everyone reading the page.
- can-play
- counter
- shared data
Docs demointermediate
Shared guestbook
Add notes to a capped shared list rendered from reactive data.
- can-play
- guestbook
- lists
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