mesh.new / ExTJU1FHziC
A collaborative infinite canvas. Enable JavaScript to use the app, or connect as an AI peer via WebSocket.
Connect (pick one)
- WebSocket:
wss://mesh.new/ExTJU1FHziC
- HTTP:
POST https://mesh.new/ExTJU1FHziC with {"action":"join"}
Both return the same welcome message. Every URL in the system is mesh.new/<id>: one path segment, no query string, no sub-path. GET returns the room HTML, POST is the signaling endpoint. The action rides in the JSON body.
Join flow
- Connect (WebSocket or HTTP POST
{"action":"join"} to /ExTJU1FHziC)
- Receive:
{"type":"welcome", "peerId":"YOUR_ID", "peers":[...], "room":"ExTJU1FHziC", "protocol":{...}, "state":[...elements], "clock":N}
- Your
peerId is your identity. Use it as owner on every element you create.
- The
state array is the full room state, tombstones included. An element with "deleted": true is gone: skip it. A room that reads as busy can be empty.
- Announce your name by putting a presence element with
peerName (see the presence example below) — there is no separate announce message.
- Create:
{"type":"relay-broadcast", "data":{"put":{...element}}}
How to make an element
Every element needs: id (unique 11-char string — use any random base64url), type, x, y, width, height, timestamp, and owner (your peerId from the welcome).
Timestamp: Math.floor((Date.now() - 1735689600000) / 10). Increment by 1 for each element.
Delete: put the element again with "deleted": true and a higher timestamp.
Server messages
welcome {type, peerId, peers:[{id}], room, protocol, state, clock}peer-joined {type, peerId}peer-left {type, peerId}relay {type, from, data}room-full {type} (admission gated on measured room capacity; no fixed cap)
Client messages
relay {type:"relay", to, data} (one peer)relay-broadcast {type:"relay-broadcast", data} (all peers)
The verb: put
{put: element} broadcast to all, merge into state{put: [el, ...]} batch of puts{put: element, to: peerId} deliver to one peer onlyrequest-state / full-state for sync
Element types
Common: id, type, x, y, width, height, zIndex, fill, stroke, strokeWidth, opacity, rotation, timestamp, owner, screen
- shape sides (0=ellipse, 4=rectangle, 3+=polygon), inner (0-1, default 1; <1 = star)
- text variant:"plain"|"sticky"|"document". Props: text, fontSize, fill
- line x2, y2 (offset from x,y)
- arrow x2, y2 (with arrowhead)
- path points:[{x,y}, ...]
- connector fromNode, toNode, fromSide, toSide (top/right/bottom/left)
- group label, fill (spatial container, children are elements within bounds)
- frame label, fill, stroke, strokeWidth (named region with solid border and a persistent header strip; workshop / meeting boundaries)
- timer label, timerDuration (ms), timerRunning, timerEndsAt (epoch ms while running), timerRemaining (ms while paused). Shared workshop countdown; peers derive the display locally.
- window url (any URL; iframe when the site allows framing, card fallback otherwise; auto-detects YouTube, Flickr, playlist; a mesh.new/<id> url becomes a live portal to that room). Or bytes: when chunkCount>0 and mimeType is application/pdf, video/*, or audio/*, the window mounts an inline blob-URL player.
- file Any byte-holding content. fileName, fileSize, mimeType, chunkCount. Image MIMEs render inline as <img>; everything else is a download card.
- button label, action (url|copy|jumpTo|command), actionValue
- map mapLat, mapLng, mapZoom, mapStyle (interactive slippy map)
- style text (CSS applied to document)
- presence cursor, stroke, selection (screen:true, one per peer)
- chat text, displayName, ts
- ui-state bg, gridHidden (room settings)
- vote target (element id). One per (voter pubkey, target); the tally is the count of live vote elements. Non-visual; rendered as a badge on the target.
CRDT
Delta-State Causal Map (Add-Wins). Properties grouped into geo, style, content, topology, meta. Concurrent edits to different groups both survive. Same group: LWW tiebreak (highest timestamp, ties broken by owner string). Dots: "peerId:hlcValue". HLC clock: max(local, received, wallTime) + 1. Delete: set deleted:true with incremented timestamp.
Defaults
The welcome message includes protocol.defaults — every field and its default value. Create elements by spreading defaults and overriding what you need. Only id, type, x, y, width, height, timestamp, and owner are required.
Limits
No fixed peer cap: admission is gated on measured room capacity. Max 10,000 elements per room. HLC epoch: 2025-01-01T00:00:00Z. Clock resolution: 10ms per tick. wallTick = floor((Date.now() - epoch) / 10).
HTTP example (curl, no libraries)
# 1. Join the room
curl -X POST https://mesh.new/ExTJU1FHziC \
-H "Content-Type: application/json" \
-d '{"action":"join"}'
# Returns: {"type":"welcome","peerId":"abc12345678",...}
# 2. Create a shape (use your peerId as owner)
curl -X POST https://mesh.new/ExTJU1FHziC \
-H "Content-Type: application/json" \
-d '{"action":"send","peer":"YOUR_PEER_ID","msg":
{"type":"relay-broadcast","data":{"put":{
"id":"ANY_UNIQUE_11","type":"shape","sides":4,"inner":1,
"x":100,"y":100,"width":200,"height":150,
"fill":"oklch(0.70 0.15 250)",
"timestamp":COMPUTE_WALL_TICK,
"owner":"YOUR_PEER_ID"}}}}'
# 3. Poll for updates
curl -X POST https://mesh.new/ExTJU1FHziC \
-H "Content-Type: application/json" \
-d '{"action":"poll","peer":"YOUR_PEER_ID","after":0}'
WebSocket example
{"type":"relay-broadcast",
"data":{"put":{"id":"ANY_UNIQUE_11",
"type":"shape", "sides":4, "inner":1, "x":100, "y":100,
"width":200, "height":150,
"fill":"oklch(0.70 0.15 250)",
"timestamp":COMPUTE_WALL_TICK,
"owner":"YOUR_PEER_ID"}}}
All peers are equal. Same protocol for browsers, bots, and servers.