Name: playhtml
Author: spencerc99

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.

The simplest example is creating a shared, movable piece of HTML "furniture":

<div id="couch" can-move style="font-size: 80px">🛋</div>

At a glance, playhtml supports:

reactive data scoped at a per-element level
page-level shared data channels (not tied to elements)
per-user presence with custom named channels
sync and data persistence behavior customization (locally persisted, real-time synced, or globally persisted)
custom events for imperative logic
a range of magical plug-and-play and full customization
sharing state across pages and domains
(coming soon) a web component library for "plug-and-play" collaborative elements
(coming soon) permissioning for behaviors
(coming soon) triggering behavior on a schedule (think cron)
(coming soon) custom data sources for long-term persistence

https://github.com/spencerc99/playhtml/assets/14796580/00e84e15-2c1c-4b4b-8e15-2af22f39db7a

playhtml is still in beta and active development. Join our Discord community to get help and show off what you've built!

Usage

Head to the proper section depending on your technology preference:

vanilla html / simple browser usage
react / next.js / other frameworks

vanilla html / simple browser usage

To use this library, you can import the library from a CDN (in this case we will use unpkg.com). Please make sure to do this after all the HTML elements on the page and ensure that the HTML elements you are "magic-ifying" have an id set.

<body>
  <!-- ... html elements here -->
  <!-- valid example -->
  <img
    src="https://media2.giphy.com/media/lL7A3Li0YtFHq/giphy.gif?cid=ecf05e47ah89o71gzz7ke7inrgb1ai1xcbrjnqdf7o890118&ep=v1_stickers_search&rid=giphy.gif"
    can-move
    id="openSign"
  />
  <!-- INVALID EXAMPLE <img src="https://media2.giphy.com/media/lL7A3Li0YtFHq/giphy.gif?cid=ecf05e47ah89o71gzz7ke7inrgb1ai1xcbrjnqdf7o890118&ep=v1_stickers_search&rid=giphy.gif" can-move /> -->
  <!-- import the script -->

  <!-- Option 1 (simplest, no customization) -->
  <script
    type="module"
    src="https://unpkg.com/playhtml@latest/dist/init.es.js"
  ></script>

  <!-- Option 2 (customize options to specify the room everyone connects to (a unique ID) or use your own partykit provider) -->
  <script type="module">
    import { playhtml } from "https://unpkg.com/playhtml@latest";
    playhtml.init({
      // room: "my-room", // if you want to specify a custom room to connect to
      // host: `${myPartykitUser}.partykit.dev`, // if you want to specify a custom partykit host host to connect to
      // cursors: {
      //   enabled: true, // if you want to eanble cursors
      // },
    });
  </script>
</body>

If you have dynamic elements that are hydrated after the initial load, you can call playhtml.setupPlayElement(element) to imbue the element with playhtml properties.

<script type="module">
  import { playhtml } from "https://unpkg.com/playhtml@latest";
  const newPlayElement = document.createElement("div");
  newPlayElement.id = "newPlayElement";
  playhtml.setupPlayElement(newPlayElement);
</script>

eventing

You can set up imperative logic that doesn't depend on a data value changing (like triggering confetti when someone clicks in an area) by registering events with playhtml. You can either pass in a list of events when you call playhtml.init or you can call playhtml.registerPlayEventListener to register an event at any time.

https://github.com/spencerc99/playhtml/assets/14796580/bd8ecfaf-73ab-4aa2-9312-8917809f52a2

playhtml

Popularity

What's Inside

README

playhtml 🛝🌐

Usage

vanilla html / simple browser usage

eventing

Confidence

Similar Plugins

playground-skill

playground

openai-develop-web-game

vibes

moldui

html-skills