Developer Portal
Quick StartsComposition scriptingAPIs and SDKsSupport
  • Portal overview
  • Quick start
  • REST API
    • Introduction
    • Rate limits
    • Authorization
    • How-to guides
      • Get a control app's API token
      • Get a composition's sub-composition IDs and names and their payload structures
      • Get a control app's model
      • Get a control app's metadata
      • Update a sub-composition's content
      • Update a sub-composition's animation state
      • Update a sub-composition's content and animation state in one call
      • Update multiple sub-compositions in one call
    • API reference
      • Get control app details
        • Get a control app's metadata
        • Get a control app's model
        • Get a control app's control data
      • Send data to a control app
        • Update a control app's content
        • Update a control app's animation state
      • Take out all of an app's output
  • Data stream API
    • Introduction
    • Rate limits
    • Authorization
    • How-to guides
      • Create a data stream
      • Link a data stream to a composition
      • Send data to an app using the data stream API
    • API reference
  • Composition scripting
    • Introduction
    • Overview
    • Quick start
      • Find sub-compositions and widgets
      • Read and update control nodes
      • Set text widget text properties
      • Read and update widget properties
      • Read control nodes and update widget properties
      • Set image widget URL property
      • Set table widget content property
    • Cheat sheets
      • Fundamentals
      • Interactive overlays
      • Best practices
    • Use cases
      • Read control nodes and generate HTML text
      • Read control nodes, generate HTML text with background
      • Text Ticker - Start ticker on "In" animation
    • Composition script editor reference
  • Software development kits
    • Graphics SDK
      • Getting started
      • Reference
        • SDK functions
        • Composition object
        • Sequencer object
      • Guides and examples
        • Load a composition with its token
        • Load a composition with its URL
        • Get the composition URL of an app instance
        • Sequencer VOD example
        • Control local preview of app
        • Load app instance output
    • Overlay SDK
      • Getting started
      • SDK functions
      • Use case examples
    • Widget SDK
      • Preparing your environment
      • Getting started
      • Reference
        • Widget UI definition
        • Widget callback functions
        • Time control object
        • Composition instance
      • Guides and examples
        • Widget example: CSS patterns
    • App SDK
  • Singular Basics
    • Overview of Singular
    • Managing overlays in the Dashboard
      • How to create a new composition
      • How to open a new app template
      • How to create an app for a composition
      • How to extract a composition from an app
      • How to find an app's shared app token and shared API URL
      • Dashboard reference
    • Building overlays in Composer
      • How to build a composition
      • How to set up layer logic to automate overlay transitions
      • How to set up control nodes to make widget properties available to a control app
      • Animating overlays
        • How to create timeline animations
        • How to create behavior animations
        • How to create update animations
      • How to make overlays interactive
      • How to adapt overlays to various screen sizes
      • Composer reference
    • Controlling overlays in Studio and UNO
      • How to use Studio
      • Studio reference
      • UNO reference
  • Support
    • Singular status
    • Support resources
    • Singular terminology
    • Performance Testing
Powered by GitBook
On this page
  • Composition script editor modes
  • Accessing the composition script editor
  • Composition script editor layout
  • 1. Menu bar
  • 2. Code editor
  • 3. Preview panel
  • 4. Composition navigator

Was this helpful?

  1. Composition scripting

Composition script editor reference

Get to know the composition script editor

PreviousText Ticker - Start ticker on "In" animationNextGraphics SDK

Last updated 2 years ago

Was this helpful?

The composition script editor is the place to write and edit composition scripts.

Composition script editor modes

There are two ways to run the composition script editor:

  • Normal mode

  • Safe mode

Accessing the composition script editor

  • Normal mode can be accessed in Composer by selecting the </> button above the property panel.

  • Safe mode can be accessed by selecting the ambulance button. This is available so that if a script contains a bug or sets off an infinite loop, you can close the browser and fix the bug in safe mode before returning to the normal mode editor again.

Both open the composition script editor in a new browser tab.

Composition script editor layout

The composition script editor provides a code editor, composition navigator, and output preview in a single view.

In addition, the menu bar offers 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).

1. Menu bar

  1. Save all scripts: compiles and executes all the composition scripts in the editor. The latest version of the composition scripts are also uploaded to the composition.

  2. Reload composition: updates the incoming link from the composition so that the composition script access shows the current state of the composition.

  3. Beautify JavaScript: beautifies/reformats code in the code editor.

  4. Script Library: provides JavaScript boilerplate code for each type of composition script that describes its structure and available event listeners.

  5. Developer resources: provides links to the following:

    • Singular graphics SDK documentation

    • Singular overlay SDK documentation

    • Code editor keyboard shortcuts

  6. Code editor settings: provides option to customize the look of the code editor. Options include tab and font size, toggling the dark theme on and off, line numbers, wrap lines, indent with tabs, and render whitespace.

  7. Toggle interactive zones: toggles a composition's interactive zones if any have been set up.

  8. Output orientation: Toggles between landscape and portrait mode.

  9. Screen size: Provides options for setting the output to the screen size of various devices.

  10. Support: Opens a support window.

2. Code editor

This is the place to write composition scripts.

The + button

Selecting the + button opens a drop-down list of possible composition scripts to add to a composition. They include:

  • An overlay script

  • A global script

  • A script for the root composition

  • One script for each sub-composition

The mark next to the name also conveys valuable information:

  • Circle: a composition script has been created.

  • Checkmark: the composition script is error-free.

  • Red circle: the composition script contains an error.

Error checker

The bottom left of the code editor shows any errors in the code and displays OK when there are none.

3. Preview panel

This panel displays a preview of the composition scripts' effect on the sub-composition.

4. Composition navigator

The compostion navigator contains various information about compositions that are needed to write composition scripts.

From left to right, the panels are:

Composition control panel

The composition control panel shows information about the composition's root composition and sub-compositions that are needed when writing composition scripts.

The left side of the panel shows the sub-composition's assigned logic layer and current In-Out state.

The right side of the panel shows additional information in the following tabs:

  • Fill-in form: the editable text and its positioning of the selected root or sub-composition. When changed, the payload updates.

  • Sub-comp info: the sub-composition's name and ID, as well as the ID, name, type, and current value of the elements of the sub-composition that have been made editable though a control node.

  • Model: the model of the app in JSON, which is required for specific use cases.

  • Payload: the JSON data for the selected sub-composition, which is needed in many Singular REST API requests.

Globals panel

The globals panel contains the composition's screen size, layout, text direction, interactive status, and language. Globals are required for adaptive graphics and other specific use cases.

Widget explorer panel

The widget explorer shows all the widgets used in a composition, including their name, ID, version, and status. It also shows the ID, name, and type of each widget's editable fields.

Widgets can be updated to the published version in Composer by selecting the widget in the composition tree panel. This opens a drop down menu that shows available widget versions.

Overlay SDK simulator panel

The SDK overlay simulator is used to integrate Singular overlays with video players.

Menu bar
Code editor
Preview panel
Composition navigator panel
Composition control
Globals
Widget explorer
Overlay SDK simulator
Accessing the composition script editor
Composition script editor layout
Menu bar
The code editor
The preview panel
Composition navigator
Composition control panel
Globals panel
Widget explorer
Updating widgets
The overlay SDK simulator panel