Light Strip Pro lets you personalize your lighting by creating custom scenes with JavaScript. This guide will walk you through creating and testing your scenes using existing templates and integrating them with Stream Deck.

Table of contents

• Getting started with custom scenes
• How to use existing JavaScript scenes
• How to create, test, and preview a JavaScript scene
• How to send your JavaScript scene to Light Strip Pro
• Can I use Stream Deck with custom scenes
• Known limitations
• Troubleshooting

Getting started with custom scenes

Creating custom scenes for Light Strip Pro requires some knowledge of JavaScript.

Download the tools

Start by downloading and extracting the JavaScript Scenes Builder ZIP file, which includes all the tools and documentation you'll need.

Readme

Read through README.md in the downloaded ZIP to get an overview of the JavaScript scene format.

💻 Download here.

How to use existing JavaScript scenes

You can use pre-made JavaScript scene files from Control Center as templates. These are located in thedefault-scenes subfolder of the downloaded ZIP. Alternatively, they can be found in Control Center installation directories:

• Windows: %ProgramFiles%\Elgato\ControlCenter\Scenes
• macOS: /Applications/Elgato Control Center.app/Contents/Resources/javascript-scenes

How to create, test, and preview a JavaScript scene

Open the builder

Open the javascript-scenes-builder.html file in your browser.

Upload or paste code

Upload your JavaScript scene file or paste your code in the text field. You can also upload one of the existing Elgato-created scene files.

Run and preview

Click on "Run scene code" to see a preview. Configure your scene parameters (colors, speed, etc.) and get a live preview.

Debug

If an error occurs, use the JavaScript developer tools console in your browser to debug. Edit your code directly in the editor field and download the code as a file once you are done.

How to send your JavaScript scene to Light Strip Pro

Using a browser

1) Open your browser with Cross-Origin Resource Sharing (CORS) temporarily disabled. For Chromium browsers, add command-line parameters --disable-web-security --user-data-dir="...".

2) Open the javascript-scenes-builder.html file, upload your JavaScript scene file, and click on "Run scene code".

3) Enter the IP address of your Light Strip Pro in the "Send to Light Strip Pro" field and click "Send to Light Strip Pro". Find the IP address in the Control Center accessory settings.

Using Control Center

1) Exit Control Center app/process completely.

2) Copy Scene File: Copy your JavaScript scene file to the appropriate directory:

• Windows: %ProgramFiles%\Elgato\ControlCenter\Scenes
• macOS: ~/Library/Application Support/Elgato Control Center/Scenes
• iOS: Connect your iPhone/iPad to your Mac, go to the Files tab in Finder, and drag and drop your file into the Control Center row.

3) Start the Control Center app again, find your Light Strip Pro, open the "Scenes" tab in the accessory settings, click on the "+" button, and select your scene. Click "Activate".

Known limitations

Scene sharing

JavaScript scenes are not shared automatically between your Control Center installations on different devices. Manually copy your JavaScript scene file to all your devices to use the scenes.

Android support

Android does not support custom scenes.

Can I use Stream Deck with custom scenes?

Yes, you can toggle your custom scenes using Stream Deck once they are activated in Control Center.

Troubleshooting

Browser

Check the JavaScript developer tools console for errors. Retry sending while the Network tab is opened to check the network request.

Control Center

Check the logfile of Control Center for further information. For debugging, using the HTML scene builder is recommended.