The ui plugin allows you to add custom React Components.
You can either add your own React components or extend Eko studio’s default components.
It provides methods to override existing components that were predefined by Eko Studio or add new custom components.
For more information about customizing UI components see the customize UI components guide

See: EkoButton, EkoDecisionButton, EkoParallelButton, EkoTimer

import MyCustomComp from './MyCustomComp';

player.ui.add('myCustomCompId', MyCustomComp);



Get the constants used by the plugin.
Includes naming conventions for the Eko UI classes, events etc.




player.ui.add(id, component, props)

Adds a new UI Component. The component will be added at the root level of the UI Component tree.

Param Type Description
id string A unique id of this component.
component class The React component class to add.
props object Props object that will be passed to the component under this.props.*


import MyCustomComp from './MyCustomComp';

player.ui.add('myCustomCompId', MyCustomComp, { someProp: 'something' });

player.ui.addController(id, typeOrClass, config)

Add a new UI Controller
For example - See EkoGroupController

Param Type Description
id string A unique id of this controller.
typeOrClass string | class A string if of Eko type controller (e.g. ‘EkoGroup’) or a class of a custom written controller.
config object A config object that will be passed to the constructor of the controller.


class MyController {
    constructor(id, config) {
        console.log('MyController', id, config.someValue);

player.ui.addController('myController', MyController, { someValue: 10 });

player.ui.override(toOverride, component, props)

Override the component class or props for a UI Component which already exists/added.
Use this method to override UI Components generated by Eko Studio and replace with your own class.
See Customizing Studio UI

Param Type Description
toOverride string | RegExp | Array.<*> The id (or ids) of the UI Component to override. This value can be either a string (component id), a RegExp that will match one or more ids or an array of any of these.
component class Optional. The new React component class to replace the existing.
props object Optional. The new props object to replace the existing.

Example (Overriding a component class)

import MyComponent from 'MyComponent';
player.ui.override('button_start_dc8404', MyComponent);

Example (Overriding component props)

let currProps = player.ui.getProps('button_start_dc8404');
player.ui.override('button_start_dc8404', null, { someValue: currProps.someValue + 1 });

Example (Overriding both component class and props)

import MyComponent from 'MyComponent';
let currProps = player.ui.getProps('button_start_dc8404');
player.ui.override('button_start_dc8404', MyComponent, { someValue: currProps.someValue + 1 });


Get the current props of a specified UI Component, or a map of all UI elements props.

Param Type Description
id string The id of the UI Component to get the props for

Example (getting the props of a specific component)


Example (getting the props of all components)

Rate this page: X
Tell us more!