DisplayGlasses.dev Display Glasses Simulator Guide Back to Simulator

Resources

Display glasses developer tools

Everything outside this site that is worth having open while you build: Meta's official documentation and tooling, and the communities tracking the platform as it changes.

Official Meta resources

Meta maintains the authoritative documentation for Web Apps on Ray-Ban Display, including current capabilities, permissions, and publishing requirements. Start here rather than with third-party summaries.

Meta's Chrome extension

Meta publishes the Meta Ray-Ban Display Web App Simulator as a Chrome extension. Install it, open your application, and toggle it from the toolbar. It recreates the 600 by 600 display surface in the browser with additive blending, environment backgrounds, and on-screen D-pad buttons that dispatch the same arrow-key and Enter events the glasses send.

QA and performance checks

The extension runs a checklist against the loaded page and reports pass or fail on the requirements that most often block a Web App: viewport meta tag, favicon, D-pad-focusable elements, horizontal overflow, and visible focus styles. Those are the failures that are invisible on a desktop monitor and fatal on the glasses.

It also scores performance, which carries more weight here than on a phone. The glasses run a constrained runtime on a small battery, so heavy scripts, oversized assets, and expensive animation degrade the experience faster than the same page would on desktop. Run both sets of checks before every handoff.

Turning failures into fixes

Meta pairs the documentation with an AI-assisted workflow. Each documentation page carries a copyable prompt, and a Wearables MCP endpoint exposes a search_webapps_docs tool so a coding assistant can pull current platform guidance rather than relying on stale training data. Combined with the official plugin, a failed check becomes a scoped prompt that fixes the specific issue and re-runs local checks.

Note: the two simulators serve different purposes. Meta's extension validates platform conformance, D-pad input, QA, and performance. This one focuses on how a design reads against real-world scenes, and on sharing that view with people who do not have the extension installed. Use both.

Community

Two Reddit communities are worth following: the one Meta operates for its glasses, and the independent developer community, which tends to surface practical constraints and workarounds sooner.

  • r/RayBanMetaMeta-operated community for Ray-Ban Meta glasses
  • r/RayBanDisplayIndependent, community-run discussion of the display glasses

Creating custom background scenes

The Simulator ships with a set of background scenes and accepts your own uploads. Testing against the environment your application will actually be used in is more informative than any stock scene, and generative video makes that footage cheap to produce. Flow is well suited to it: describe the setting and the viewpoint, generate a short first-person clip, and upload it as a background scene.

This matters for context-specific work. A retail floor, a workshop bench, a clinical room, or a warehouse aisle each present lighting and motion conditions that a generic street or kitchen scene will not reproduce.

Any of the current text-to-video tools will do the job. Prompt for a first-person point of view, a static or slowly moving camera, and a clip long enough to loop cleanly.

  • FlowGoogle, built on Veo. Strong camera control and realistic lighting
  • Meta AI VibesMeta's own generation and remixing tools, free in the Meta AI app and on meta.ai
  • SoraOpenAI. Available through ChatGPT on paid plans
  • SeedanceByteDance. Fast generation with steady multi-shot camera work