Astro Collaborative Starter
Live user form
Open page in two windows
How to use
Place <input> elements inside <LiveUserForm> to set the current user's properties (name, color etc.) using child <input> elements. Updates are propagated on 'input' events. Compatible with any <input> with a 'value' property, using 'input' events.
---
import LiveUserForm from 'astro-collab/LiveUserForm.astro'
---
<LiveUserForm>
<!-- Change your name -->
<input name="user-name" />
<!-- Change your picture -->
<input name="user-picture" />
<!-- Change your status -->
<input name="user-status" />
<!-- Change your color -->
<input name="user-color" />
</LiveUserForm>---
import 'astro-collab/live-user-form'
---
<live-user-form client:load>
<!-- Change your name -->
<input name="user-name" />
<!-- Change your picture -->
<input name="user-picture" />
<!-- Change your status -->
<input name="user-status" />
<!-- Change your color -->
<input name="user-color" />
</live-user-form>A minimal working example can be found here.
Important note
All multiplayer components must be wrapped in a single LiveblocksRoom component, check the quick start guide for more info.
