Build collaborative environments in just a few lines of code

    // Create a new space.
    const space = await spaces.get('slide-deck-224');
        
    // Enter the space to become a member.
    await space.enter({ 
      name: 'Kyle', 
      avatar: 'https://slides-internal.com/users/klemons.png' 
    });
        
    // Listen for member updates within a space.
    // An event is triggered whenever a member enters or leaves the space, or updates their profile data.
    space.members.subscribe('update', async () => {
      const otherMembers = await space.members.getOthers();
      // Update your avatar stack UI with the realtime updates.
      renderAvatars(otherMembers);
    });
    

    // Create a new space.
    const space = await spaces.get('crm-sheet-87');
        
    // Enter the space to become a member.
    await space.enter({ 
      name: 'Helmut', 
      avatar: 'https://crm-internal.com/users/helmut.png' 
    });
        
    // Listen for cursor updates within the space.
    space.cursors.subscribe('update', async (cursorUpdate) => {
      const members = await space.members.getAll();
      const member = members.find((member) => 
      member.connectionId === cursorUpdate.connectionId);
      // Render members' cursor positions in your UI based on the realtime updates.
      renderCursor(cursorUpdate, member);
    });
        
    // Publish a member's cursor position.
    // (Cursor position updates are batched for optimal performance)
    window.addEventListener('mousemove', ({ clientX, clientY }) => {
      space.cursors.set({ position: { x: clientX, y: clientY } });
    });
    

    // Create a new space.
    const space = await spaces.get('survey-form-editor-2023');
        
    // Enter the space to become a member.
    await space.enter({ name: 'Amelie' });
        
    // Listen for location updates from all members.
    space.locations.subscribe('update', ({ member, currentLocation, previousLocation }) => {
      // Update your UI to reflect other members' locations based on the realtime updates.
      updateLocationsForMember(member, currentLocation, previousLocation);
    });
        
    // Publish a member's location.
    space.locations.set({ slide: 1, elementId: 'title' });
    

    // Create a new space.
    const space = await spaces.get('accounts-sheet');
        
    // Enter the space to become a member.
    await space.enter({ name: 'Yoshi' });
        
    // Check if a UI component is already locked.
    const isLocked = space.locks.get('s2-d4');

    if (!isLocked) {
    // Attempt to acquire a lock on the UI component if it isn't already locked.
      await space.locks.acquire('s2-d4', {'sheet': '2', 'cellId': 'd4'});
    };
        
    // Listen for updates for when components are locked by members.
    space.locks.subscribe('update', async (lock) => {
      const self = await space.members.getSelf();
      // Check if a member holds the lock for a component and enable them to edit it if they do. 
      if (lock.request.status === LockStatus.LOCKED && self.connectionId === lock.member.connectionId) {
        const location = {
            sheet: lock.request.attributes.get('sheet'),
            cellId: lock.request.attributes.get('cellId'),
        };
        enableLocationEditing({ location });
      }
    });