Skip to content

Introduction

Erizos Studio comes with a built-in interface editor called UI Builder. UI Builder is a drag-and-drop interface builder that allows you to quickly and easily create either auto-generated basic interfaces or fully customized templates using a rich set of components.

Script Editor

In addition to the available components, UI Builder includes a powerful Script Editor that allows you to add custom logic to your interfaces. These scripts can implement basic functionality, such as toggling UI components based on specific criteria, or more complex logic, such as fetching data from external sources and using that data to populate the interface.

Diff Mode

UI Builder's Script Editor includes a Diff Mode (difference mode) for comparing two versions of the same code. This feature improves safety, clarity, and confidence when editing scripts — especially in complex UI configurations.

Diff Mode highlights what was added, removed, or modified, allowing you to clearly understand changes before saving or committing them. It works similarly to the diff view in VS Code or Git-based tools.

To enable Diff Mode:

  1. Open the script tab
  2. Click the Split Code button in the top-right corner

This splits the editor into two panes, allowing you to compare versions side by side and visually inspect the differences. The 'Editor' tab splits accordingly so you can see UI changes in real-time as you update the code.

Note: If you have Scripts in your Modules, you can also review each script within the Diff Mode.

UI Types

There are two types of interfaces that can be created with UI Builder:

Template UIs

A Template UI is linked to a specific template. The UI is presented to the graphics operator when a page of the template is selected in the playlist in Erizos Studio, or to the journalist when the template or page is selected in the MOS plugin of the News Room System.

Use cases: - Graphics control for specific templates - Template-specific data input - Per-page customization

Show UIs

A Show UI is linked to a specific show and allows you to customize a section of the main Erizos Studio interface when that show is opened. Unlike Template UIs, which are available only when a specific template or page is selected in the playlist, the Show UI is always visible while the show is open.

Use cases: - Global operator controls (clocks, scoreboards) - Show-wide settings and parameters - Always-available tools and utilities

Show UIs are useful when you need to provide global control to operators. For example, a clock and score control interface would be more suitable as a Show UI than a Template UI, as it needs to be readily available to the operator at any point in time.

Reusable Elements

UI Builder supports reusable elements for efficient workflow and consistent design:

Components

Components allow you to create and store common UI designs that are used across multiple UIs. This saves time by eliminating the need to recreate duplicate UI designs.

Benefits: - Create once, use many times - Update all instances simultaneously when the component is modified - Maintain consistency across multiple UIs

Example: You can create a UI component that reads the Pages available in your Playlist, then attach this component to any UI that needs this functionality.

Library

Libraries are useful for creating reusable code snippets that are used across multiple UIs. These snippets can be called and updated at any time, ensuring consistency and reducing redundant code.

Benefits:

  • Centralized code management
  • Easy updates across all UIs using the library
  • Improved maintainability

Getting Started

To learn more about working with UI Builder, see: