Step 1: What you're building
A spatial board — drop a pin, drag it around, and ship it as a block two people can stand on together.
Let's say you're making a world where you're laying out a dungeon level and you needed to mark exactly where the trapped chest, the throne, and the way out are — not just describe them in a paragraph. Here's how you build that.
A pin board is still a document with a shape — just a shape made of points instead of
sentences, and the same trick marks a battle map or a city just as well. In vvd that's
still field.map, still useDocument, still one component. What changes is what you do
with clientX and clientY.
By the end of this page you'll have built this — click anywhere to drop a pin, drag one to move it:
Click the board. Drag a pin. Nothing here is mocked — that's a real collaborative document, positions and all.
You will learn
- How to drop and drag things at the exact pixel you touched — and the one CSS property that would silently break it
- How
context.view === "embed"lets one component be both the full board and a card-sized preview of it - How a
scope: "world"companion block mounts a summary of your board anywhere, with<BlockSlot> - How to show two people's cursors moving over your own canvas, live
How this works
Every step below is a small, editable version of the tool above, seeded with whatever the last step left you with. One instruction, one edit, a running tool that changes under your hands. Stuck? Every step has a Show me button.
This build assumes you've done Getting Started — codecs,
useDocument, and the field.map merge behaviour aren't re-taught here, only what's
specific to space.
If you want strokes, not locations — a drawing surface instead of a board of pins — see Build a location sketch canvas.