Jamsocket and Supabase Starter Kit

The fastest way to build apps with Supabase and Y-Sweet by Jamsocket

Introduction · Features · Clone and run locally · Deploy to Netlify

Introduction

The Jamsocket and Supabase Starter Kit shows you how to implement core features of a real-time application like Google Docs. It covers collaborative text editing with Y-Sweet and document management with Supabase.

Try it live

Features

A full-fledged collaborative text editor with:

• Live Collaboration: Real-time sync powered by Y-Sweet, Jamsocket's Yjs server with built-in persistence to AWS S3.
• Slate Rich Text Editor: A fully customizable editor interface.
• Document Permissions & User Management: Managed through Supabase, which handles authentication, permissions, and document storage.
• Easy Persistence: Bring Your Own Storage (BYOS) with S3 or use Supabase's native storage service.
• Effortless Deployment: Ready for local development or deployment to Netlify.

How Supabase and Jamsocket work together

Use Y-Sweet, Jamsocket's Yjs server, for document collaboration.

• Y-Sweet is a Yjs sync server with built-in persistence to S3. This demo uses Y-Sweet to sync and persist documents as users edit.

Use Supabase for document management.

• Supabase manages everything around the document, from document permissions to user authentication.

Clone and run locally

1. Create a Y-Sweet service via the Jamsocket dashboard

2. Create a Supabase project via the Supabase dashboard

3. Clone the Y-Sweet Supabase Starter template using

   gh repo clone jamsocket/y-sweet-supabase-demo

   git clone [email protected]:jamsocket/y-sweet-supabase-demo.git

4. Rename .env.example to .env.local and update the following:

   SUPABASE_DATABASE_URL=[INSERT SUPABASE PROJECT URL]
   SUPABASE_ANON_KEY=[INSERT SUPABASE PROJECT API ANON KEY]
   Y_SWEET_CONNECTION_STRING=[INSERT Y_SWEET CONNECTION STRING]
   

   Both SUPABASE_DATABASE_URL and SUPABASE_ANON_KEY can be found in your Supabase project's API settings

   Create a connection string in your Y-Sweet service page and supply the value to Y_SWEET_CONNECTION_STRING

5. Setup your database on Supabase and run the commands in setup.sql

6. In the Auth Providers page, disable Confirm Email under Email. For the purposes of this demo, disabling Confirm Email will allow us to focus on the application logic itself.

7. You can now run the Next.js local development server:

   npm install

   npm run dev

   The starter kit should now be running on localhost:3000.

8. Y-Sweet allows you to choose where you persist your documents. This demo uses Y-Sweet's Bring Your Own Storage feature to automatically persist your document to your own AWS S3 Bucket. Contact us to get set up, or explore Supabase's storage service.

Deploy to Netlify

The above will also clone the Starter kit to your GitHub, you can clone that locally and develop locally.

Once you've added this project to Netlify, install the Jamsocket and Supabase extensions to add the necessary environment variables for your application.

Try our live demo.