playhtml working log


make something that creates a world out of websites

  • a small data-tag that you can attach to any element that makes it “takeable” and any place that makes it “placeable”
    • can-take
    • can-place
    • can-move
    • can-draw
    • can-age


  • how to do this without prohibitive data costs?
  • how to do this with API key or no account creation / no custom javascript required?

API design

plug-and-play this is intended for immediate use and consumption. Effectively “templates” that you can plug and play with your own data.

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

Ideally, these high-level templates are composed of the lower-level functions that can also be used on their own.

low-level functions option 1: persist just the data, make it accessible on the actual html element as a data attribute?

<div onDrag="onDrag">
	function onDrag(e, currData) {
		let x = currData.x + e.clientX - this.startMouseX
		let y = currData.y + e.clientY - this.startMouseY = `translate(${x}px, ${y}px)`;
		return {x,y} 
// after library effects
<div onDrag="onDrag" playhtml-data="{x,y}">
  • is it better to store as data attribute or in localStorage?
    • for simple things I like data attribute because it’s all visible and parseable from the DOM but for longer data it’ll pollute the DOM…
    • it’s already being stored in indexeddb.. I should just provide some easy accessor of global variables to access all that data

option 2: persist style update for that function

<div onDrag="onDrag">
	function onDrag(e, currTransform) {
		const currData = parse(currTransform)
		let x = e.clientX - this.startMouseX
		let y = e.clientY - this.startMouseY
		return 'transform: translate(${x}px, ${y}px);'
// after library effects
<div onDrag="onDrag" style="transform: translate(${x}px, ${y}px)">
  • this is less flexible than the option 1, but a bit simpler since you just have to worry about the actual CSS properties of the affected element

Project Log

I’m attempting to build this using partykit

  • partykit is quite nice but i should use yjs… the real pain is just working in vanilla HTML which im not familiar with

  • what happens when multiple people are dragging at the same time?

    • build in indicators that it’s being acted upon for things that have an ongoing action
    • how to handle conflicting actions:
      • only allow one person at a time to do it
      • build in resistance?

security considerations what to worry about here?

accounts do we need identities/accounts associated with people?

  • for can-take and can-place will probably require some kind of association of “this is mine” unless there are infinite ones to take
    • could require the extension for these.
  • apparently partykit is working on auth and presumably will have identities then

name brainstorming

html, websites, play, collaborative, fun, together, handmade

  • open-websites
  • playsites
  • playsite
  • playhtml (playdough)
  • freehtml
  • bricolage
  • moss
  • coral
  • guest
  • lichen
  • archipelago

for demo

  • start with showing we-bsite and talk about the background and motivation? [1min]
  • go into the demo [1min]
  • show the code [1min]
  • talk about extensions and future [1min]

posting into reddit Whenever I work on a personal project, I find myself wanting to add these bits of presence (that remember their state) but it’s so much of a hassle to spin up a database and add on collaboration for a small project, so I made this library to make it super easy to share and persist state across HTML elements and on websites generally.

I want the internet to feel more alive and for real-time collaborative technology to be used for more fun and personal uses! and this has felt like a fun move in that direction.

Demo: Github: