πΊοΈ First project
Build and publish something small, end to end, in about ten minutes.
Get startedπ§ Interface tour
What every panel, rail and button in the editor does.
Take the tourβ¨οΈ Shortcuts
The keys that make editing fast.
See shortcutsLoadingβ¦
```
Or skip the HTML entirely and point `entry` at a `.tsx` file β the runtime mounts its default
export and you can build the panel from the editor's own component library:
```tsx
// main.tsx
import { useState } from 'react';
import { Button } from '@was/ui';
export default function Panel() {
const [clicks, setClicks] = useState(0);
return ;
}
```
:::note `init()` waits until the world is really there
It runs once the connection to the editor is open **and** the synced copy of the scene is
ready, so you never have to poll for either.
:::
Four globals are always available: **`editor`** (the editor API), **`world`** (a live, synced
copy of the scene as entities and components), **`meta`** (your manifest) and **`init`**.
You can import `@was/ecs`, `@was/signals`, `@was/engine`, `@was/editor-api`, `@was/ui`,
`@was/icons`, `react` and `react-dom/client`. Anything else fails loudly rather than silently
resolving to nothing.
:::warning The styling set is fixed
Panels built from `@was/ui` use a prebuilt stylesheet, so only the classes it ships exist.
Arbitrary values like `text-[13px]` are not among them β use an inline `style` for sizes outside
the scale.
:::
## Working with the scene
You could assemble entities by hand through `world`, but for scenes and spaces there is a
better way β ask the editor, and you get its own defaults, numbering and safeguards:
```ts
await editor.scenes.list();
await editor.scenes.create({ name: 'Chapter 2', trigger: { type: 'image', imageId } });
await editor.scenes.setTrigger(sceneId, { type: 'surface', bindingType: 'wall' });
await editor.scenes.delete(sceneId);
await editor.spaces.create({ name: 'Lobby' });
```
The `trigger` is just an anchor's data, validated by the same schema the editor uses β so new
trigger types work without the plugin protocol changing. An image trigger works out its physical
size from the image itself if you do not give one.
### Finding your own work again
A plugin that generates scenes needs to find them later. That is what `tags` is for β it is
namespaced to your plugin automatically, so two plugins never overwrite each other's marks, and
the editor neither shows nor touches them:
```ts
tags.set(entity, { kind: 'scene', card: '2' });
tags.find({ kind: 'scene' });
tags.remove(entity, 'card');
```
## Shared session state
Some state belongs to the meeting, not the document: a running timer, an open vote, a raised
hand. Undoing it, publishing it or storing it in the project would all be wrong.
The **project room** is a small shared key-value store that everyone currently in the project
sees:
```ts
const { now, entries } = await editor.room.get();
await editor.room.set('timer', { running: true, endsAt: now + 60_000 });
editor.on('room.changed', (state) => render(state.entries.timer));
await editor.room.delete('timer');
```
It survives a page reload, expires after twelve hours, and holds up to 64 keys of 8 KB.
:::tip `now` is the server's clock, and that is the point
Two people's computers can disagree by minutes. Store **absolute end times** from the server
clock and let each client count down itself β never store "seconds remaining", or a ticking
timer would mean writing to the room every second for everyone in the project.
:::
The server also records **who wrote each key**, which is what makes honest voting possible: a
vote counts only when the key `vote/})
})
})
})
})
})
})
})
})
})
})