Building Blocks

Components are the basic building blocks of your LiveKit application, enriched with additional functionality and LiveKit state. Most components are simply a wrapper around a standard HTML element. This allows you to pass standard HTML attributes like classNames and padding directly to the underlying HTML element to style it exactly how you want.

Prefabs use components under the hood and add additional features, styles, but also reasonable defaults. They are designed to be opinionated and not meant to be extended. You can, we just don't build them with that in mind. Some prefabs are:

• VideoConference: This component is the default setup of a classic LiveKit video conferencing app.
• AudioConference: This component is the default setup of a classic LiveKit audio conferencing app.
• PreJoin: The PreJoin prefab component is normally presented to the user before he enters a room.
• ControlBar: The ControlBar prefab component gives the user the basic user interface to control their media devices and leave the room.
• Chat: The Chat component adds a basis chat functionality to the LiveKit room. The messages are distributed to all participants in the room.

We provide a wide range of React hooks that give you fine-grained control to build the app you want. Some hooks are foundational and are needed for almost every live app, while others are only needed if you want to build some custom components and go low-level.

Often used and important hooks are:

• useTracks: The useTracks hook returns an array of current tracks that can be looped, filtered, and processed.
• useParticipants: The useParticipants hook returns all participants (local and remote) of the current room.
• useConnectionState: The useConnectionState hook allows you to simply implement your own ConnectionState component.