---
title: "Bring Your Own (BYO): Understanding Runtime Engine API"
slug: "bring-your-own-byo-understanding-runtime-engine-api"
updated: 2025-09-26T06:52:06Z
published: 2025-09-26T06:52:06Z
canonical: "docs.unqork.io/bring-your-own-byo-understanding-runtime-engine-api"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unqork.io/llms.txt
> Use this file to discover all available pages before exploring further.

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

> [!WARNING]
> 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:

```typescript
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.

> [!TIP]
> To only update specific properties, pass a partial object.

For example:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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](/v1/docs/bring-your-own-byo-framework-landingpage)

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

### [Introduction to the Bring Your Own (BYO) Framework](/v1/docs/introduction-to-the-bring-your-own-byo-framework)

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

### [Create a BYO Package](/v1/docs/bring-your-own-byo-create-a-package)

Discover the structure and content of a BYO Package

### [Understanding the manifest.json File](/v1/docs/bring-your-own-byo-understanding-the-manifestjson-file)

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

### [Custom Component](/v1/docs/bring-your-own-byo-custom-component)

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

### [Custom Component SDK](/v1/docs/bring-your-own-byo-component-sdk-software-development-kit)

Extend component functionality in the Unqork Designer Platform.

### [Custom Events](/v1/docs/bring-your-own-byo-custom-events)

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

### [Event Payloads](/v1/docs/bring-your-own-byo-726-event-payloads)

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

### [Custom Operations](/v1/docs/bring-your-own-byo-custom-operations)

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

### [BYO Implementation Examples](/v1/docs/bring-your-own-byo-726-implementation-examples)

Discover examples of component implementation using the Unqork Designer Platform.

### [BYO Best Practices](/v1/docs/best-practices-bring-your-own-byo-framework)

Learn about best practices for implementing and using BYO assets.

### [BYO General FAQ](/v1/docs/bring-your-own-byo-general-faq-frequently-asked-questions)

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

Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform.

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.

JavaScript is an object-oriented computer programming language. It is most-commonly used for interactive effects in the browser.