Introduction to cyxth §

the cyxth collaboration framework provides sdks to build fast and reliable collaboration experience for your application. with everything you need for a fluid collaboration experience included realtime collaboration, chat and video or audio calls.

to get started first create a cyxth account, create an application instance and select the required collaboration features specific to your application and you are ready to get started.

platforms §

cyxth provides collaboration packages on npm @cyxth organization, for now only the web platform is supported, all the packages will be eventualy available for mobile (android and ios) and other platforms and frameworks.

installation §

cyxth is fully modular allowing you to install only the features and functionalities you need i.e for a chat application you only need the chat module and maybe the calls module. for a realtime design application you only need colab which you can extend with voice and chat for presence broadcast.

here are the 4 main modules

1. core - aunthorization and module management
2. colab - fast and scalble realtime collaboration
3. chat - realtime chat and messaging
4. calls - realtime video and voice chat and streaming

other modules

• extras - local storage, e2e encryption and other extras on top of cyxth
• auth - authorization for your backend service.
• we are constantly adding new modules for specific frameworks and workflows

all our javascript modules are found on our npm repository and our github organization together with examples tutorials and more.

to install any of the modules use npm or a package manager of your choice.

bash# install core
npm install @cyxth/core

# install chat module
npm install @cyxth/chat

# install calls module
npm install @cyxth/calls

# install colab module
npm install @cyxth/colab

lets go over each of the module

main modules §

core §

@cyxth/core

this is the main entry for your cyxth applications, it handles authorization and connections to cyxth and binds all other modules to work together. this is required for any functionality to work.

tsimport Cyxth from '@cyxth/core';
import Calls from '@cyxth/calls';
import Chat from '@cyxth/chat';

const APP_URL = "my-app.apps.cyxth.com";
const USER_TOKEN = "token_from_backend";

const cyxth = await new Cyxth("YOUR_APP_URL", [Calls, Chat])
await cyxth.connect(USER_TOKEN);

cyxth.on('disconnect',({reason}) => {
    console.log(`disconnected ${reason}`)
})

const disconnect = () => {
    await cyxth.disconnect();
}

colab §

@cyxth/colab

the cyxth colab module will help turn your application multiplayer ensuring that state is always consistent across or users by automatically resolving conflicts. colab is highly scalable allowing for upto 256 concurrent editors while being very easy to use.

tsimport Cyxth from '@cyxth/core';
import Colab from '@cyxth/colab';

const APP_URL = "my-app.apps.cyxth.com";
const USER_TOKEN = "token_from_backend";

const cyxth = await new Cyxth("YOUR_APP_URL", [Colab]).connect(USER_TOKEN);
const colab = await cyxth.colab();

const state = await colab.createOrJoin("our-shared-doc");
let doc = state.changeContext().text("doc");

doc.handlers = {
    insert(index,text, ctx){
        console.log(ctx.userId);
        // update doc in ui
    }
    // ... more handlers
}

const edit = (index: number, value: string, delCount: number) => {
    doc.replace(index value, delCount);
}

guide

tutorials

reference

chat §

@cyxth/chat

easily add messaging and chat functionality to your application with the cyxth chat module.

tsimport Cyxth from '@cyxth/core';
import Chat from '@cyxth/chat';

const APP_URL = "my-app.apps.cyxth.com";
const USER_TOKEN = "token_from_backend";

const cyxth = await new Cyxth("YOUR_APP_URL", [Chat]).connect(USER_TOKEN);
const chat = cyxth.chat();


let messages = chat.getMessages('7085164563653595136',100);

await chat.send("hello");

chat.on("message", (message) => {
    console.log(`new message in ${message.channelId} from ${message.sender}`);
    console.log(message);
})

guide

tutorials

reference

calls §

@cyxth/calls

cyxth calls api adds realtime video and voice chat to your application ranging from a simple one to one call to a video conferencing with multiple viewers and multiple speakers. adding a simple voice call functionality to a colab instance or a chat application will definately improve the overall collaboration experience for your users.

tsimport Cyxth from '@cyxth/core';
import Calls from '@cyxth/calls';

const APP_URL = "my-app.apps.cyxth.com";
const USER_TOKEN = "token_from_backend";

const cyxth = await new Cyxth("YOUR_APP_URL", [Calls]).connect(USER_TOKEN);

let call: Calls;

// start a new call
const startCall = (channel) => {
    call = cyxth.calls("channelId");
    await call.start({audio: true,})
    initCalls();
}

// listen for new calls in any channel
// all users in channel get "call" event
cyxth.on("call",async (request) => {
    // show accept/reject ui
    call = request.accept()
    initCalls();

    // or just decline with request.decline()
})


const initCalls = () => {
    call.on('user:join',(user) => {
    // .. show user avatar in ui
    })

    call.on('user:left',(data) => {
        // .. remove user from ui
    })

    // ... more call config and control
}

guide

tutorials

reference

other modules §

cyxth provides more functionality in the cyxth extras module with more features being added frequently

extras §

@cyxth/extras

the extras package provide more plugins to use with any of the cyxth core plugins these include end to end encryption, offline support, push notifications support among other functionalities

tsimport Cyxth from '@cyxth/core';
import {E2e, Storage, PushNotifications} from '@cyxth/extras';

// 

auth §

@cyxth/auth backend authorization module for javascript backends.\ read more