Simulate Display content

Updated: Sep 28, 2026

Overview

Mock Device Kit can render the 600×600 pixel display surface of Meta Ray-Ban Display glasses in your app or in Chrome. Use either preview to test Display content and interactions without physical glasses.
Both previews use the same Display content and interaction handlers as your app. Content updates appear in the preview, and selections are sent back to your app.

Prerequisites

Add Mock Device Kit to your project by following the setup guide for your platform:

Simulate with the Chrome extension

Install the Chrome extension

  1. Open the Meta Ray-Ban Display Simulator⁠ page in the Chrome Web Store.
  2. Select Add to Chrome.
  3. Pin the extension to the Chrome toolbar for quick access.

iOS

Start a simulated display and the preview server:
import MWDATMockDevice

private let displayPreviewPort: UInt16 = 9000

@MainActor
func startChromeDisplayPreview() async throws {
    let mockDeviceKit = MockDeviceKit.shared
    mockDeviceKit.enable()

    let mockGlasses = try mockDeviceKit.pairGlasses(model: .metaRayBanDisplay)
    mockGlasses.powerOn()
    mockGlasses.don()

    _ = try await mockDeviceKit.startTestServer(port: displayPreviewPort)
}
Continue with the DeviceSession and content flow described in Integrate Display capability into your iOS app. Content sent through the Display capability appears in the browser preview.
Run the app in an iOS Simulator, open http://127.0.0.1:9000/ in Chrome on your computer, and select the Meta Ray-Ban Display Simulator extension in the Chrome toolbar. Chrome preview is not available when your app runs on a physical iPhone.
When the preview ends, stop the server and disable Mock Device Kit:
await MockDeviceKit.shared.stopTestServer()
await MockDeviceKit.shared.disable()

Android

Start a simulated display and the preview server:
import android.content.Context
import com.meta.wearable.dat.mockdevice.MockDeviceKit
import com.meta.wearable.dat.mockdevice.api.GlassesModel
import com.meta.wearable.dat.mockdevice.api.MockDeviceKitError

private const val DISPLAY_PREVIEW_PORT = 9000

fun startChromeDisplayPreview(
    context: Context,
    onFailure: (MockDeviceKitError) -> Unit,
) {
    val mockDeviceKit = MockDeviceKit.getInstance(context.applicationContext)
    mockDeviceKit.enable()

    mockDeviceKit
        .pairGlasses(GlassesModel.META_RAYBAN_DISPLAY)
        .onSuccess { mockGlasses ->
            mockGlasses.powerOn()
            mockGlasses.don()

            mockDeviceKit
                .startTestServer(DISPLAY_PREVIEW_PORT)
                .onFailure { error, _ -> onFailure(error) }
        }
        .onFailure { error, _ -> onFailure(error) }
}
Continue with the DeviceSession and content flow described in Integrate Display capability into your Android app. Content sent through the Display capability appears in the browser preview.
Run adb forward tcp:9000 tcp:9000 on your computer, open http://127.0.0.1:9000/ in Chrome, and select the Meta Ray-Ban Display Simulator extension in the Chrome toolbar. This works with an Android emulator or an Android device connected through Android Debug Bridge (ADB).
When the preview ends, stop the server and disable Mock Device Kit:
val mockDeviceKit = MockDeviceKit.getInstance(context.applicationContext)
mockDeviceKit.stopTestServer()
mockDeviceKit.disable()

Test the experience

The Meta Ray-Ban Display Simulator extension provides:
  • 600×600 pixel display frame: Preview the display resolution with an optional frame overlay and additive blending.
  • Environment backgrounds: Test content against built-in scenes, a custom image, an animated background, or a live webcam view.
  • Directional input: Use the on-screen directional controls and Select button to test focus and selection. Selections are routed to your app’s Display interaction handlers.
  • Display settings: Adjust content brightness, background brightness, background blur, and auto-dimming.
  • Viewport recorder: Record the simulator viewport as a WebM video for demos or bug reports.
Meta Ray-Ban Display Simulator

Simulate in your app

You can embed the simulated display in your app without starting the preview server or installing the Chrome extension. Pair and power on a Meta Ray-Ban Display mock device, then simulate wearing it as shown in the platform examples above. Add the mock device’s preview view to a square container in your app.

iOS

Add the preview view returned by createPreviewView() to a UIView in your interface:
import MWDATMockDevice
import UIKit

@MainActor
func addDisplayPreview(
    from mockGlasses: any MockGlasses,
    to previewContainer: UIView
) {
    let previewView = mockGlasses.services.display.createPreviewView()
    previewContainer.addSubview(previewView)
    previewView.frame = previewContainer.bounds
    previewView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
}

Android

Add the preview view returned by createPreviewView() to a ViewGroup in your interface:
import android.view.ViewGroup
import com.meta.wearable.dat.mockdevice.api.MockGlasses

fun addDisplayPreview(mockGlasses: MockGlasses, previewContainer: ViewGroup) {
    val previewView =
        mockGlasses.services.display.createPreviewView(previewContainer.context)
    previewContainer.addView(
        previewView,
        ViewGroup.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.MATCH_PARENT,
        ),
    )
}

Test your integration

The preview view is transparent, so you can render your own background behind it. Display content updates appear in the view, and taps are sent to your Display interaction handlers. If you remove the preview view from its container, create a new preview view before attaching it again.
Both simulation options are intended for development and visual testing. Do not include the preview view in production builds. Before releasing your integration, test it on physical glasses to verify device connectivity, performance, and how the content appears in the real world.