Note
The VRChat OBS World Overlay is still under development, and this repository is intended for public testing. Build instructions for developers may change at any time. If you encounter any issues, feel free to reach out for help by either opening a GitHub issue or contacting me on Discord: @philippuccino
This is an Open Broadcaster Software (OBS) Browser-Source Overlay, which displays information about the VRChat World you are currently in. This requires VRCX to be running in the background for it to work.
preview_IVVlvgBtkx.mp4
Full builds are available on the releases page of this repository. You can either use the win-unpacked version for a portable option or install the provided installer.
Support for macOS and Linux is not available at this time.
To use this overlay, you must have VRCX running in the background, as it provides the data required for functionality. The overlay fetches the last visited world and VRChat login details from VRCX to determine platform compatibility.
Access the overlay at http://localhost:1412/ in your OBS Browser Source. You may need to specify the path to your VRCX AppData folder if it's not in the default directory. The overlay relies on the database file from VRCX. Adjust the width and height to match your stream's canvas size, which is usually 1920x1080.
Note
Changing the HTML or CSS of the overlay involves running Vite in the build process, this means that you will need to make any changes inside the development environment and run the build process when you're finished with your desired changes.
The port used for the OBS overlay changes in the development environment to 3000 instead of 1412.
You can find the full markup and CSS for the overlay in /src/views/OverlayView.vue. Keep in mind that this project uses Tailwind CSS, so you can take advantage of its complete library. This project also uses the javascript framework Vue.js and includes Anime.js for animations. You can write your styles in SCSS style too.
Before starting the build process, install Node.js and Git on your machine. During installation, make sure to select the option to add "npm" to your system's PATH. If you don't have Git installed, you can also download the repository directly from GitHub.
For manual building and development, please follow these steps:
- Clone this repository
git clone https://github.com/philippgitpush/vrc-obs-world-overlay
cd vrc-obs-world-overlay- Install all necessary dependencies
npm install- Start the development environment
npm run dev
Note
Since we are running Vue.js and Vite, any changes you make will be directly reflected in your browser window thanks to Hot Module Replacement. You won't have to manually reload your window unless you are making big architectural changes.
- Once you've made your changes, proceed to build the application
npm run build
This will build a full version of the application and generate installation or executable files in the /build directory.
This project is licensed under the MIT License - see the LICENSE file for details.
Icons taken from Phosphor Icons. Font taken from Google Fonts.