https://github.com/web-dev-sam/beatsaber-overlay
A very simple & modern implementation of a beatsaber stream overlay.
https://github.com/web-dev-sam/beatsaber-overlay
beatsaber beatsaber-overlay obs simple streaming
Last synced: about 2 months ago
JSON representation
A very simple & modern implementation of a beatsaber stream overlay.
- Host: GitHub
- URL: https://github.com/web-dev-sam/beatsaber-overlay
- Owner: web-dev-sam
- Created: 2022-08-13T15:14:43.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-08-03T18:12:18.000Z (over 1 year ago)
- Last Synced: 2025-01-10T14:05:49.492Z (4 months ago)
- Topics: beatsaber, beatsaber-overlay, obs, simple, streaming
- Language: JavaScript
- Homepage: https://bs-overlay.vercel.app
- Size: 27.3 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Simple & themeable Beatsaber Overlay
## How To
Make sure you have the mod DataPuller installed. If you are a streamer just use the following url as a source in obs or other streaming programs: https://beat-saber-overlay-f9wzhc7zt-webedy.vercel.app/overlay.html. Or If you want to use another Theme just include it in the url like this: https://beat-saber-overlay-f9wzhc7zt-webedy.vercel.app/overlay.html?theme=Moonlit.
Overview of all themes with pictures is coming soon. Currently there are two themes available: `Default` & `Moonlit`.
## What is different?
* Specially made for easy development of new themes by other devs. No node stuff, no overengineering.
* You are welcome to contribute your own themes, feel free to open a pull request.
## How can I develop my own theme?
1. Create a folder for your own theme under `themes/`. And add the corresponding HTML, JS and CSS files.
2. Make sure your folder and files have the same name.
3. Register your theme in the `index.js` file by adding it to the `THEMES` constant.
4. Start your VSCode Live Server (Its an extension for VSCode).
5. Start beatsaber and playing a replay or something when developing your theme under https://beat-saber-overlay-f9wzhc7zt-webedy.vercel.app/overlay.html?theme=YourThemeName
6. Have fun designing and creating your theme!
## How theme development is designed:
* `YourTheme.html`: This contains only the HTML you need for your overlay. Use the `` element to inject beatsaber data into your HTML. Check the console logs to see what data you can work with.
* `YourTheme.css`: This contains only the CSS you need for your overlay
* `YourTheme.js`: This file is used when...
* you want to change/format the values you get from BeatSaber (example for accuracy: `91.2345678 -> "91.23%"`)
* you want to execute any JS after an update of a value
The best way to understand is by looking at already existing themes.