The 100ms SDK provides robust APIs for integrating whiteboard collaboration into your conferencing sessions. Participants can engage in real-time by drawing, writing, and collaborating on a shared digital whiteboard. This documentation outlines how to implement the start and stop functionality for a whiteboard and display it within an iframe or embed it as a React component.


  • React 18 or higher
  • Webpack 5 or higher if you're using it to bundle your app
  • User roles must be configured to enable whiteboard functionality via the 100ms dashboard for starting or viewing the whiteboard. Refer here
  • If you're on React and are not using the @100mslive/roomkit-react package, install the @100mslive/hms-whiteboard package.
    yarn add @100mslive/hms-whiteboard

Opening and Closing the Whiteboard

How to know if a role is allowed to open/close whiteboard

Javascript users can use the selectPermissions selector which fetches the whiteboard specific permissions array from the local peer's role permissions.

React users can check for the toggle function returned by the utility hook useWhiteboard.

import { selectPermissions, selectWhiteboard } from '@100mslive/hms-video-store'; const permissions = hmsStore.getState(selectPermissions)?.whiteboard; // Array<'read' | 'write' | 'admin'> const isAdmin = !!permissions?.includes('admin'); const whiteboard = hmsStore.getState(selectWhiteboard); const isOwner = whiteboard?.owner === localPeerUserId; const toggle = async () => { if (!isAdmin) { return; } if (whiteboard?.open) { isOwner && (await actions.interactivityCenter.whiteboard.close()); } else { await actions.interactivityCenter.whiteboard.open(); } }; // usage const toggleButton = document.getElementById('toggle-whiteboard'); // non-admin users cannot toggle the whiteboard toggleButton.disabled = !isAdmin; toggleButton.onclick = toggle;

Displaying the Collaborative Whiteboard

You can display the whiteboard when it's open by embedding it as an iframe or as a React component for more fine grained controls, if your app is built using React.

import { selectWhiteboard } from '@100mslive/hms-video-store'; const whiteboard = hmsStore.subscribe((whiteboard) => { if (whiteboard?.open && whiteboard?.url) { const whiteboardIframe = document.createElement('iframe'); whiteboardIframe.src = whiteboard.url; } else { const whiteboardIframe = document.getElementById('whiteboard'); whiteboardIframe?.remove(); } }, selectWhiteboard);
CSS Styling required for Whiteboard

Whiteboard related CSS needs to be imported in your app's top level CSS files using @import '@100mslive/hms-whiteboard/index.css';(recommended) or in one of your top level JS file using import '@100mslive/hms-whiteboard/index.css';.

Note that if you're using @100mslive/roomkit-react you'll need to import @100mslive/roomkit-react/index.css accordingly.

Have a suggestion? Recommend changes ->

Was this helpful?