---
sidebar_position: 3
title: Component Development
description: Build Myop components using the public API — myop_init_interface for receiving data and myop_cta_handler for sending events. Learn type definitions, sizing, preview data, and single-file vs multi-file architectures.
keywords: [myop component, myop_init_interface, myop_cta_handler, myop types, myop html component, build myop component, myop public api]
---
# Component Development
A Myop component is an isolated, independently deployable UI module. It runs inside an iframe managed by the host SDK (`@myop/react`, `@myop/vue`, `@myop/angular`, or `@myop/react-native`). The component communicates with the host through exactly **2 global functions**.
## The Public API
| Function | Direction | Purpose |
|----------|-----------|---------|
| `myop_init_interface(data)` | Host → Component | Receive data, render UI |
| `myop_cta_handler(action, payload)` | Component → Host | Send user actions back |
### myop_init_interface
Called by the host to pass data into the component:
```javascript
window.myop_init_interface = function(data) {
if (!data) return currentState; // Getter mode
render(data); // Setter mode
};
```
- **With argument** — the host is sending data. Render your UI.
- **Without argument** — the host is reading current state. Return the last data received.
### myop_cta_handler
Called by the component to send events to the host:
```javascript
window.myop_cta_handler('item-selected', { itemId: '123' });
window.myop_cta_handler('form-submitted', { name: 'John', email: 'john@example.com' });
```
The host receives these events via props/events on the SDK component (e.g., `on` prop in React, `@cta` event in Vue).
## Type Definitions
Define TypeScript interfaces in a `
```
These types are used by:
- **Auto-generated packages** — `npm install https://cloud.myop.dev/npm/{componentId}/react` generates fully typed React/Vue/Angular components from these definitions
- **AI coding assistants** — skills use these types to provide accurate autocompletion and documentation
## Sizing
Set the default size in a `` tag:
```html
```
Components can request a resize at runtime using the `size-requested` CTA:
```javascript
myop_cta_handler('size-requested', {
width: 400,
height: 300,
minWidth: 200,
maxWidth: 800
});
```
## Preview Data
Add a `
```
This script is stripped when the component runs inside a host application.
## Complete Example
```html
Task List
```
## Rules
1. **Both functions must be defined at top-level script execution** — never inside `setTimeout`, `Promise.then`, `async`, `DOMContentLoaded`, or any deferred code
2. **Rendering must be synchronous** — no `fetch`, no `await`, no `setTimeout` inside `myop_init_interface`
3. **All state is private** — use an IIFE to encapsulate; only expose the 2 global functions
4. **Single entry point** — the deployed artifact is one HTML file with all CSS/JS inlined
5. **No external network requests** — components cannot fetch external resources at runtime
## Single-File vs Multi-File
### Single-file (recommended for most components)
Everything in one `index.html`. No build step needed.
```
my-component/
├── index.html # All HTML, CSS, JS
└── myop.config.json
```
### Multi-file (for complex components)
Use any internal architecture — modules, state management, third-party libraries:
```
my-component/
├── index.html # HTML template
├── src/
│ ├── index.js
│ ├── modules/
│ └── styles/
├── build.js # Bundler (compiles into dist/index.html)
├── dist/
│ └── index.html # Built entry point (deployed)
├── package.json
└── myop.config.json
```
The build step compiles all source files into a single `dist/index.html` that gets deployed.
## Common Mistakes
| Wrong | Correct |
|-------|---------|
| Defining functions inside `DOMContentLoaded` | Defining in top-level `