Astro Collaborative Starter

Astro Collaborative Starter is a starter kit created by developer CTNicholas for adding real-time multiplayer presence to Astro websites. It packages a set of ready-made collaboration components — live cursors, live avatars, shared forms, and a collaborative drawing canvas — that sync across visitors through Liveblocks.

What is Astro Collaborative Starter?

Astro Collaborative Starter is a GitHub repository that doubles as an Astro starter template and as an installable NPM package called astro-collab. It provides drop-in Lit-based web components that connect to Liveblocks rooms, so any Astro site can get multiplayer presence without building the synchronization infrastructure from scratch. The project is maintained by CTNicholas, and a live demo with a full written guide is hosted at astro-collaborative-starter.ctnicholas.dev.

Key Features

• Live Cursors — Displays the cursor position of every connected user in real time, using Liveblocks presence broadcasting.
• Live Avatars — Shows a stack of avatars for the people currently viewing the page, updated as they join or leave.
• Live Users — Renders a list of active users with their names, ideal for dashboards or collaborative pages.
• Live Form — Syncs form input values across all visitors so everyone sees the same data as it's typed.
• Live User Form — Combines the live form with user identity, attaching each entry to the person who made it.
• Live Drawing — A collaborative whiteboard built on tldraw, letting multiple people sketch on the same canvas simultaneously.
• Random User Info — Generates and shares arbitrary user data for demos, useful for testing presence features without a backend.
• NPM Installation — The components are published as astro-collab, so developers can install them with npm i astro-collab instead of cloning the whole starter.

The stack is Astro for the site framework, Lit for the reusable web components, Liveblocks for real-time state and WebSocket management, and tldraw for the drawing surface.

Who is it for?

• Astro developers who want to add live multiplayer features to a static site without managing a complex realtime backend.
• Starter kit users looking for a well-organized example of integrating Liveblocks with Astro and Lit components.
• Prototype builders who need quick collaborative elements like shared cursors, presence lists, or drawing boards for a hackathon or MVP.

Use cases

• Community sites and blogs — Show live cursors and avatars alongside content to give readers a sense of shared presence.
• Collaborative tools — Use the Live Drawing and Live Form components to let teams sketch, annotate, or fill in documents together.
• Interactive demos — Deploy the built-in Random User Info and Liveblocks Room components to explore how presence and broadcast events behave.

How does it work?

You can start from the repository itself as a template, or install the components into an existing Astro project by running npm i astro-collab. Each component connects to a Liveblocks room, and the demo website shows each one in action with its own page and code sample. The quick-start section on the demo site walks through the required environment keys and setup.