Introduction

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

core - aunthorization and module management
colab - fast and scalble realtime collaboration
chat - realtime chat and messaging
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.

# 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

# install types
npm install --save-dev @cyxth/types

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.

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

const cyx = new Cyxth("YOUR_APP_URL");

// register required modules
await cyx.register([Calls,Chat]);

//connect a user to cyxth
await cyx.connect("USER_TOKEN");

cyx.on('error', (data) => {
    // show error
})

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

// disconnect from cyxth
await cyx.disconnect();

// ...

colab

@cyxth/colab

this module adds realtime collaboration functionality similar to that in google docs and figma. users can mutate the same piece of application state together while mantaining consistency in a fast and reliable way. With cyxth colab you can turn any application state collaborative and suited to your specific application.

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

const cyx = new Cyxth("YOUR_APP_URL");
cyx.register([Colab]);

// connect
await cyx.connect("USER_TOKEN");

// get a colab instance
const colab = await cyx.colab("https://cdn.cyxth.com/pkgs/0.0.1/colab.wasm");
colab.create("tasks_id");

// add a task
let task = {
    data: new Date().toIsoString(),
    value: "write docs",
    done: false,
    tags: ["docs", "demos"]
}

let ctx = colab.getChangeContext();
ctx.path(["tasks",0]).insert(task);

// listen for changes in colab instance
colab.on("change", (changeSet) => {
    //... update ui
})

colab.on("user:join",(user) => {
    // ... update user list
})

guide

tutorials

reference

chat

@cyxth/chat

realtime messaging and chat functionalities i.e message, data and file sharing and storage, replies, threads, reactions, e2e encryption and many more for your application. paired with calls creates a complete chat application similar to telegram and signal.

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

const cyx = new Cyxth("YOUR_APP_URL");
cyx.register([Chat]);

// connect
await cyx.connect("USER_TOKEN");

// get a chat connection
const conn = cyx.chat();

// get all messages in channel
let messages = conn.channels.getMessages('7085164563653595136',100);

// send a message
await conn.send("hello");

// listen for message event
conn.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.

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

const cyx = new Cyxth("YOUR_APP_URL");
cyx.register([Calls]);

// connect
await cyx.connect("USER_TOKEN");

let call;

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

    initCalls();
}

// listen for new calls in any channel
// all users in channel get "new-call"
cyx.on("new-call",async (request) => {
    console.log(`new call request on ${request.channelId}`, request)
    call = request.accept()
    initCalls();
    // or just decline with request.decline()
})


const initCalls = () => {
    call.on('join',(user) => {
    // .. show user video 
    })

    call.on('end',(data) => {
        // .. end call
    })

    // ... more call config and control
}

guide

tutorials

reference

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

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

//

auth

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

types

@cyxth/types

cyxth provides great types with documentation on the @cyxth/types package for all the core plugins and extras packages.

on this page