Y-Sweet on Jamsocket
Realtime in no time.
Y-Sweet is the open-source Yjs server with persistence built in.
Build collaborative apps of all kinds
It's easier than ever to add realtime collaboration to your app with Y-Sweet on Jamsocket. Check out some of our demos, ranging from to-do lists to voxel-based world creators.
Developer Overview
Integrate with ease
Deploy a collaborative editor in minutes with
our Typescript SDK and client-side React hooks.
1
Install Y-Sweet
npm install @y-sweet/sdk
npm install @y-sweet/react1
Install Y-Sweet
npm install @y-sweet/sdk
npm install @y-sweet/react2
Create an API route to auth your users
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)
}2
Create an API route to auth your users
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)
}3
Wrap your app in a YDocProvider
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>
)
}3
Wrap your app in a YDocProvider
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>
)
}4
Use Y-Sweet hooks and Yjs Shared Types to sync document edits
import { useMap } from '@y-sweet/react'
export function MyApp() {
const items = useMap('colorgrid')
// edits to the document are automatically synced in the background
items.set(key, value)
items.delete(key)
}4
Use Y-Sweet hooks and Yjs Shared Types to sync document edits
import { useMap } from '@y-sweet/react'
export function MyApp() {
const items = useMap('colorgrid')
// edits to the document are automatically synced in the background
items.set(key, value)
items.delete(key)
}
Say goodbye to lock in.
Open source and MIT-Licensed.
Storage on your terms.
Every document is automatically persisted when you link your own S3 storage to Y-Sweet.
Presence and multiplayer.
Multiple clients can connect for multiplayer editing. Add presence features like live cursors and live avatars using Y-Sweet's presence hooks.
Open source.
Y-Sweet is completely open-source and is built on top of Yjs, the leading open-source CRDT implementation.
Serverless.
Get up and running in minutes with Y-Sweet on Jamsocket. No need to run your own Y-Sweet server.
Fully Featured
Sweeter with Y-Sweet
The features you need to build the next Figma or Google Docs, with the flexibilty of open source.
| Features | Y-Sweet | Liveblocks Yjs | TipTap |
|---|---|---|---|
| Open-source | MIT Licensed | MIT Licensed | |
| Self-hostable | |||
| Bring your own storage | S3 Object Storage | ||
| Server-side edits | Depends on plan |
