Skip to content
Tools— browse docs
On this page

Step 1: What you're building

A collaborative price sheet — typed columns, a computed total, and paste-from-a-spreadsheet — built in five short steps.

Let's say you're making a world where you're running a dungeon crawl and you needed a shared price sheet for the party's gear — rope, torches, rations, what it costs, what it comes to, editable by whoever's packing the bags. Here's how you build that.

You've already built one document from nothing in Getting Started's tutorial — a notes board, one field at a time. This build moves faster: same two files, same useDocument loop, a different shape of data.

Here's where you're headed. Type in it, add a row, delete one:

armory — where you're headed
src/codec.ts + src/tool.tsx, running
Starting the example…

Every number above is real, persisted, collaborative state — the same useDocument you used in Getting Started, applied to a list of rows instead of a map of notes. You're about to build it yourself, in five short edits.

You will learn

  • Why rows belong in a field.list, not an array tucked inside a field.value
  • How to give each row named, typed columns, and edit one cell at a time
  • How to compute a value — a running total — without ever storing it
  • How pasting from a real spreadsheet can fill the whole sheet at once

How this works

Each step below is a small, editable version of the sheet above, seeded with whatever the previous step left you with. Stuck? Every step has a Show me button — no penalty, no judgment.