LiveKit LogoDocs
Real-timeEgress/IngressCloudReference

Styleguide

Headings

h1

h2

h3

h4

h5
h6

Fenced (Code)

Singleline

import {HelloWorld} from '@livekit/hello';

Multiline

import Link from 'next/link';
import { Flex, Text } from '@chakra-ui/react';
export default function Custom404() {
return (
<Flex direction="column" gap="1rem" maxW="720px" justifyContent="center" h="calc(100vh - 65px)" marginInline="auto" p="2rem" align="center">
<Text as="h1" textStyle="v2.h1">404</Text>
<Text as="p">
Sorry, but we couldn&apos;t find that page.
</Text>
<Link href="/">
<a>
<Text color="v3.lk-500" _hover={{ textDecoration: 'underline' }}>
Back home
</Text>
</a>
</Link>
</Flex>
);
}

Inline (Code)

Hello world this is how inline code looks like.

Callout

info:

Information the user should notice even if skimming.

tip:

Optional information to help a user be more successful.

important:

Essential information required for user success.

caution:

Negative potential consequences of an action.

warning:

Dangerous certain consequences of an action.

Table

This is a freaking table:

PropertyModifiersTypeDescription
audio?AudioCaptureOptions | boolean(Optional) Publish audio immediately after connecting to your LiveKit room.
connect?boolean(Optional) If set to true a connection to LiveKit room is initiated.
connectOptions?RoomConnectOptions(Optional) Define options how to connect to the LiveKit server.
onConnected?() => void(Optional)
onDisconnected?() => void(Optional)
onError?(error: Error) => void(Optional)
onMediaDeviceFailure?(failure?: MediaDeviceFailure) => void(Optional)
options?RoomOptions(Optional) Options for when creating a new room. When you pass your own room instance to this component, these options have no effect. Instead, set the options directly in the room instance.
room?Room(Optional) Optional room instance. By passing your own room instance you overwrite the <code>options</code> parameter, make sure to set the options directly on the room instance itself.
screen?ScreenShareCaptureOptions | boolean(Optional) Publish screen share immediately after connecting to your LiveKit room.
serverUrlstring | undefinedURL to the LiveKit server. For example: <code>wss://<domain>.livekit.cloud</code> To simplify the implementation, <code>undefined</code> is also accepted as an intermediate value, but only with a valid string url can the connection be established.
simulateParticipants?number | undefined(Optional)
tokenstring | undefinedA user specific access token for a client to authenticate to the room. This token is necessary to establish a connection to the room. To simplify the implementation, <code>undefined</code> is also accepted as an intermediate value, but only with a valid string token can the connection be established.
video?VideoCaptureOptions | boolean(Optional) Publish video immediately after connecting to your LiveKit room.
GitHub Logo