Nobody Pays (for) Magazines

    TypeScript icon, indicating that this package has built-in type declarations

    3.2.1 • Public • Published

    Catalyst Video Chat

    📷💬 Reliable and scalable open-source video chat in a few lines of code.

    Check out the full Catalyst documentation!

    Quick Start


    Catalyst can be installed using either npm or yarn

    npm i catalyst-vc-react


    import CatalystChat from "catalyst-vc-react"


    			onEndCall={() => console.log('Call ended!')}

    You will need a Catalyst appId API key to connect to our servers. This can be obtained in under a minute by visiting the API keys tab of our management portal.

    Our servers are free for your first 30 monthly active users, which means they should not cost you anything in development (and possibly production)!

    We recommend a minimum parent container size of 400px X 450px.


    Prop Description Type Example Value Required
    room Unique session identifier (peers with the same room are connected) string ROOM_NAME Required
    appId Unique project identifier, obtained from the API keys tab of our management portal string YOUR_CATALYST_PROJECT_ID Required
    name Display name of member joining the call string MEMBER_NAME Optional
    fade Milliseconds of no user interaction before fading out controls. Disabled when set to 0 number 600 Optional
    audioOffDefault Is microphone disabled by default boolean true Optional
    videoOffDefault Is webcam disabled by default boolean true Optional
    theme Color scheme. Includes: primary (main color), secondary (background color), tertiary (button color), quaternary (button hover color), quinary (text color) string { primary?: string; secondary?: string; tertiary?: string; quaternary?: string; quinary?: string; } default
    simulcast Publish multiple levels of quality for video streams boolean true Optional
    disableChat Hide text chat functionality boolean true Optional
    disableSetupView Skip setup view boolean true Optional
    disableNameField Hide user name input field in setup view boolean true Optional
    cstmSetupBg Gradient or hex-code background for setup view string #fff Optional
    disableRefreshBtn Hide refresh button in top settings bar boolean true Optional
    cstmWelcomeMsg Message displayed when you are the only member in room string, HTMLElement Welcome! Optional
    cstmSupportUrl Url for all help/support messages. When set to an empty string hides support icon. string Optional
    arbData Data passed to all other members of room Uint8Array TextEncoder().encode('str') Optional
    handleReceiveArbData Function triggered whenever arbitrary data is received Function (arbData: Uint8Array) => void Optional
    handleUserData Function passed all user metadata after token is generated Function (userData: CatalystUserData) => void Optional
    onJoinCall Function triggered when user joins the call Function () => void Optional
    onMemberJoin Function triggered when a member joins the call Function () => void Optional
    onMemberLeave Function triggered when a member leaves the call Function () => void Optional
    onLeaveCall Function triggered when user leaves call Function () => void Optional


    Created by @GoldinGuy and @JoeSemrai

    The master branch of this repository contains Catalyst V3, the latest version. The older V2 version can be found on the Catalyst V2 Branch.

    Catalyst is designed with safety and security in mind. Visit our terms of service and privacy policy to learn more.

    Catalyst V3 is based on a custom version of WebRTC SFU LiveKit infrastructure to allow for more stability and scalability. Prior versions of Catalyst made use of direct P2P protocols.

    Distributed under the AGPL-3.0-only license. See LICENSE for more information.


    npm i catalyst-vc-react

    DownloadsWeekly Downloads






    Unpacked Size

    1.82 MB

    Total Files


    Last publish


    • josephsemrai
    • goldinguy