LiveSplit Web Layout

Custom layout for LiveSplit, intended as a livestream graphic, viewable on web.

Upcoming Features

• Visible Personal Best and Best Possible Time
• Support for Subsplits
• Support for Skip/Undo Split
• Horizontal Layout
• More Customization Options (left alignement, split appearance direction, max split width, font)

Setup

Warning

This layout relies on beta features in LiveSplit! If you have the latest stable version (1.8.29), the layout will not be able to connect to LiveSplit.

Download the latest development build to fix.

1. Download the code and extract into a new folder.
2. In OBS Studio (or whatever other program you use), create a new Browser Source, enable Local File, and set it to the downloaded index.html file. Make sure the browser source is set to match the resolution of your screen (ex. 1920x1080).
3. Open LiveSplit, right-click, go to Control, and click on Start WebSocket Server. The layout on OBS should automatically update.
4. Begin running! The layout will automatically update with any split events that occur.

Customization Settings

You can customize the layout by adding custom CSS to the OBS Browser Source. Copy the code below and edit as you wish.

:root {
    /* Customization Options */
    --bottom: 15px;
    --right: 15px;
    --scale: 1;
    --maxSplits: 6;
}

• bottom and right: Position of the layout on-screen, relative to the bottom-right hand corner. (Default values: 15px)
• scale: Scale of the layout, for those that may find the default to be small. (Default value: 1)
• maxSplits: Maximum number of splits to display at once. (Default value: 6)

Background Blur

It's possible to blur the background of the layout in OBS, which you may prefer for a cleaner look (shown in the GIF above).

1. Download and install the obs-composite-blur plugin by FiniteSingularity.
2. In OBS, right-click on the game/window/desktop capture source, go to Filters, and add a Composite Blur filter.
3. In the filter settings, change the Effect Mask to Source, and set the Paramaters to point to the Browser Source with the custom LiveSplit layout, using the Alpha Channel as the mask. Tweak the Blur Radius, and other settings, to your liking.