index

Myop SDK

Dynamic UI component management for modern web applications

What is Myop?

Myop is an open-source SDK that enables real-time UI modifications without deployments. It bridges your application logic with dynamically swappable user interfaces, allowing developers to:

Experiment with UI/UX changes instantly
Refactor component appearance without touching core functionality
Maintain typed communication between components and host applications
Load and manage UI components dynamically at runtime

Installation

npm install @myop/sdk

Or via CDN:

<script src="https://cdn.myop.dev/sdk/next/myop_sdk.min.js"></script>

Quick Start

Using npm/ESM

import { getHostModule } from '@myop/sdk';

// Initialize the SDK
const { hostSDK } = await getHostModule();
hostSDK.init();

// Load a component
const component = await hostSDK.loadComponent(componentConfig, containerElement);
await component.initiated();

Using CDN

<script src="https://cdn.myop.dev/sdk/next/myop_sdk.min.js"></script>
<script>
  const { hostSDK } = await window.myop.rootSDK.getHostModule();
  hostSDK.init();

  const component = await hostSDK.loadComponent(config, document.getElementById('app'));
  await component.initiated();
</script>

Architecture

The Myop SDK is modular, consisting of several specialized packages:

Module	Description	Import
Host SDK	Core module for embedding and managing Myop components	`@myop/sdk` or `@myop/sdk/host`
Iframe SDK	Secure isolation for components in iframes	`@myop/sdk/iframe`
WebComponent SDK	Support for self-contained web components	`@myop/sdk/webcomponent`
Messages	Type-safe communication between host and components	`@myop/sdk/messages`
Helpers	Utility functions and configuration builders	`@myop/sdk/helpers`

Framework Integration

Myop provides official framework packages for seamless integration:

Package	Install
React	`npm install @myop/react`
Vue.js	`npm install @myop/vue`
Angular	`npm install @myop/angular`

React

npm install @myop/react

import { MyopComponent } from '@myop/react';

function App() {
  return (
    <MyopComponent
      componentId="your-component-id"
      environment="production"
      data={{ user: 'John' }}
      onLoad={(component) => console.log('Component loaded', component)}
      onError={(error) => console.error('Error:', error)}
      on={(action, payload) => {
        // Handle CTA actions from the component
        console.log('Action:', action, payload);
      }}
      loader={<div>Loading...</div>}
      fallback={<div>Failed to load</div>}
    />
  );
}

Props:

Prop	Type	Description
`componentId`	`string`	Component ID from Myop Cloud
`environment`	`string`	Environment identifier (default: `"production"`)
`data`	`any`	Data passed to `myop_init_interface`
`onLoad`	`(component) => void`	Called when component loads
`onError`	`(error) => void`	Called on error
`on`	`(action, payload) => void`	Handler for `myop_cta_handler` calls
`loader`	`ReactNode`	Custom loading indicator
`fallback`	`ReactNode`	Custom error fallback
`fadeDuration`	`number`	Loader fade duration in ms

Preloading:

import { preload, isPreloaded } from '@myop/react';

// Preload components for faster rendering
await preload(['component-1', 'component-2'], 'production');

// Check if already loaded
if (isPreloaded('component-1')) {
  // Component will render instantly
}

Local Development:

import { enableLocalDev } from '@myop/react';

// Point to local server
enableLocalDev();

Vue.js

npm install @myop/vue

<template>
  <MyopContainer
    :componentId="componentId"
    :flowId="flowId"
    @ready="onReady"
    v-bind="$attrs"
  >
    <template #loading>
      <div>Loading...</div>
    </template>
  </MyopContainer>
</template>

<script setup lang="ts">
import { MyopContainer } from '@myop/vue';
import type { IMyopComponent } from '@myop/sdk/host';

const componentId = 'your-component-id';
const flowId = 'optional-flow-id';

const onReady = (component: IMyopComponent, innerRef?: any) => {
  console.log('Component loaded', component);
};
</script>

Props:

Prop	Type	Description
`componentId`	`string`	Component ID from Myop Cloud
`flowId`	`string?`	Optional flow ID
`onReady`	`(component, innerRef?) => void`	Called when component loads

Slots:

Slot	Description
`loading`	Shown while component loads

Angular

npm install @myop/angular

import { Component } from '@angular/core';
import { MyopContainerComponent } from '@myop/angular';
import type { IMyopComponent } from '@myop/sdk/host';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MyopContainerComponent],
  template: `
    <myop-container
      [componentId]="componentId"
      [flowId]="flowId"
      [inputs]="inputs"
      (componentReady)="onComponentReady($event)"
    >
      <!-- Content shown while loading -->
      <div>Loading...</div>
    </myop-container>
  `
})
export class AppComponent {
  componentId = 'your-component-id';
  flowId?: string;
  inputs = { theme: 'dark' };

  onComponentReady(component: IMyopComponent) {
    console.log('Component loaded', component);
  }
}

Inputs:

Input	Type	Description
`componentId`	`string`	Component ID from Myop Cloud
`flowId`	`string?`	Optional flow ID
`inputs`	`object`	Data passed to the component

Outputs:

Output	Type	Description
`componentReady`	`IMyopComponent`	Emitted when component loads

Vanilla JavaScript / CDN

<div id="myop-container"></div>

<script src="https://cdn.myop.dev/sdk/next/myop_sdk.min.js"></script>
<script>
  async function init() {
    const { hostSDK } = await window.myop.rootSDK.getHostModule();
    const { CloudRepository } = await window.myop.rootSDK.getMyopHelpers();

    const container = document.getElementById('myop-container');

    // ============ V1: User Flows ============
    // Fetch from auto-generated flow
    const configV1 = await CloudRepository.Main.fetchComponentV1('component-id');
    await hostSDK.loadComponent(configV1, container);

    // Or fetch from a specific flow
    const configFromFlow = await CloudRepository.Main.fetchComponentV1('component-id', 'flow-id');

    // ============ V2: Direct Variant Loading ============
    // Fetch variant directly by component ID and environment
    const variantV2 = await CloudRepository.Main.fetchComponentV2('component-id', 'production');
    await hostSDK.loadComponent(variantV2, container);
  }

  init();
</script>

API Reference

CloudRepository

Fetch component configurations from Myop Cloud:

import { CloudRepository } from '@myop/sdk/helpers';

// Fetch a component (v1 - from user flows)
const componentConfig = await CloudRepository.Main.fetchComponent('component-id');

// Fetch a component from a specific flow
const componentConfig = await CloudRepository.Main.fetchComponent('component-id', 'flow-id');

// Fetch a v2 component variant
const variantConfig = await CloudRepository.Main.fetchComponentV2('component-id', 'environment');

// Fetch a complete user flow
const flow = await CloudRepository.Main.fetchFlow('flow-id');

// Check if a component is preloaded
const isLoaded = CloudRepository.Main.isPreloaded('component-id');

Host SDK

import { getHostModule } from '@myop/sdk';

const { hostSDK } = await getHostModule();

// Load a component into a container
const component = await hostSDK.loadComponent(componentConfig, containerElement);

// Load with options
const component = await hostSDK.loadComponent(componentConfig, container, {
  hidden: false,           // Start hidden
  connectProps: true,      // Auto-connect props (default: true)
  timeout: 5000,           // Initialization timeout
  hooks: {                 // Lifecycle hooks
    afterSkinSelected: async (skin) => skin
  }
});

// Navigate to a different component
const newComponent = await hostSDK.navigate(currentComponent, newConfig, {
  staged: true,  // Load new component before disposing old one
});

// Send messages to component
component.send(message);

// Dispose component
component.dispose();

ComponentConfig Builder

Build component configurations programmatically:

import { ComponentConfig, SkinConfig } from '@myop/sdk/helpers';

const skin = SkinConfig.create()
  .withHTMLLoader({
    HTML: '<div>My Component</div>',
    shadowRootMode: 'open'
  })
  .build();

const config = ComponentConfig.create()
  .withName('my-component')
  .withDefaultSkin(skin)
  .withBasicRef('header')
  .withBasicRef('content')
  .build();

Iframe SDK

For components running inside iframes:

import { getIframeModule } from '@myop/sdk';

const { IframeSDK } = await getIframeModule();

WebComponent SDK

For self-contained web components:

import { getWebcomponentModule } from '@myop/sdk';

const { WebComponentSDK } = await getWebcomponentModule();

Documentation

For comprehensive documentation, guides, and examples, visit docs.myop.dev.

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Run tests
npm test

# Build for production
npm run build

# Generate documentation
npm run build:docs

License

This project is licensed under the MIT License.

Made with care by the Myop team

Myop SDK

What is Myop?​

Installation​

Quick Start​

Using npm/ESM​

Using CDN​

Architecture​

Framework Integration​

API Reference​

CloudRepository​

Host SDK​

ComponentConfig Builder​

Iframe SDK​

WebComponent SDK​

Documentation​

Development​

Related Resources​

License​