Bring Your Own (BYO): Understanding Runtime Engine API

The Runtime Engine API provides the interface between your custom BYO assets and the Unqork Designer Platform. It exposes services that let Creators manage component state and emit events during runtime. This API 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.

Interface

Below is an example schema of the interface type declaration:

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 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).

Resources

Bring Your Own (BYO) Framework Landing Page

Find all the resources needed to build your own components here.                                                

Introduction to the Bring Your Own (BYO) Framework

Get started building your own custom assets, including components, events, and operations.                                                    

Create a BYO Package

Discover the structure and content of a BYO Package                                                    

Understanding the manifest.json File

Learn about the file's specification, component and event definitions.                                                    

Custom Component

Understand the state, interface, and events of a custom component.                                                    

Custom Component SDK

Extend component functionality in the Unqork Designer Platform.                                                    

Custom Events

Learn more about creating custom events for use in the Operations Builder.                                                    

Event Payloads

Learn more about viewing and using event payloads with the Operations Builder.                                                    

Custom Operations

Learn more about creating custom operations for use in the Operations Builder..                                                    

BYO  Implementation Examples

Discover examples of component implementation using the Unqork Designer Platform.                                                    

BYO Best Practices

Learn about best practices for implementing and using BYO assets.                                                    

BYO General FAQ

Learn about the Bring Your Own Framework and discover frequently asked questions.