React Video Components

@livqeno/react ships a video UI kit: everything a call screen needs, from a one-line <VideoConference> down to single pieces like a tile or a mic button. Use the whole thing, swap parts out, or use only the hooks underneath and write your own markup.

• Unstyled by default. Every element has a stable livqeno-* class and exposes its state as data-* attributes.
• An optional stylesheet, @livqeno/react/video/styles.css, gives you Livqeno's dark-first look, themed with CSS variables.
• Hooks only cost what you use. Importing useTracks doesn't pull a single component into your bundle.

Where this fits: your backend mints an RTC token and your page renders <LivqenoRoom> with it. Everything on this page goes inside that provider, except <PreJoin>, which runs before a room exists.

Install

$ pnpm add @livqeno/rtc @livqeno/react

$ npm install @livqeno/rtc @livqeno/react

$ yarn add @livqeno/rtc @livqeno/react

$ bun add @livqeno/rtc @livqeno/react

Needs react ^18 || ^19.

A call in one component

'use client';
import { LivqenoRoom, VideoConference } from '@livqeno/react';
import '@livqeno/react/video/styles.css';
 
export function Call({ grant, onDone }) {
  return (
    <div style={{ height: '100dvh' }}>
      <LivqenoRoom
        token={grant.token}
        endpoint={grant.endpoint}
        iceServers={grant.iceServers}
        room={grant.roomName}
        fallback={<p>Connecting…</p>}
      >
        <VideoConference onLeave={onDone} />
      </LivqenoRoom>
    </div>
  );
}

That gives you:

• a grid of everyone, paginated beyond what fits on screen
• a focus layout whenever someone shares their screen, or you pin a tile
• a speaking ring on whoever is talking
• a control bar with mic, camera and screen-share toggles, device menus, and Leave
• remote audio for everyone, whichever tiles are on screen
• a Start audio button if the browser blocked autoplay
• toasts for "Reconnecting…", "Connection restored", and why the call ended ("You were removed from the call")

<VideoConference> fills its parent, so give the parent a height.

<VideoConference> props

Lobby: <PreJoin>

Let people check their camera and mic before joining. <PreJoin> shows a camera preview, a live mic level meter, device pickers and a name field. It needs no room, so render it before <LivqenoRoom>:

import { PreJoin, LivqenoRoom, VideoConference, type LocalUserChoices } from '@livqeno/react';
 
function Meeting({ grant }) {
  const [choices, setChoices] = useState<LocalUserChoices>();
 
  if (!choices) {
    return <PreJoin onSubmit={setChoices} persistUserChoices />;
  }
  return (
    <LivqenoRoom token={grant.token} endpoint={grant.endpoint} room={grant.roomName}>
      <VideoConference userChoices={choices} />
    </LivqenoRoom>
  );
}

onSubmit receives { username, videoEnabled, audioEnabled, videoDeviceId, audioDeviceId }. The preview tracks are stopped before it's called, so the camera is free for the call.

The name you collect is yours to use: a participant's identity comes from their token, so send username to your backend when you mint it (and put it in the token's metadata as {"name": "…"} if you want tiles to show it instead of the identity).

Network test

Pass connectionTest to add a Test connection button. It runs runConnectionTest() and shows the results: camera, microphone, server and media checks, the route media took (direct or relayed), TURN over UDP/TCP/TLS, round trip, jitter, packet loss, upload speed, and any issues worth fixing.

<PreJoin
  onSubmit={setChoices}
  connectionTest={async () => {
    // A token for a throwaway room — never the call's own.
    const res = await fetch('/api/preflight-token', { method: 'POST' });
    return res.json(); // { token, endpoint, iceServers }
  }}
/>

Pass a function so the token is fetched only when someone actually clicks.

<PreJoin> props

Building your own layout

Every part of <VideoConference> is exported. This is roughly what it renders:

import {
  ControlBar, ConnectionStateToast, FocusLayout, GridLayout, LayoutContextProvider,
  RoomAudioRenderer, StartAudio, usePinnedTracks, useTracks,
} from '@livqeno/react';
 
function MyCall() {
  return (
    <LayoutContextProvider>
      <div className="livqeno-video" style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
        <Stage />
        <ControlBar controls={{ screenShare: false }} />
        <RoomAudioRenderer />
        <StartAudio />
        <ConnectionStateToast />
      </div>
    </LayoutContextProvider>
  );
}
 
function Stage() {
  const tracks = useTracks(); // everyone's camera (or a placeholder), plus screen shares
  const { pinned } = usePinnedTracks();
  const focus = pinned[0] ?? tracks.find((t) => t.source === 'screenShare' && !t.isLocal);
  return focus
    ? <FocusLayout trackRef={focus} others={tracks.filter((t) => t !== focus)} />
    : <GridLayout tracks={tracks} maxTilesPerPage={12} />;
}

Put exactly one <RoomAudioRenderer> on the page. Tiles never play audio themselves, so audio keeps working for people on another page of the grid.

Components

A TrackReference is { participant, source, track?, isLocal }. track is undefined for a placeholder: someone with their camera off still gets a tile.

Hooks

The components are built from these. All of them work in your own markup, and none throws outside <LivqenoRoom>: they return an empty or idle state.

function MicButton() {
  const mic = useTrackToggle('microphone');
  return (
    <button aria-pressed={mic.enabled} aria-busy={mic.pending} onClick={() => mic.toggle()}>
      {mic.enabled ? 'Mute' : 'Unmute'}
      {mic.error && <span role="alert">{mic.error.message}</span>}
    </button>
  );
}

Adding chat

<VideoConference chat={…}> takes any content for its side panel. Use the chat UI kit in its own provider:

import { ChatProvider, MessageComposer, MessageList, VideoConference } from '@livqeno/react';
import '@livqeno/react/chat/styles.css';
 
<VideoConference
  chat={
    <ChatProvider token={chatGrant.token} apiUrl={chatGrant.apiUrl}>
      <MessageList room={conversationId} />
      <MessageComposer room={conversationId} />
    </ChatProvider>
  }
/>;

The panel stays mounted while it's closed, so the chat connection and scroll position survive toggling it.

Two more chat UI kit components, also inside <ChatProvider>:

import { ChannelList, ChatProvider, Thread } from '@livqeno/react';
 
<ChatProvider token={chatGrant.token} apiUrl={chatGrant.apiUrl}>
  <ChannelList selectedId={activeRoom} onSelect={(c) => setActiveRoom(c.id)} />
  {openThreadId && <Thread room={activeRoom} messageId={openThreadId} onClose={() => setOpenThreadId(undefined)} />}
</ChatProvider>;

Captions and AI agents

When your backend runs a live transcription or an AI voice agent in the room, these show it:

import { AgentVisualizer, Captions, VideoConference, useRemoteParticipants } from '@livqeno/react';
 
<VideoConference captions />                          // CC button + overlay, captions on
<VideoConference captions={{ defaultEnabled: false, maxLines: 2 }} />
 
<Captions />                                          // the overlay on its own
 
function Agent() {
  const agent = useRemoteParticipants().find((p) => p.isAgent);
  return agent ? <AgentVisualizer participant={agent} /> : null;
}

useTranscription is built on CaptionStore from @livqeno/rtc (re-exported here), for a caption UI outside React. Captions start from when the hook mounts. Style hooks: .livqeno-captions, .livqeno-captions__line[data-interim], .livqeno-agent-visualizer, and the --livqeno-caption-bg / --livqeno-caption-text properties.

Styling and theming

Nothing is styled until you import the stylesheet:

import '@livqeno/react/video/styles.css';

Its rules are scoped to .livqeno-video, which <VideoConference> and <PreJoin> put on their root element. If you render a piece on its own, wrap it in any element with class="livqeno-video".

Every color and size is a CSS variable. Override them on .livqeno-video (or any parent) to retheme:

.livqeno-video {
  --livqeno-bg: #0a0a0a;          /* canvas */
  --livqeno-surface: #141414;     /* buttons, menus */
  --livqeno-tile-bg: #111111;     /* empty tiles */
  --livqeno-border: #262626;      /* hairlines */
  --livqeno-text: #fafafa;
  --livqeno-text-muted: #a3a3a3;
  --livqeno-primary: #fafafa;     /* Join, active toggles */
  --livqeno-link: #f97316;        /* links only */
  --livqeno-danger: #ef4444;      /* Leave, mic off */
  --livqeno-speaking: #fafafa;    /* the speaking ring */
  --livqeno-radius: 10px;
  --livqeno-gap: 8px;
  --livqeno-control-height: 40px;
  --livqeno-chat-width: 360px;
  --livqeno-font: 'Inter', system-ui, sans-serif;
}

It's dark by default and switches to light for a light OS setting. Force one with theme="light" on <VideoConference> or data-theme="light" on any parent.

To style from scratch, skip the stylesheet and target the classes and data attributes:

Accessibility

• Every control is a real <button> with an accessible name. Toggles use aria-pressed; a toggle that's working shows aria-busy and stays focusable instead of being disabled.
• Device menus follow the menu pattern: arrow keys, Home and End to move, Enter or Space to pick, Escape to close and return focus to the button.
• The control bar is a role="toolbar"; arrow keys move between buttons.
• Tiles are labelled groups ("Ada (you)", "Sam, screen share"). Mic-off, E2EE and connection icons have text alternatives.
• Toasts and the network test's progress are announced through live regions.
• Focus rings are always visible for keyboard users. With prefers-reduced-motion, the stylesheet turns off transitions and the spinner animation.

Bandwidth

Video you can't see shouldn't cost you anything. The grid tells the server which videos are on the current page, and the server stops sending the rest. Tiles scrolled out of view in the focus strip, and every video while the tab is hidden, pause on their own. When the server pauses a video because your connection can't carry it, the tile says "Video paused to save bandwidth" instead of freezing on the last frame.

Next steps

• React SDK: <LivqenoRoom> and the lower-level hooks
• Chat UI components
• Pre-call test
• End-to-end encryption