Step 4: Drag a block

A pointer handler and one write — actions.map("blocks").set — and the block stays where you leave it.

Reading data.blocks was step 3. Now write to it. Add a pointer handler that turns a drag into actions.map("blocks").set(key, position):

const begin = (i: number, e: PointerEvent) => {
  /* remember where inside the block the pointer grabbed it */
}
const onMove = (e: PointerEvent) => {
  actions.map("blocks").set(String(i), { x, y }) // ← the whole sync layer
}

Make it draggable

src/app.tsx

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

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

const WORD = "TOY"

const SIZE = 64

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

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() {

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

if (!data || !actions) return null

const letters = WORD.split("")

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

return (

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

const b = at(i)

return (

<div

key={i}

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,

}}

{ch}

</div>

)

})}

</div>

)

}

export default defineTool({

id: "toy",

name: "Toy",

documentTypes: ["toy"],

surface: "plain",

render: Board,

})

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

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

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

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() {
const { data, actions } = useCollabState({ blocks: field.map<Block>() })
if (!data || !actions) return null

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

return (
  <div style={{ position: "relative", height: "100%" }}>
    {letters.map((ch, i) => {
      const b = at(i)
      return (
        <div
          key={i}
          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,
          }}
        >
          {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…

You should see: drag a letter and it stays exactly where you drop it — even after the debounce re-runs the example, even if you drag two letters back to back. field.map is keyed per block, so two people dragging different letters both land clean; the same rule Step 3 of Getting Started used for notes.

Why this doesn't flood the document on every pixel

It does write on every pointermove here, and for a 3-letter word that's fine. The published Blocks kit batches with requestAnimationFrame instead — worth doing once a drag gesture gets busy. The Blocks starter kit has the full breakdown, plus rotate, scale, and a tumble-to-a-new-face gesture this page skips.

Next steps

Step 5 — Two boards, not two peopleThe exact same code, mounted twice as two separate instances.