Create Client

Generally, it is recommended to use framework-specific bindings for your particular UI framework such as @pluv/react. However, if your selected framework isn't yet supported, you can create a framework-agnostic pluv.io client to add automatic type-safe real-time to any app.

Creating a PluvClient

Note: These examples assume that you've already created a backend pluv.io instance. Refer to the quickstart to learn more.

Install dependencies

1# For the frontend
2npm install @pluv/client
3# Frontend peer-dependencies
4npm install react react-dom yjs zod

Define a frontend PluvClient

1// frontend/io.ts
2
3import { createClient } from "@pluv/client";
4// Import the type from your backend @pluv/io instance.
5import { type AppPluvIO } from "server/io";
6
7const client = createClient<AppPluvIO>({
8 wsEndpoint: (room: string): string => {
9 // Specify the ws endpoint to connect to
10 return `http://localhost:3000/api/room?room=${room}`;
11 },
12});

Next steps