Myop SDK
Dynamic UI component management for modern web applications
Documentation |
Website |
Discord
---
## 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
```bash
npm install @myop/sdk
```
Or via CDN:
```html
```
## Quick Start
### Using npm/ESM
```typescript
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
```html
```
## 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
```bash
npm install @myop/react
```
```tsx
import { MyopComponent } from '@myop/react';
function App() {
return (
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={Loading...
}
fallback={Failed to load
}
/>
);
}
```
**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:**
```tsx
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:**
```tsx
import { enableLocalDev } from '@myop/react';
// Point to local server
enableLocalDev();
```
Vue.js
```bash
npm install @myop/vue
```
```vue
Loading...
```
**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
```bash
npm install @myop/angular
```
```typescript
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: `
Loading...
`
})
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
```html
```
## API Reference
### CloudRepository
Fetch component configurations from Myop Cloud:
```typescript
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
```typescript
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:
```typescript
import { ComponentConfig, SkinConfig } from '@myop/sdk/helpers';
const skin = SkinConfig.create()
.withHTMLLoader({
HTML: 'My Component
',
shadowRootMode: 'open'
})
.build();
const config = ComponentConfig.create()
.withName('my-component')
.withDefaultSkin(skin)
.withBasicRef('header')
.withBasicRef('content')
.build();
```
### Iframe SDK
For components running inside iframes:
```typescript
import { getIframeModule } from '@myop/sdk';
const { IframeSDK } = await getIframeModule();
```
### WebComponent SDK
For self-contained web components:
```typescript
import { getWebcomponentModule } from '@myop/sdk';
const { WebComponentSDK } = await getWebcomponentModule();
```
## Documentation
For comprehensive documentation, guides, and examples, visit **[docs.myop.dev](https://docs.myop.dev)**.
- [Getting Started Guide](https://docs.myop.dev/docs/quickstart)
- [SDK Reference](https://docs.myop.dev/docs/sdk)
- [Auto-Generated Packages](https://docs.myop.dev/docs/learnMyop/AutoGeneratedPackages)
## Related Resources
- [Read more about Myop](https://myop.dev)
- [Myop Documentation](https://docs.myop.dev)
- [Discord Community](https://myop.dev/discord)
## License
This project is licensed under the [MIT License](LICENSE).
---
Made with care by the Myop team