100ms Prebuilt is now Open Source!

We're excited to share that 100ms Prebuilt UI is now completely open-source.

On the web, we have made the monorepo that contains roomkit-react and roomkit-web (which contain the Prebuilt component and the web component port of the HMSPrebuilt component) public and freely available to use under the MIT License.

You can find all of the code on GitHub.

On other platforms, the code for Prebuilt is available at the following links with READMEs to guide you through the integration process and provide examples of common use cases.

Client	Repository	Documentation	Example
Android	100ms-android	Link	AndroidPrebuiltDemo
iOS	100ms-roomkit-ios	Link	100ms-roomkit-example
Flutter	100ms-flutter	Link	hms_room_kit/example
React Native	100ms-react-native	Link	react-native-room-kit/example

Why are we doing this?

Integrating live audio-video capabilities into applications presents unique challenges. How do you create dynamic video layouts? Manage participant lists? Incorporate features like chat, hand-raising, and more? At 100ms, we aim to simplify these complexities and empower developers to build exceptional real-time audio-video experiences.

• Simplifying for out-of-the-box experiences with 100ms Prebuilt - The Prebuilt UI offers essential features like chat, participant lists, emojis, and more, ensuring a consistent user experience across various screens, including preview and room views. By abstracting away the complexities involved in building real-time audio-video experiences, Prebuilt streamlines the development process, accelerating time-to-market for developers.
• Open sourcing rationale - By abstracting away complexities, Prebuilt accelerates development cycles and time-to-market for real-time audio-video experiences. As we build video infrastructure for a video-first world, we recognize the crucial role of the global developer community. Making Prebuilt open-source aims to make it more accessible, transparent, and widely available.
• Value for developers - Developers can now examine the inner workings of our SDK, spot potential issues, and suggest improvements. This collaborative approach fosters innovation and continuous improvement in a way that is not possible in a closed system. We are excited about the opportunities this change brings and remain committed to building easy-to-integrate SDKs that empower developers to create exceptional real-time audio-video experiences.

Plus, a lot more flexibility!

While we offer a no-code way to customize Prebuilt, you can now fork your copy of the Prebuilt component (on any platform of choice) and make changes to the code to allow for more fine-tuning.

Say you wanted to customise the background on the Leave Screen on Prebuilt React, to something more unique to your organisation, which by default looks as below:

You can now fork the repository here. Clone it to your system and make changes to the code. A quick search on the IDE would reveal the code for Leave Screen is present in the packages folder under Prebuilt components with the path as packages/roomkit-react/src/Prebuilt/components/LeaveScreen.tsx

I’ll quickly modify the emojis and change some text for this demo. And, when ready with the changes, run yarn build to build the packages. You can now navigate to prebuilt-react-integration inside examples to test the changes. Run yarn and yarn dev to view the changes made to the Leave Screen.

This is only a fraction of what is possible with open-source Web SDKs.

Similarly, find guides to modify Prebuilt on iOS here, on Android here, on Flutter here, and on React Native here.

What’s next?

We welcome your feedback and would happily help external contributors or anyone excited to contribute. If you'd like to get involved, check out our contribution guide and explore the codebase. See you there!

Try 100ms today. Get started here!
Have any questions? Reach out to the 100ms team on Discord.