Bring Your Own (BYO): Understanding Runtime Engine API

Overview

The Runtime Engine API provides the interface between your custom BYO assets and the Unqork Designer Platform. It exposes services that let Creators Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform. manage component state and emit events during runtime. This API APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services. injects into your assets using the initialize(api) life cycle method.

The Bring Your Own framework is intended for developers who have a strong understanding of the Unqork Designer Platform and JavaScript JavaScript is an object-oriented computer programming language. It is most-commonly used for interactive effects in the browser..

Interface

Below is an example schema of the interface type declaration:

1
2
3
4
5
6
7
8
9
10
11
12
interface UnqorkAPI {
  state: {
    set(state: ComponentState): void
    currentState(): ComponentState
    state$(path: string, includeInitialValue: boolean): Observable<ComponentState>
    resolveByKey(key: string): ComponentState
    resolveByKey$(key: string): Observable<ComponentState>
  },
  events: {
    emit(event: Event): void
  }
}

In UnqorkAPI, the state and events methods are available:

Methods: state

Line 3: set(state: ComponentState): void

Updates the state of the current BYO component.

To only update specific properties, pass a partial object.

For example:

api.state.set({ value: "new value" });

Line 4: currentState(): ComponentState

Returns the current state of the BYO component at the time of execution.

For example:

const state = api.state.currentState();

Line 5: state$(path?: string, includeInitialValue?: boolean): Observable<ComponentState>

Returns a stream (Observable) of updates for a specific path in the component state. This value is useful for reactive updates inside the custom component.

• path: The state object key to observe.

• includeInitialValue: Emits the current value immediately when subscribed.

For example:

api.state.state$('value', true).subscribe((value) => {   // Update component view });

Line 6: resolveByKey(key: string): ComponentState

Retrieves the current state of another component in the same module using its key.

For example:

const componentState = api.state.resolveByKey(args.dataComponentKey);

Line 7: resolveByKey$(key: string): Observable<ComponentState>

Returns a stream of state updates for another component. This value enables reactive subscriptions across components.

For example:

api.state.resolveByKey$(args.dataComponentKey).subscribe((value) => {   // React to external component state change });

Methods: events

Line 10: emit(event: Event): void

Dispatches a custom event from the component that can trigger Designer platform-level actions, like logic or state updates.

For example:

api.events.emit({   name: 'customEvent',   payload: { someValue: "value" } });

Notes

• Use this API APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services. to keep component state in sync with the rest of the application, and to trigger or respond to platform events.

• The UnqorkAPI object is guaranteed to be available in initialize(api).