React Quickstart

Get started with LiveKit and React

1. Install LiveKit SDK

Install the LiveKit SDK:

yarn add @livekit/components-react @livekit/components-styles

2. Join a room

Note that this example hardcodes a token. In a real app, you’ll need your server to generate a token for you.

import '@livekit/components-styles';
import {
} from '@livekit/components-react';
const serverUrl = '<your LiveKit server URL>';
const token = '<generate a token>';
export default function App() {
return (
// Use the default LiveKit theme for nice styles.
style={{ height: '100vh' }}
{/* Your custom component with basic video conferencing functionality. */}
<MyVideoConference />
{/* The RoomAudioRenderer takes care of room-wide audio for you. */}
<RoomAudioRenderer />
{/* Controls for the user to start/stop audio, video, and screen
share tracks and to leave the room. */}
<ControlBar />
function MyVideoConference() {
// `useTracks` returns all camera and screen share tracks. If a user
// joins without a published camera track, a placeholder track is returned.
const tracks = useTracks(
{ source: Track.Source.Camera, withPlaceholder: true },
{ source: Track.Source.ScreenShare, withPlaceholder: false },
{ onlySubscribed: false },
return (
<GridLayout tracks={tracks} style={{ height: 'calc(100vh - var(--lk-control-bar-height))' }}>
{/* The GridLayout accepts zero or one child. The child is used
as a template to render all passed in tracks. */}
<ParticipantTile />

3. Next Steps

  • Set up a server to generate tokens for your app at runtime by following this guide: Generating Tokens.
  • If you're looking to dive deeper into building your LiveKit app with React, check out the React Components reference section. There you'll find a comprehensive list of available components and React hooks, along with examples of how to use them. This is a great resource for building more complex and advanced apps. Happy coding!