https://github.com/ctnicholas/astro-collaborative-starter

Looking to add collaboration to Astro? 🚀 You've come to the right spot, Astronaut! 👩‍🚀 This starter kit contains a set of quick and easy elements for adding multiplayer presence to your app.
https://github.com/ctnicholas/astro-collaborative-starter

astro collaboration lit liveblocks realtime

Last synced: 26 days ago
JSON representation

Looking to add collaboration to Astro? 🚀 You've come to the right spot, Astronaut! 👩‍🚀 This starter kit contains a set of quick and easy elements for adding multiplayer presence to your app.

• Host: GitHub
• URL: https://github.com/ctnicholas/astro-collaborative-starter
• Owner: CTNicholas
• Created: 2022-04-16T15:14:41.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2023-11-27T12:31:10.000Z (over 1 year ago)
• Last Synced: 2025-03-20T22:03:45.269Z (about 1 month ago)
• Topics: astro, collaboration, lit, liveblocks, realtime
• Language: Astro
• Homepage: https://astro-collaborative-starter.ctnicholas.dev
• Size: 4.96 MB
• Stars: 21
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  

    

  



# [Astro Collaborative Starter](https://astro-collaborative-starter.ctnicholas.dev)



  

    

  

  

    

  

  

    

  



> Buckle up Astronauts 🚀 we're going in **together** 👩‍🚀👨‍🚀

## [View Demo & Guide](https://astro-collaborative-starter.ctnicholas.dev/)

Take a look at the full guide on the [demo website](https://astro-collaborative-starter.ctnicholas.dev/). You can clone this repo to use it as a starter kit, or get the collaborative components straight from NPM:

```

npm i astro-collab

```

## [Quick start](https://astro-collaborative-starter.ctnicholas.dev/quick-start)

![Quick start guide](https://astro-collaborative-starter.ctnicholas.dev/card-main.png)



## Components

![Live cursors](https://astro-collaborative-starter.ctnicholas.dev/card-cursors-mini.png)

![Live avatars](https://astro-collaborative-starter.ctnicholas.dev/card-avatars-mini.png)

![Live users](https://astro-collaborative-starter.ctnicholas.dev/card-users-mini.png)

![Live form](https://astro-collaborative-starter.ctnicholas.dev/card-form-mini.png)

![Live user form](https://astro-collaborative-starter.ctnicholas.dev/card-user-form-mini.png)

![Live drawing](https://astro-collaborative-starter.ctnicholas.dev/card-drawing-mini.png)

![Random user info](https://astro-collaborative-starter.ctnicholas.dev/card-random-mini.png)

![Liveblocks room](https://astro-collaborative-starter.ctnicholas.dev/card-liveblocks-mini.png)



## Technology

- [Liveblocks](https://liveblocks.io) - Liveblocks powers all multiplayer features

- [Lit](https://lit.dev) - Most components use Lit web components

- [tldraw](https://tldraw.com) - LiveDrawing component uses tldraw

- [Astro](https://astro.build) - Starter kit built for Astro

![Powered by Liveblocks](https://astro-collaborative-starter.ctnicholas.dev/poweredbyliveblocks.svg)

## Like what you see?

I build lots of collaborative fun, and write interactive articles too, follow me on [Twitter](https://twitter.com/ctnicholasdev) for more. Here's a few favourites:

[![Adding live cursors to Next.js](https://pixelart.liveblocks.app/og-image.png)](https://pixelart.liveblocks.app)

[![Adding live cursors to Next.js](https://www.ctnicholas.dev/images/custom-thumbnails/live-cursors-with-liveblocks.png)](https://www.ctnicholas.dev/articles/live-cursors-with-liveblocks)

[![Build a live piano](https://livepiano.ctnicholas.dev/screenshot.png)](https://livepiano.ctnicholas.dev)

[![Multiplayer Wordle](https://wordlewars.ctnicholas.dev/screenshot.png)](https://wordlewars.ctnicholas.dev)