Y-Sweet Cloud: the WebSocket sync backend you’ll love

Y-SWEET CLOUD

Realtime in no time.

Make realtime, collaborative apps without choosing between speed and control.

Open source and MIT Licensed.

Say goodbye to lock in.

Storage on your terms.

Every document is automatically persisted. You can link your own S3-compatible storage, or just let us take care of the details.

Presence and multiplayer.

Multiple clients can connect for multiplayer editing. Add presence features like live cursors and live avatars using our presence hooks.

Open source.

Y-Sweet is built on top of Yjs, the leading open-source CRDT implementation.

Serverless.

Get up and running in minutes on our global edge. Pay only for usage with a generous free tier.

NextJS Ready

Deploy a collaborative editor in minutes with our Typescript SDK and client-side React hooks.

Install y-sweet


    npm install @y-sweet/react
    npm install @y-sweet/sdk

Create an API route to auth your user

app/api/auth-doc/route.ts


    import { getOrCreateDocAndToken } from '@y-sweet/sdk'

    export const POST = async (request) => {
      // in a production app, you'd want to authenticate the user
      // and make sure they have access to the given doc
      const body = await request.json()
      const docId = body.docId
      const clientToken = await
        getOrCreateDocAndToken(process.env.CONNECTION_STRING, docId)
      return NextResponse.json(clientToken)
    }

Wrap your app in a YDocProvider

app/page.tsx


  import { YDocProvider } from '@y-sweet/react'
  import { MyApp } from './my-app'

  export default function MyComponent() {
    const docId = 'my-doc-id'
    return (
      <YDocProvider
        docId={docId}
        authEndpoint="/api/auth-doc"
      >
        <MyApp />
      </YDocProvider>
    )
  }

Sync document when users edit

app/my-app.tsx


    import { useMap } from '@y-sweet/react'

    export function MyApp() {
      const items = useMap('colorgrid')

      // use Yjs Shared Types to sync document edits
      items.set(key, value)
      items.delete(key)
    }