Step 5: Two boards, not two people

The exact same file, mounted twice — and neither copy knows the other exists.

No new code this step. The same board from Step 4, mounted twice, below — Board A and Board B. Drag a letter in one.

Board A

src/app.tsx

import { type PointerEvent, useRef } from "react"

import { defineTool, field, useCollabState, type ToolRenderProps } from "@vvd/sdk"

type Block = { x: number; y: number }

const WORD = "TOY"

const SIZE = 64

const COLORS = ["#c0392b", "#2e86c1", "#d68910"]

const clamp01 = (v: number) => (v < 0 ? 0 : v > 1 ? 1 : v)

function defaultBlock(i: number, n: number): Block {

const gap = Math.min(0.24, 0.6 / Math.max(1, n - 1))

return { x: 0.5 + (i - (n - 1) / 2) * gap, y: 0.5 }

}

function Board({ context }: ToolRenderProps) {

const { data, actions } = useCollabState({ blocks: field.map<Block>() })

const areaRef = useRef<HTMLDivElement | null>(null)

const dragRef = useRef<{ i: number; dx: number; dy: number } | null>(null)

if (!data || !actions) return null

const letters = WORD.split("")

const at = (i: number): Block => data.blocks[String(i)] || defaultBlock(i, letters.length)

const begin = (i: number, e: PointerEvent) => {

if (!context.canEdit) return

const rect = areaRef.current?.getBoundingClientRect()

const b = at(i)

dragRef.current = {

dx: rect ? e.clientX - (rect.left + b.x * rect.width) : 0,

dy: rect ? e.clientY - (rect.top + b.y * rect.height) : 0,

}

areaRef.current?.setPointerCapture?.(e.pointerId)

}

const onMove = (e: PointerEvent) => {

const d = dragRef.current

const rect = areaRef.current?.getBoundingClientRect()

if (!d || !rect) return

actions.map("blocks").set(String(d.i), {

x: clamp01((e.clientX - d.dx - rect.left) / rect.width),

y: clamp01((e.clientY - d.dy - rect.top) / rect.height),

})

}

return (

<div

ref={areaRef}

onPointerMove={onMove}

onPointerUp={() => { dragRef.current = null }}

style={{ position: "relative", height: "100%", touchAction: "none" }}

{letters.map((ch, i) => {

const b = at(i)

return (

<div

key={i}

onPointerDown={(e) => begin(i, e)}

style={{

position: "absolute",

left: b.x * 100 + "%",

top: b.y * 100 + "%",

width: SIZE,

height: SIZE,

marginLeft: -SIZE / 2,

marginTop: -SIZE / 2,

display: "grid",

placeItems: "center",

borderRadius: 12,

background: COLORS[i % COLORS.length],

color: "#fff",

fontFamily: "Georgia, serif",

fontSize: 26,

fontWeight: 700,

cursor: context.canEdit ? "grab" : "default",

touchAction: "none",

userSelect: "none",

}}

{ch}

</div>

)

})}

</div>

)

}

export default defineTool({

id: "toy",

name: "Toy",

documentTypes: ["toy"],

surface: "plain",

render: Board,

})

import { type PointerEvent, useRef } from "react"

import { defineTool, field, useCollabState, type ToolRenderProps } from "@vvd/sdk"

type Block = { x: number; y: number }

const WORD = "TOY"
const SIZE = 64
const COLORS = ["#c0392b", "#2e86c1", "#d68910"]

const clamp01 = (v: number) => (v < 0 ? 0 : v > 1 ? 1 : v)

function defaultBlock(i: number, n: number): Block {
const gap = Math.min(0.24, 0.6 / Math.max(1, n - 1))
return { x: 0.5 + (i - (n - 1) / 2) * gap, y: 0.5 }
}

function Board({ context }: ToolRenderProps) {
const { data, actions } = useCollabState({ blocks: field.map<Block>() })
const areaRef = useRef<HTMLDivElement | null>(null)
const dragRef = useRef<{ i: number; dx: number; dy: number } | null>(null)
if (!data || !actions) return null

const letters = WORD.split("")
const at = (i: number): Block => data.blocks[String(i)] || defaultBlock(i, letters.length)

const begin = (i: number, e: PointerEvent) => {
  if (!context.canEdit) return
  const rect = areaRef.current?.getBoundingClientRect()
  const b = at(i)
  dragRef.current = {
    i,
    dx: rect ? e.clientX - (rect.left + b.x * rect.width) : 0,
    dy: rect ? e.clientY - (rect.top + b.y * rect.height) : 0,
  }
  areaRef.current?.setPointerCapture?.(e.pointerId)
}
const onMove = (e: PointerEvent) => {
  const d = dragRef.current
  const rect = areaRef.current?.getBoundingClientRect()
  if (!d || !rect) return
  actions.map("blocks").set(String(d.i), {
    x: clamp01((e.clientX - d.dx - rect.left) / rect.width),
    y: clamp01((e.clientY - d.dy - rect.top) / rect.height),
  })
}

return (
  <div
    ref={areaRef}
    onPointerMove={onMove}
    onPointerUp={() => { dragRef.current = null }}
    style={{ position: "relative", height: "100%", touchAction: "none" }}
  >
    {letters.map((ch, i) => {
      const b = at(i)
      return (
        <div
          key={i}
          onPointerDown={(e) => begin(i, e)}
          style={{
            position: "absolute",
            left: b.x * 100 + "%",
            top: b.y * 100 + "%",
            width: SIZE,
            height: SIZE,
            marginLeft: -SIZE / 2,
            marginTop: -SIZE / 2,
            display: "grid",
            placeItems: "center",
            borderRadius: 12,
            background: COLORS[i % COLORS.length],
            color: "#fff",
            fontFamily: "Georgia, serif",
            fontSize: 26,
            fontWeight: 700,
            cursor: context.canEdit ? "grab" : "default",
            touchAction: "none",
            userSelect: "none",
          }}
        >
          {ch}
        </div>
      )
    })}
  </div>
)
}

export default defineTool({
id: "toy",
name: "Toy",
documentTypes: ["toy"],
surface: "plain",
render: Board,
})

Edit and the example re-runs. Tab indents; press Escape to leave the editor.

Running · your edits, live

Starting the example…

Board B

src/app.tsx

import { type PointerEvent, useRef } from "react"

import { defineTool, field, useCollabState, type ToolRenderProps } from "@vvd/sdk"

type Block = { x: number; y: number }

const WORD = "TOY"

const SIZE = 64

const COLORS = ["#c0392b", "#2e86c1", "#d68910"]

const clamp01 = (v: number) => (v < 0 ? 0 : v > 1 ? 1 : v)

function defaultBlock(i: number, n: number): Block {

const gap = Math.min(0.24, 0.6 / Math.max(1, n - 1))

return { x: 0.5 + (i - (n - 1) / 2) * gap, y: 0.5 }

}

function Board({ context }: ToolRenderProps) {

const { data, actions } = useCollabState({ blocks: field.map<Block>() })

const areaRef = useRef<HTMLDivElement | null>(null)

const dragRef = useRef<{ i: number; dx: number; dy: number } | null>(null)

if (!data || !actions) return null

const letters = WORD.split("")

const at = (i: number): Block => data.blocks[String(i)] || defaultBlock(i, letters.length)

const begin = (i: number, e: PointerEvent) => {

if (!context.canEdit) return

const rect = areaRef.current?.getBoundingClientRect()

const b = at(i)

dragRef.current = {

dx: rect ? e.clientX - (rect.left + b.x * rect.width) : 0,

dy: rect ? e.clientY - (rect.top + b.y * rect.height) : 0,

}

areaRef.current?.setPointerCapture?.(e.pointerId)

}

const onMove = (e: PointerEvent) => {

const d = dragRef.current

const rect = areaRef.current?.getBoundingClientRect()

if (!d || !rect) return

actions.map("blocks").set(String(d.i), {

x: clamp01((e.clientX - d.dx - rect.left) / rect.width),

y: clamp01((e.clientY - d.dy - rect.top) / rect.height),

})

}

return (

<div

ref={areaRef}

onPointerMove={onMove}

onPointerUp={() => { dragRef.current = null }}

style={{ position: "relative", height: "100%", touchAction: "none" }}

{letters.map((ch, i) => {

const b = at(i)

return (

<div

key={i}

onPointerDown={(e) => begin(i, e)}

style={{

position: "absolute",

left: b.x * 100 + "%",

top: b.y * 100 + "%",

width: SIZE,

height: SIZE,

marginLeft: -SIZE / 2,

marginTop: -SIZE / 2,

display: "grid",

placeItems: "center",

borderRadius: 12,

background: COLORS[i % COLORS.length],

color: "#fff",

fontFamily: "Georgia, serif",

fontSize: 26,

fontWeight: 700,

cursor: context.canEdit ? "grab" : "default",

touchAction: "none",

userSelect: "none",

}}

{ch}

</div>

)

})}

</div>

)

}

export default defineTool({

id: "toy",

name: "Toy",

documentTypes: ["toy"],

surface: "plain",

render: Board,

})

import { type PointerEvent, useRef } from "react"

import { defineTool, field, useCollabState, type ToolRenderProps } from "@vvd/sdk"

type Block = { x: number; y: number }

const WORD = "TOY"
const SIZE = 64
const COLORS = ["#c0392b", "#2e86c1", "#d68910"]

const clamp01 = (v: number) => (v < 0 ? 0 : v > 1 ? 1 : v)

function defaultBlock(i: number, n: number): Block {
const gap = Math.min(0.24, 0.6 / Math.max(1, n - 1))
return { x: 0.5 + (i - (n - 1) / 2) * gap, y: 0.5 }
}

const letters = WORD.split("")
const at = (i: number): Block => data.blocks[String(i)] || defaultBlock(i, letters.length)

export default defineTool({
id: "toy",
name: "Toy",
documentTypes: ["toy"],
surface: "plain",
render: Board,
})

Edit and the example re-runs. Tab indents; press Escape to leave the editor.

Running · your edits, live

Starting the example…

Board B didn't move. That's not a coincidence and it's not a limitation — it's the entire feature this page exists to teach.

Why they're independent

Every <Playground> on this site mounts its own tool against its own fake host — two panes, two completely separate documents, exactly like two campaigns in a real world. In production the mechanism is the same idea with a real name: useCollabState's document is keyed by world, app, and project. Swap which project a tab is bound to and the host hands your app a different document — same code, same field names, a different room. Two <Playground>s on a page and two projects in a world are the same shape of independence.

Compare this to Step 6 of Getting Started, where two panes did converge — that pair shared one document on purpose, to show collaboration. This pair doesn't share one, on purpose, to show instances. Same machinery, opposite point.

Next steps

Step 6 — Let people make their own boardThe projects capability — how vvd run's own prompt works, from inside your app.