LiveCollaborationTrigger

If you implement live collaboration support and want to expose the same UI button as on excalidraw.com, you can render the <LiveCollaborationTrigger/> component using the renderTopRightUI prop.

You'll need to supply onSelect() to handle opening of your collaboration dialog, but the button will display appState.collaborators count provided you have supplied it.

Prop	Type	Required	Default	Description
onSelect	function	Yes		Handler called when the user clicks on the button
isCollaborating	boolean	Yes	false	Whether live collaboration session is in effect. Modifies button style.

Live Editor

function App() { const [excalidrawAPI, setExcalidrawAPI] = useState(null); const [isCollaborating, setIsCollaborating] = useState(false); return ( <div style={{ height: "500px" }}> <p style={{ fontSize: "16px" }}> Selecting the checkbox to see the collaborator count </p> <label style={{ fontSize: "16px", fontWeight: "bold" }}> <input type="checkbox" checked={isCollaborating} onChange={() => { if (!isCollaborating) { const collaborators = new Map(); collaborators.set("id1", { username: "Doremon", avatarUrl: "../../../../img/doremon.png", }); collaborators.set("id3", { username: "Pika", avatarUrl: "../../../../img/pika.jpeg", }); excalidrawAPI.updateScene({ collaborators }); } else { excalidrawAPI.updateScene({ collaborators: new Map(), }); } setIsCollaborating(!isCollaborating); }} /> Show Collaborators </label> <Excalidraw ref={(api) => setExcalidrawAPI(api)} renderTopRightUI={() => ( <LiveCollaborationTrigger isCollaborating={isCollaborating} onSelect={() => { window.alert("You clicked on collab button"); setIsCollaborating(true); }} /> )} ></Excalidraw> </div> ); }

function App() {
  const [excalidrawAPI, setExcalidrawAPI] = useState(null);
  const [isCollaborating, setIsCollaborating] = useState(false);
  return (
    <div style={{ height: "500px" }}>
      <p style={{ fontSize: "16px" }}>
        Selecting the checkbox to see the collaborator count
      </p>
      <label style={{ fontSize: "16px", fontWeight: "bold" }}>
        <input
          type="checkbox"
          checked={isCollaborating}
          onChange={() => {
            if (!isCollaborating) {
              const collaborators = new Map();
              collaborators.set("id1", {
                username: "Doremon",
                avatarUrl: "../../../../img/doremon.png",
              });
              collaborators.set("id3", {
                username: "Pika",
                avatarUrl: "../../../../img/pika.jpeg",
              });
              excalidrawAPI.updateScene({ collaborators });
            } else {
              excalidrawAPI.updateScene({
                collaborators: new Map(),
              });
            }
            setIsCollaborating(!isCollaborating);
          }}
        />
        Show Collaborators
      </label>
      <Excalidraw
        ref={(api) => setExcalidrawAPI(api)}
        renderTopRightUI={() => (
          <LiveCollaborationTrigger
            isCollaborating={isCollaborating}
            onSelect={() => {
              window.alert("You clicked on collab button");
              setIsCollaborating(true);
            }}
          />
        )}
      ></Excalidraw>
    </div>
  );
}

Result

Selecting the checkbox to see the collaborator count

Show Collaborators

To move canvas, hold mouse wheel or spacebar while dragging, or use the hand tool

Shapes

1

2

3

4

5

6

7

8

9

0

Library

Canvas actions

Drawing canvas