In Chapter 3, Deployment it is described that the preview CAE web application and Studio communicate via an internal messaging system. This messaging system is also used to transfer metadata from the preview side to the Studio side. To hide this low-level layer from the Studio developer, CoreMedia offers a metadata service for each instance of a preview panel that runs in CoreMedia Studio. Given a preview panel, its metadata service can be obtained as follows (please see the API documentation of PreviewPanel for further information on how to obtain a preview panel component).

import PreviewPanel from "@coremedia/studio-client.main.editor-components/sdk/preview/PreviewPanel";

//...
const previewPanel:PreviewPanel = ... ;
const metadataService = previewPanel.getMetadataService();

The metadata service interface currently offers just one method, namely:

getMetadataTree(filterProperties?: String[]): MetadataTree;

Via this method, the metadata of the associated preview panel's document can be retrieved. Metadata embedded in the preview document is represented in terms of a tree. This metadata tree originates from the DOM tree of the preview document: Hierarchical relationships between the metadata tree nodes correspond to hierarchical relationships between the DOM tree nodes that the respective metadata chunks are attached to. Consequently, the metadata tree is basically a projection of the DOM tree to its metadata information.

It is possible to further filter the metadata tree by means of the method's optional parameter, namely an array of properties. If such properties are supplied, the metadata tree contains only nodes that have at least one of these properties. In addition, other properties than the given properties are filtered out. Such a filtered metadata tree is a projection of the metadata tree that contains all metadata. The above statement about the correspondence of hierarchical relationships in the metadata tree and the DOM tree still holds.