Adding Metadata

In some cases, the creators would want to pass some information regarding specific Nodes or UI elements for use by the developer, for example tagging specific Nodes with some attribute that can later be used in the code to identify them by.

Adding the metadata

Adding this metadata is done via Eko Studio.

To add metadata to a Node or a UI element, right click it and select the “Get element ID and metadata” option.

This will open a popup with a standard JSON editor where keys and values can be added freely.

Closing the popup will save the metadata information for this object.

Pay attention that the metadata must be in a valid JSON format. if there is a syntax or a validation error, a red ‘x’ mark will appear in the bottom status bar indicitaing the problem, hovering over it will reveal more information on the error.

Using the metadata in the project’s code

The metadata added in Eko Studio can be accessed in the code under the Node object or the UI element ‘props’.

For Nodes it will be located in their data object studio property.
For UI elements it will located in its studio prop.

To get the Node object or the UI element props you will need their ids (which is also located in the “Get element ID and metadata” popup).


// Getting the metadata of a specific node:
let node = player.repository.get('node_beginning_686657');
let nodeMetadata =;

// Filtering nodes by their metadata:
let allNodes = player.repository.get('all');
let nodesWithJohn = allNodes.filter((n) => {
    return === 'John';
// Getting a UI element's own metadata value:
// functional component
function MyComponent(props){
    return (<button onClick={ ()=>addScore( }>addScore</button>)

// class-based component
class MyComponent extends React.Component {
        return (<button onClick={ ()=>this.addScore( }>addScore</button>)    

// Getting a UI element metadata value from outside a component
// (or a different component's metadata):
let buttonProps = player.ui.getProps('button_beginning_859c00');

// Filtering UI elements by their metadata
let allProps = player.ui.getProps();
let filteredBtnIds = Object.keys(allProps)
    .filter((buttonId) => {
        return allProps[buttonId].studio &&
            allProps[buttonId].studio.buttonType === 'myCustomButtonType';
Rate this page: X
Tell us more!