Skip to content
Apps— browse docs
On this page

Step 1: What you're building

A front door for a world — a shared headline, a pinboard, and a live directory — built by hand in six short steps.

Let's say you're making a world where you're running a campaign with three other people and you needed a front door — one shared screen everyone lands on the moment they open the world, instead of each of you scattered across whatever document you had open last time. Here's how you build that.

Six steps. By the end you'll have built this, from nothing, by hand — the exact starter vvd create --app gives you:

lobby — where you're headed
src/app.tsx, running
Starting the example…

Edit the headline. Star "Aria of the North." Nothing here is mocked — that's a real, shared app instance, the same kind every vvd app reads and writes. You're about to build it yourself, one small edit at a time, on this page.

You will learn

  • The one sentence that separates an app from a tool — and why it's the same contract
  • The three things defineApp needs from you: Host, Surface, and a tool registry
  • How AppHost composes them and mounts a real tool inside your chrome
  • Why a bad app manifest fails the moment your file is imported, not when it renders

How this works

Every step below is a small, editable version of the app above, seeded with whatever the previous step left you with. You'll get one instruction, make one edit, and see the running app change. Stuck? Every step has a Show me button — it writes in the answer, no penalty, no judgment.

Nothing here needs the CLI installed. That part shows up right at the end, once there's something worth running for real.