React Components

Build your LiveKit WebRTC experience without worrying about updating or maintaining room, participant, or track state. LiveKit Components give you a declarative way to build your real-time LiveKit audio/video frontend with React.

Every use case is different and apps in the real world are individual and unique. We don't pretend to have the perfect solution that fits all use cases. Instead, we've taken an approach where we give you reasonable defaults, without taking away full control over each component if you want it.

You don't have to worry about participant or room events to update the state of your application. All components handle state management for you, and by using React contexts, you don't have to route properties through your component tree.

We offer all the necessary building blocks to build a live video or audio app in no time.

We put a lot of effort into creating components that work and look great right out of the gate. Get started quickly by using the defaults of your components or overwrite them by simply adding children.

Copied!
//1️⃣ Use the components defaults to render a video conference app
<LiveKitRoom 
  token="my-token"
  serverUrl="wss://my-livekit-server"
>
  <VideoConference />
</LiveKitRoom>

// 2️⃣ or overwrite the defaults with your custom component tree.
<LiveKitRoom 
  token="my-token"
  serverUrl="wss://my-livekit-server"
>
  <MyVideoConference />
</LiveKitRoom>

function MyVideoConference() {
  const tracks = useTracks(
    [
      { source: Track.Source.Camera, withPlaceholder: true },
      { source: Track.Source.ScreenShare, withPlaceholder: false },
    ],
  );
  return (
    <GridLayout tracks={tracks}>
      <ParticipantTile />
    </GridLayout>
  );
}

The component we offer does not fit your requirements? We have the solution for you! Each component comes with its own React hook that allows you to create your own component with minimal boilerplate. Of course, you can also combine your own component with our pre-built components. It's common to start with our components to quickly sketch out a concept, and then replace some of them with your own components to build something we could never have imagined.

While the LiveKit Components docs provide a robust foundation for creating real-time audio/video experiences, sometimes the best way to understand their potential is through hands-on examples. Whether you're a beginner looking to get started or an experienced developer seeking advanced implementations, our curated list of examples will guide you through various use cases and applications. Explore, customize, and let these examples inspire your next LiveKit project.

There are some basic examples of how to use and customize LiveKit components in the nextjs example folder.

We also have a full-featured video conferencing application built with LiveKit Components here that powers https://meet.livekit.io.

For a growing collection of real-world examples, check out the livekit-examples organization on GitHub. Examples range from spatial audio, to AI-enhanced video conferencing, to how to build a live streaming app.