Avatars and Cursors

By default, an avatar is displayed for each user co-editing the document, as well as the cursor positions and associated cursor selections for any remote users. You can optionally enable and disable these visual elements via the showUI and showCursor initialization parameters.

Avatar Rendering

The client-side library provides a default avatar implementation based on the values of the userfield given to the initialization config object. The default behavior is to extract the user's initials from the value of user.name to render a text-based avatar.

Alternatively, you can style the avatar with an image, by setting the value of user.avatarto a link that points to the image source. The image avatar will accept any format supported by a <img> tag.

If you would like to implement your own avatar component from scratch, then you can hook into session events, which updates whenever users join and leave the session.

Avatar Positioning

By default, the a of user avatars will be rendered horizontally above the top-right corner of the editor window:

To update the rendering position, use the avatar initialization field. For example, setting avatar: {vertical: true} will cause the avatars to be rendered vertically along the right boarder of the editor window


You may also programmatically enable and disable the avatars and cursors at run time via the following client API calls. These calls will only have visible effect after the user has started or joined a session.


Explicitly hides the online user avatars


Displays the online user avatars


Hides remote cursor positions and selections


Displays remote cursor positions and selections