Skip to main content

Video Conference AppKit

AppKit allows you to include Video Conferences with prebuilt UI into your applications, in the form of Web Components.


npm install @signalwire/app-kit


This component represents a Video Conference.


audioaudioMediaTrackConstraints | booleanAudio constraints to use for the devices. Set to false if you do not want to use audio devices. Default: true
chatchatbooleanSet to false to disable the chat. Default: true
devicePickerdevice-pickerbooleanSet to false to allow only default devices to be used. If false, this will disable pre-join steps for device selection and remove the ability for the user to change devices after joining the room. Default: true
memberListmember-listbooleanSet to false to disable the member list. Default: true
setupRoomSession--(roomSession: RoomSession) => voidA callback which will be invoked as soon as a RoomSession object is ready. The RoomSession.join method will be called automatically after executing this callback. Default: undefined
themetheme"auto" \| "dark" \| "light"Set a specific color scheme. Auto will use the operating system's dark-mode setting. Default: "auto"
tokentokenstringThe Video Conference token to access the room. Starts with vpt_. Default: undefined
userNameuser-namestringA custom user name for the user joining the room. Default: ""
videovideoMediaTrackConstraints | booleanVideo constraints to use for the devices. Set to false if you do not want to use video devices. Default: true
layoutslayoutsbooleanSet to false to disable the layout selection. Default: true
Using setupRoomSession

Please note that the setupRoomSession callback function must be initialized before the component is rendered to the DOM. For an example, see it implemented below or with React in the blog AppKit Integration with React.


Basic Instantiation


Extending with Custom Code

You must initialize setupRoomSession before it is rendered to the DOM. In plain JavaScript, you can do this by using createElement on the sw-video-conference component before appending it to the document body.

import "@signalwire/app-kit";

function addElement() {
const roomSession = document.createElement("sw-video-conference");

roomSession.setAttribute("token", "vpt_25e67aace53a906f8387f2f499e9d8dd");
roomSession.setAttribute("user-name", "Joe");
roomSession.setAttribute("device-picker", "false");
roomSession.setupRoomSession = (rs) => {
console.log("Setting up Room Session", rs);
rs.on("room.joined", (e) => {
console.log("Joined room:",;


if (document.getElementById("app")) {
} else {
document.addEventListener("DOMContentLoaded", addElement);