# Custom Events

Send custom data between participants in real-time (e.g., synchronizing a drawing board).

## Best Practices

- Keep payload under 5KB size limit.
- Always unsubscribe from events when components unmount.
- Use descriptive `type` values to distinguish different event kinds.
- Validate event data before processing to handle unexpected formats.

## Sending custom events

```ts
await call.sendCustomEvent({
  type: "draw",
  x: 10,
  y: 30,
});
```

Payload limited to 5KB.

## Receiving custom events

Requires [watching the call](https://getstream.io/video/docs/react/v2/guides/events/#call-events). Subscribe to `custom` events:

```ts
const unsubscribe = call.on("custom", (event: CustomVideoEvent) => {
  const payload = event.custom;
  if (payload.type === "draw") {
    console.log(`Received draw event: x=${payload.x}, y=${payload.y}`);
  }
});

// Unsubscribe when you no longer need to listen to custom events
unsubscribe();
```

See [Events guide](https://getstream.io/video/docs/react/v2/guides/events/) for more details.

---

For the most recent version of this documentation, visit [https://getstream.io/video/docs/react/v2/guides/custom-events/](https://getstream.io/video/docs/react/v2/guides/custom-events/).