The Composition Script

Follow

The Composition Script adds JavaScript layers that are bound to your Composition. This allows you to extend on the functionality of your Composition within the Composition itself, rather than requiring this be done from a hosting website using the Graphics SDK. 

In addition, the Composition Script allows you to establish user-defined messages that can be generated internally by the Composition and emitted out of the Singular iFrame to your webpage using the Overlay SDK. Likewise, you can generate custom messages from your webpage that can received directly within the Composition Script.

Singular also includes a built-in script editor, allowing you to test your Composition Script functionality directly with your Composition's output, rather than deploying any code to your web environment.

The Composition Script Editor

Accessing the Composition Script Editor

To open up the Composition Script Editor, select the </> button above the Property Panel. The Composition Script Editor will open up in a new tab within your web browser.

Accessing the Composition Script Editor

The script editor provides a view of the script code, Composition Navigator, fill-in form and output - all in one view.

Also provided is a boilerplate script template that provides access to the composition's SingularPlayer object, and starter code for the object's most commonly integrated events (message, state_changed, payload_changed, datanode_payload_changed, error).

Boilerplate Script Template

Search & Replace Mode

The Script Editor includes a project-aware search panel for finding and replacing text within a single file or across all scripts in your project.

Search

Opening Search Mode

Open the Search and Replace function by selecting the Toolbar Search icon

OR by utilizing the following Keyboard shortcuts:

• Current file: Ctrl + F (Windows) / Command + F (Mac)
• All files: Ctrl + Shift + F / Command + Shift + F

Navigating Results

Move through results with Enter, Arrow keys, or panel buttons. A counter shows position (e.g., 1 of 8 matches).

Replace

• Replace One: Updates the selected match only (first occurrence on that line)
• Replace All: Updates every match in the current scope (file or project)

Replace actions update the editor state—remember to save