DOCSEARCHbyAlgolia
Submit Docs

Myop Documentation

website·Indexed 33 days ago

https://docs.myop.dev

A platform and SDK for managing remotely controlled UI elements and components. Myop provides tools for component isolation, render policies, and integration with React, Vue, and Angular via packages like @myop/react and @myop/angular. It includes a CLI for version management, a Dashboard for configuration, and an AI-powered Component Builder with an embedded Myop Agent.

Tokens
89.4K
Snippets
522
Records
690
Agent score
50%

What's inside Myop

  1. Overview of the HostSDK

    The HostSDK is designed for integration within a host application that acts as a container for Myop components. It provides the necessary APIs to register, manage, and communicate with independently developed Myop components, ensuring interoperability and a consistent user experience within the host application.

  2. Overview of Myop SDKs

    Myop SDKs are open-source tools that allow developers to connect application logic with dynamic user interfaces, enabling real-time UI changes without requiring redeployment or backend changes. They support popular frameworks including React, Angular, and Vue.js.

  3. Overview of Myop Self-Hosting

    Myop allows you to serve components from your own infrastructure (such as S3, CloudFront, Azure Blob Storage, GCS, or any static file server). This ensures your application loads components entirely from your own CDN with zero runtime dependency on Myop servers. The workflow involves exporting static JSON files from Myop Cloud via a CI/CD pipeline and deploying them to your CDN.

  4. Overview of Myop System Architecture

    Myop is a meta-framework for micro frontend solutions that allows developers to manage and load UI components dynamically without full application rebuilds. The architecture consists of four main components:

    1. Myop Dashboard: A SaaS platform for defining, organizing (into User Flows), and publishing UI components. It enables A/B testing, segmentation, and gradual rollouts.
    2. Myop Cloud: Cloud infrastructure that stores and serves published component configurations at runtime, reducing main application bundle sizes.
    3. Myop SDK for Host Applications: Integrated during the build process, this SDK fetches configurations from Myop Cloud at runtime and handles component lifecycle and communication.
    4. Myop SDKs for Component Technologies: Specialized SDKs for React, Vue, Angular, Web Components, and iFrames to ensure efficient rendering and cross-framework compatibility.

  5. Overview of @myop/react-native SDK modules

    The @myop/react-native package provides a set of modules for integrating Myop components into a React Native application. The primary modules include MyopComponent for core component functionality, MyopFallback for error/fallback states, MyopLoader for loading states, and a types module for TypeScript definitions.

  6. Overview of Myop CSS Presets

    CSS presets are named CSS themes defined at the organization level. They allow teams to apply brand colors, spacing, and typography to any Myop component at render time. The SDK injects the preset CSS into the component's <head> within a <style> tag before the iframe is written, preventing a flash of unstyled content (FOUC) and ensuring the preset styles win the CSS cascade over the component's internal styles.

  7. Overview of the Experience Builder

    The Experience Builder is Myop's interface for creating and managing personalized user experiences. It allows developers and product managers to define which component variants are shown to different user segments based on rules (e.g., country, device type, or user group) without writing code. Key capabilities include targeting specific audiences, running A/B tests within segments, and setting fallback variants for users who do not match any defined segment.

  8. Overview of Myop HTML Components

    HTML Components in Myop are self-contained units that can be dynamically loaded and managed within an application. They enable real-time UI modifications and experimentation without requiring redeployment or backend changes. For AI-generated components, the 'Local Frame' render mode is recommended to provide complete isolation in an iframe.

  9. Full SSR for Myop components

    Full SSR allows the server to return the component already rendered as part of the HTML, ensuring it is present in the first paint. Note that this is currently an experimental feature and is not part of the public SDK. Developers must contact the Myop team to set this up.

  10. Use the IElementRef interface to reference DOM elements

    The IElementRef interface is used to represent a reference to a DOM element within the MyOP SDK. It provides metadata about the element's identity, type, and spatial positioning.
    interface IElementRef {
  type: string;
  htmlTagName: string;
  myopId?: string;
  BoundingRect?: DOMRect;
  offsetTop?: number;
  offsetLeft?: number;
}

  11. Develop components using the Myop Component Builder

    The Myop Component Builder is an integrated environment for creating and managing UI components. It features a Monaco-based code editor with syntax highlighting and autocomplete, a live preview with split-view and mobile/desktop viewport toggles, and a console for debugging. Developers can manage component variants, define mock data for test scenarios, and publish components to a live environment.