playhtml

interactive, collaborative html elements with a single attribute.

playhtml is an open-source library that enables interactive capabilities with minimal code and maximal expressiveness by handling real-time syncing, persistence, and reactivity.

Check out some examples from the community in the gallery and submit your own!

most of the HTML elements on this page are collaboratively interactive! Trying clicking, dragging, and playing around with them. If anyone else is on the site, you'll see their cursors and how they're playing with the elements too.

Get started by adding the preset tags to any HTML element on your website. This is how easy it is to get a movable couch: <div id="couch" can-move>🛋</div> .

existing tags

1. can-play (custom capabilities with your code!)
2. can-move
3. can-toggle
4. can-duplicate
5. can-spin
6. can-grow
7. can-post
8. yours-here

You can also try it out by playing some of the games...

1. one word story
2. fridge poetry
3. candle factory
4. communal garden (coming soon)
5. puzzle (coming soon)

I'd love for you to try this out and make your websites collaboratively interactive and feel alive like a lot of physical spaces do. If you do make something, message me!

the lore

This project started out as a way to explore how I could make collective interactive design more accessible to people who just know basic HTML and CSS and create weird, personal internet sites (see html.energy). In (we)bsite, we tried out a lot of new interaction mechanisms for collective space-making but it involved syncing state, creating a database to store history, and handling all the nitty gritty of manipulating HTML elements.

I hope playhtml helps play a role in making the web a space for everyone to shape, change, and maintain.

---