Docs Overview/
Web/

Web

This article details how to customize TUILiveKit's user interface by exporting the source code.

Method 1：Modify the LiveKit source code

You can directly modify the UI source code provided by us to adjust the TUILiveKit user interface to your needs.

Step 1: Export LiveKit source code

Vue3
1. Execute the source code export script, the default copy path is ./src/components/TUILive.
  node ./node_modules/@tencentcloud/livekit-web-vue3/scripts/eject.js
2. Follow the script prompts to confirm that you want to copy the TUILiveKit source code to the ./src/components/TUILive directory. Enter 'y' if you want to customize the copy directory, otherwise enter 'n'.



3. After exporting the source code, the TUILiveKit source code will be added to the project path you specified. At this point, you need to manually change the reference to the liveMainView component, liveRoom object from the npm package address to the relative path address of the TUILive source code.
- import { liveMainView, liveRoom } from '@tencentcloud/livekit-web-vue3';
//  Replace the reference path with the real path of the TUILiveKit source code.
+ import { liveMainView, liveRoom } from './src/components/TUILive/index.ts';

Step 2: Configure the LiveKit source code development environment

Config for Vue3 + Vite + TS
1. Install development environment dependencies
npm install typescript -S -D
2. Register for Pinia
TUILive uses Pinia for room data management, you need to register Pinia in the project entry file, which is the src/main.ts file.
// src/main.ts
import { createPinia } from 'pinia';

const app = createApp(App);
// register for Pinia
app.use(createPinia()); 
app.mount('#app');
3. Configuring esLint Checksums
If you don't want the TUILiveKit component's esLint rules to conflict with your local rules and cause runtime errors, you can add the Ignore TUILive folder to .eslintignore.
// Please add the real path to the TUILive source code
src/components/TUILive
Should you encounter TypeScript errors during the project build process, it is advisable to inspect the project's package.json file. Remove the vue-tsc segment within the corresponding build command as illustrated below:
// package.json
{
    "scripts": {
        // "build": "vue-tsc --noEmit --skipLibCheck && vite build",
        "build": "vite build"
    }
}
4. At this point you can run the project to see the effect of source code importation.
npm run dev

Step 3：At this point you can run the project to see the effect of source code importation.

1. Replace icons

You can directly modify the icon components in the /TUILive/components/common/icons folder to ensure that the icon color and style are consistent throughout the app. Please keep the icon file names unchanged when replacing.

2. Adjust UI layout

You can adjust the UI layout of the TUILive interface by modifying different components under the /TUILive/components path.
- components/    
    - Chat                Chat
    - common              Common icon components
    - ManageMember        Member management
    - RoomContent         Room video
    - RoomFooter          Room page Footer section
    - RoomHeader          Room page Header section
    - RoomHome            Home page
    - RoomInvite          Invite members
    - RoomLogin           Login page
    - RoomMore            More
    - RoomSetting         Settings

Method 2：Implement your own UI

The overall functionality of TUILiveKit is based on the RTC Room Engine SDK, and you can implement your own UI based entirely on the RTC Room Engine SDK. See details RTC Room Engine SDK.