---
title: "Bring Your Own (BYO): Custom Operations"
slug: "bring-your-own-byo-custom-operations"
updated: 2025-09-26T05:49:05Z
published: 2025-09-26T05:49:05Z
canonical: "docs.unqork.io/bring-your-own-byo-custom-operations"
---

> ## 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): Custom Operations

> [!WARNING]
> The Bring Your Own framework is intended for developers who have a strong understanding of the Unqork Designer Platform and JavaScript.

## Overview

The BYO framework enables developers to create **custom operations** that integrate seamlessly with the Unqork Designer Platform. After defining and registering a custom operation, it functions as a native operation that can be used throughout the platform.

> Discover how Creators use operations in the [Introduction to the Operations Builder](/v1/docs/introduction-to-the-operations-builder#understanding-operations) article.

> [!WARNING]
> To improve security, external URLs cannot be imported into a BYO implementation file. Unqork recommends copying external source code into the implementation JavaScript file.

## Operation Definition

Define a custom operation's key attributes in the `manifest.json` file. Each entry in the root-level or component-level `events` array (`components → operations`) defines an operation available in the Unqork Designer Platform.

> Learn more about the operation definition in our [BYO: Understanding the manifest.json File](/v1/docs/bring-your-own-byo-understanding-the-manifestjson-file#component-definition) article.

A component can execute custom operations through configuration in the [Operations Builder](/v1/docs/operations-builder). This enables Creators to execute custom JavaScript functions as operations, performing complex logic, implementing interactions, or changing behavior with a BYO component.

Define each operation as a named export in your main JavaScript file. The export name must match the type value specified in the `manifest.json` file.

```typescript
// Pseudo Code for an operation

class Operation {
  // ...
}

class OperationHandler {
  // ...
}

// If the operation handler does not return a result. This can be omitted.
class OperationContext {
  // ...
}

// Export for the operation
export const operationsOnly = {
  model: async () => Operation,
  handler: async () => OperationHandler,
  contextModel: async () => OperationContext, // If the operation handler does not return a result. This can be omitted.
}
```

### Line 7 : OperationHandler

The operation handler must have an `execute` method. When the operation runs, this method is called with the following arguments:

- `operation`: The operation configuration.
- `api`: The Operation API that lets the operation read or write component state, and emit events.

### Line 12: OperationContext

The operation API consists of the following methods, `state`, and `events`.

#### Method: state

- `resolveByKey(targetingKey: string)`: Resolves a targeting string into the state for the targeted component. It locates only one component.
- `set(key: string, update: Partial<ComponentState>)`: Sets the component state as identified by a unique key.
- `get(key: string)`: Retrieves the component state as identified by a unique key.

#### Method: events

- `emit(event: Event)`: Emits a custom event.

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

### [Understanding the BYO Runtime Engine API](/v1/docs/bring-your-own-byo-understanding-runtime-engine-api)

Discover the interface between your custom BYO components and the Unqork platform.

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

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

Discover examples of component implementation using the Unqork Designer Platform.

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

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

An array is a type of object that stores one or more data types. Data types supported in arrays include numbers, strings, and objects.

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.