Open-Source Typesafe Realtime - Introducing pluv.io

Introduction

1. Heartbeats

2. Reconnects

3. Rooms

4. Synchronizing data

5. Presence

1. Maximize type-inference (i.e. little to no managing of TypeScript types)

2. Yjs as a first-class citizen

3. Frontend framework agnostic, yet first-class support for them (like that of TanStack Table)

4. Easy to self-host on either the Node.js or Cloudflare Worker runtimes

5. Provide primitives for developers to create libraries or share code recipes with others

Examples

// example-backend
import { createIO } from "@pluv/io";
import { platformCloudflare } from "@pluv/platform-cloudflare";
import { z } from "zod";

const io = createIO(platformCloudflare());

const router = io.router({
  sendGreeting: io.procedure
    .input(z.object({ message: z.string() })
    .broadcast(({ message }) => ({
      receiveGreeting: { greeting: message },
    })),
});

export const ioServer = io.server({ router });

// example-frontend
import { createClient, infer } from "@pluv/client";
import type { ioServer } from "example-backend";

const types = infer((i) => ({ io: i<typeof ioServer> }));
export const io = createClient({ types });

const room = io.createRoom("my-example-room");

room.broadcast.sendGreeting({ message: "hello world" });
//           ^? const sendGreeting: (data: { message: string }) => void

const unsubscribe = room.event.receiveGreeting(
  ({ data }) => { /* ... */ }
//   ^? const data: { greeting: string }
);

What about handling presence?

import { z } from "zod";

export const io = createClient({
	// ...
  presence: z.object({
    selectionId: z.string().nullable(),
  }),
});

const room = io.createRoom("my-example-room", {
	// ...
  initialPresence: { selectionId: null },
});

room.updateMyPresence({ selectionId: "id_..." });

const unsubscribe = room.subscribe(
  "others",
  (others) => { /* ... */ },
// ^? const others: readonly {
//    connectionId: string;
//    presence: { selectionId: string | null };
// }[],
);

What about handling synchronized data?

import { yjs } from "@pluv/crdt-yjs";
import type { Array as YArray } from "yjs";

// backend
const io = createIO(
  platformCloudflare({
    // ...
    crdt: yjs,
  }),
);

// frontend
export const io = createClient({
	// ...
  initialStorage: yjs.doc(() => ({
    messages: yjs.array<string>([]),
  })),
});

const room = io.createRoom({ /* ... */ });

const sharedType = room.getStorage("messages");
//    ^? const sharedType: YArray<string>;
const unsubscribe = room.storage(
  "messages",
  (messages: string[]) => { /* ... */ }
);

And then more…

import { createBundle } from "@pluv/react";

const io = createClient({ /* ... */ });

const {
    // components
    MockedRoomProvider,
    PluvProvider,
    PluvRoomProvider,

    // utils
    event,

    // hooks
    useBroadcast,
    useCanRedo,
    useCanUndo,
    useClient,
    useConnection,
    useDoc,
    useEvent,
    useMyPresence,
    useMyself,
    useOther,
    useOthers,
    useRedo,
    useRoom,
    useStorage,
    useTransact,
    useUndo,
} = createBundle(io);

Get started today!

• Quickstart Next.js

• Quickstart Cloudflare Workers

• Quickstart Node.js