100mslive · ygit · Nov 20, 2024 · Nov 19, 2024
diff --git a/README.md b/README.md
@@ -1,5 +1,11 @@
 # Web SDKs
 
+[![Lint, Test and Build](https://github.com/100mslive/web-sdks/actions/workflows/lint-test-build.yml/badge.svg)](https://github.com/100mslive/web-sdks/actions/workflows/lint-test-build.yml)
+[![Activity](https://img.shields.io/github/commit-activity/m/100mslive/web-sdks.svg)](https://www.100ms.live/docs/javascript/v2/release-notes/release-notes)
+[![License](https://img.shields.io/npm/l/@100mslive/hms-video-store)](https://www.100ms.live/)
+[![Documentation](https://img.shields.io/badge/Read-Documentation-blue)](https://www.100ms.live/docs/javascript/v2/quickstart/javascript-quickstart)
+[![Register](https://img.shields.io/badge/Contact-Know%20More-blue)](https://dashboard.100ms.live/register)
+
 This monorepo contains all the packages required to integrate 100ms on the web.
 
 ## What is included?

diff --git a/packages/hls-player/README.md b/packages/hls-player/README.md
@@ -1,5 +1,10 @@
 # 100ms HLS Player
 
+[![Lint, Test and Build](https://github.com/100mslive/web-sdks/actions/workflows/lint-test-build.yml/badge.svg)](https://github.com/100mslive/web-sdks/actions/workflows/lint-test-build.yml)
+[![Bundle Size](https://badgen.net/bundlephobia/minzip/@100mslive/hls-player)](https://bundlephobia.com/result?p=@100mslive/hls-player)
+[![License](https://img.shields.io/npm/l/@100mslive/hls-player)](https://www.100ms.live/)
+![Tree shaking](https://badgen.net/bundlephobia/tree-shaking/@100mslive/hls-player)
+
 The `HMSHLSPlayer` is an HLS player offered by 100ms that can be used to play HLS streams. The player takes a URL and video element to play the stream.
 
 ## How to integrate HLS Player SDK

diff --git a/packages/hls-stats/README.md b/packages/hls-stats/README.md
@@ -1,5 +1,11 @@
 # @100mslive/hms-stats
 
+[![Lint, Test and Build](https://github.com/100mslive/web-sdks/actions/workflows/lint-test-build.yml/badge.svg)](https://github.com/100mslive/web-sdks/actions/workflows/lint-test-build.yml)
+[![Bundle Size](https://badgen.net/bundlephobia/minzip/@100mslive/hls-stats)](https://bundlephobia.com/result?p=@100mslive/hls-stats)
+[![License](https://img.shields.io/npm/l/@100mslive/hls-stats)](https://www.100ms.live/)
+![Tree shaking](https://badgen.net/bundlephobia/tree-shaking/@100mslive/hls-stats)
+
+
 A simple library for HLS stats for Hls.js.
 
 ## Installation

diff --git a/packages/hms-video-store/README.md b/packages/hms-video-store/README.md
@@ -1,8 +1,9 @@
 # 100ms Reactive Store
 
 [![NPM](https://badgen.net/npm/v/@100mslive/hms-video-store?color=green)](https://www.npmjs.com/package/@100mslive/hms-video-store)
-![Test](https://github.com/100mslive/hms-video-store/actions/workflows/main.yaml/badge.svg)
+[![Lint, Test and Build](https://github.com/100mslive/web-sdks/actions/workflows/lint-test-build.yml/badge.svg)](https://github.com/100mslive/web-sdks/actions/workflows/lint-test-build.yml)
 [![Bundle Size](https://badgen.net/bundlephobia/minzip/@100mslive/hms-video-store)](https://bundlephobia.com/result?p=@100mslive/hms-video-store)
+[![License](https://img.shields.io/npm/l/@100mslive/hms-video-store)](https://www.100ms.live/)
 ![Tree shaking](https://badgen.net/bundlephobia/tree-shaking/@100mslive/hms-video-store)
 
 ![Architecture](images/architecture.png)

diff --git a/packages/hms-virtual-background/README.md b/packages/hms-virtual-background/README.md
@@ -1,5 +1,10 @@
 # Virtual Background with Effects SDK
 
+[![Lint, Test and Build](https://github.com/100mslive/web-sdks/actions/workflows/lint-test-build.yml/badge.svg)](https://github.com/100mslive/web-sdks/actions/workflows/lint-test-build.yml)
+[![Bundle Size](https://badgen.net/bundlephobia/minzip/@100mslive/hms-virtual-background)](https://bundlephobia.com/result?p=@100mslive/hms-virtual-background)
+[![License](https://img.shields.io/npm/l/@100mslive/hms-virtual-background)](https://www.100ms.live/)
+![Tree shaking](https://badgen.net/bundlephobia/tree-shaking/@100mslive/hms-virtual-background)
+
 Virtual background plugin helps in customising one’s background. The customising options are blurring the background or replacing it with a static image. This guide provides an overview of usage of the virtual background plugin of 100ms.
 
 ## Pre-requisites

diff --git a/packages/hms-whiteboard/README.md b/packages/hms-whiteboard/README.md
@@ -1,5 +1,10 @@
 # 100ms Whiteboard
 
+[![Lint, Test and Build](https://github.com/100mslive/web-sdks/actions/workflows/lint-test-build.yml/badge.svg)](https://github.com/100mslive/web-sdks/actions/workflows/lint-test-build.yml)
+[![Bundle Size](https://badgen.net/bundlephobia/minzip/@100mslive/hms-whiteboard)](https://bundlephobia.com/result?p=@100mslive/hms-whiteboard)
+[![License](https://img.shields.io/npm/l/@100mslive/hms-whiteboard)](https://www.100ms.live/)
+![Tree shaking](https://badgen.net/bundlephobia/tree-shaking/@100mslive/hms-whiteboard)
+
 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.
 
 ## Requirements

diff --git a/packages/react-icons/README.md b/packages/react-icons/README.md
@@ -1,4 +1,10 @@
-# React Icon Library
+# 100ms React Icon Library
+
+[![Lint, Test and Build](https://github.com/100mslive/web-sdks/actions/workflows/lint-test-build.yml/badge.svg)](https://github.com/100mslive/web-sdks/actions/workflows/lint-test-build.yml)
+[![Bundle Size](https://badgen.net/bundlephobia/minzip/@100mslive/react-icons)](https://bundlephobia.com/result?p=@100mslive/react-icons)
+[![License](https://img.shields.io/npm/l/@100mslive/react-icons)](https://www.100ms.live/)
+![Tree shaking](https://badgen.net/bundlephobia/tree-shaking/@100mslive/react-icons)
+
 
 Using the package in your application
 

diff --git a/packages/react-sdk/README.md b/packages/react-sdk/README.md
@@ -1,4 +1,10 @@
-### About
+# 100ms React SDK
+
+[![Lint, Test and Build](https://github.com/100mslive/web-sdks/actions/workflows/lint-test-build.yml/badge.svg)](https://github.com/100mslive/web-sdks/actions/workflows/lint-test-build.yml)
+[![Bundle Size](https://badgen.net/bundlephobia/minzip/@100mslive/react-sdk)](https://bundlephobia.com/result?p=@100mslive/react-sdk)
+[![License](https://img.shields.io/npm/l/@100mslive/react-sdk)](https://www.100ms.live/)
+![Tree shaking](https://badgen.net/bundlephobia/tree-shaking/@100mslive/react-sdk)
+
 
 This package is a react wrapper over the core SDK(`@100mslive/hms-video-store`). 
 An easy way to use the store, actions and notifications are provided via

diff --git a/packages/roomkit-react/README.md b/packages/roomkit-react/README.md
@@ -1,12 +1,17 @@
 ![Banner](https://github.com/100mslive/web-sdks/blob/06c65259912db6ccd8617f2ecb6fef51429251ec/prebuilt-banner.png)
 
+[![Lint, Test and Build](https://github.com/100mslive/web-sdks/actions/workflows/lint-test-build.yml/badge.svg)](https://github.com/100mslive/web-sdks/actions/workflows/lint-test-build.yml)
+[![Bundle Size](https://badgen.net/bundlephobia/minzip/@100mslive/roomkit-react)](https://bundlephobia.com/result?p=@100mslive/roomkit-react)
+[![License](https://img.shields.io/npm/l/@100mslive/roomkit-react)](https://www.100ms.live/)
+![Tree shaking](https://badgen.net/bundlephobia/tree-shaking/@100mslive/roomkit-react)
+
 # Room Kit React Library
 
 100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.
 
 ## Installation
 
-```
+```bash
 // npm
 npm install @100mslive/roomkit-react@latest --save
 
@@ -16,7 +21,7 @@ yarn add @100mslive/roomkit-react@latest
 
 ## Usage
 
-#### Using room code
+### Using room code
 
 ```jsx
 import { HMSPrebuilt } from '@100mslive/roomkit-react'
@@ -28,7 +33,7 @@ export default App() {
 }
 ```
 
-#### Using authToken
+### Using authToken
 
 ```jsx
 import { HMSPrebuilt } from '@100mslive/roomkit-react'

diff --git a/packages/roomkit-web/README.md b/packages/roomkit-web/README.md
@@ -1,10 +1,15 @@
-# `@100mslive/roomkit-web`
+# 100ms Web RoomKit
+
+[![Lint, Test and Build](https://github.com/100mslive/web-sdks/actions/workflows/lint-test-build.yml/badge.svg)](https://github.com/100mslive/web-sdks/actions/workflows/lint-test-build.yml)
+[![Bundle Size](https://badgen.net/bundlephobia/minzip/@100mslive/roomkit-web)](https://bundlephobia.com/result?p=@100mslive/roomkit-web)
+[![License](https://img.shields.io/npm/l/@100mslive/roomkit-web)](https://www.100ms.live/)
+![Tree shaking](https://badgen.net/bundlephobia/tree-shaking/@100mslive/roomkit-web)
 
 A web component implementation of the HMSPrebuilt component from [roomkit-react](https://www.100ms.live/docs/javascript/v2/quickstart/prebuilt-quickstart) library.
 
 ## Usage
 
-```
+```js
 import '@100mslive/roomkit-web'
 
 Vue