playhtml Star

library-agnostic (html, react), fast, and expressive

playhtml is an open-source library for designing communal web experiences by enhancing web elements with real-time, collaborative interactivity. Let's make more shared spaces on the internet, where we can play and express ourselves.

Why do websites feel lonely even though so much humanity is woven through the internet these days? I think it's largely because most of the internet is designed around a personal experience. We need new imaginations and speculations for what the web could be and who we could be on it.

playhtml aims to provides infrastructure for designing communal experiences that make the web feel alive. From shared fingerprints on a letter to live reactions to live confetti with every click, I think we can reimagine the shape of websites and how we can interact with each other on them. I hope this becomes a foundation for making diverse open forms of "social media."

Most of the elements on this page are live examples! 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.

games & examples

1. fridge poetry
2. tug of war (by Chamod)
3. a horse race (by Annie Oh)
4. a starry dance floor (by Jeanette)
5. a website with every color added by someone
6. a website with a single color set by someone
7. a cursor party
8. a one word story game
9. candle factory
10. or view the community example gallery

plug-and-play capabilities

If you want to write the least code, you can use our available templated capabilities to create shared elements with a single attribute on HTML.

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

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 or join the community on discord!

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.

---