// guide · build / web-apps

Web Apps for Meta Ray-Ban Display

Web Apps are the fastest path from idea to something running on the glasses. Standard HTML, CSS and JavaScript — hosted on any HTTPS server — rendered directly on the in-lens monocular display.

8 min read last updated · 18 May 2026 community-maintained

Overview

Meta opened developer access to the Ray-Ban Display glasses on May 15, 2026. Web Apps are standard web applications that render on the glasses' monocular in-lens display. If you can build a web page, you can build a glasses app.

The display is additive — black pixels are transparent, so your content literally floats in the wearer's real environment. Design for dark backgrounds and high-contrast content. The display is in the right lens only.

What a Web App can access

The in-lens display surface, rendered through a hardware-accelerated WebView.
Input from the Neural Band (EMG wristband): pinch, double-pinch, swipe, rotate.
DeviceOrientation API for head tracking — detect nods, shakes, tilts without Neural Band.
Standard web APIs: localStorage, fetch, Web Audio, Canvas, etc.
Camera access for AI/vision apps (via companion phone relay in some configurations).

Key insight No SDK required. Unlike traditional AR platforms, Meta Ray-Ban Display web apps are just standard HTML/CSS/JS. No proprietary SDK, no app store review. Deploy to any HTTPS host and add the URL in the Meta View app.

Getting Started

The workflow is simple: build a web app, deploy it to HTTPS, add it as a Web App in the Meta View companion app on your phone.

01 · SETUP

Create your web app →

Use any framework: React, Vue, Svelte, or plain vanilla HTML/CSS/JS. No special tooling required.

02 · BUILD

Design for the display →

Use dark backgrounds (black = transparent), high contrast text, and glanceable layouts optimized for the monocular display.

03 · DEPLOY

Deploy & add to glasses →

Host on Vercel, Netlify, GitHub Pages, or any HTTPS server. Add the URL as a Web App in Meta View.

04 · INPUT

Handle gestures & head tracking →

Use the Neural Band for pinch/swipe, or the DeviceOrientation API for head gesture detection without any wristband.

Hello, world

The simplest glasses app is just an HTML file with a dark background. Deploy it to any HTTPS host and add the URL in Meta View.

index.html copy

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {
      background: #000;  /* black = transparent on additive display */
      color: #fff;
      font-family: system-ui, sans-serif;
      display: grid;
      place-items: center;
      min-height: 100vh;
      margin: 0;
    }
    h1 { font-size: 2rem; }
  </style>
</head>
<body>
  <h1>Hello from your glasses!</h1>
</body>
</html>

Head Gesture Detection

Luke Hurd's open-source head tracking library enables gesture detection without requiring the Neural Band. It uses the DeviceOrientation API to detect head movements.

head-gestures.js copy

// Import the head tracking library
import { HeadTracker } from './head-tracker.js';

const tracker = new HeadTracker();

tracker.on('nod-yes', () => {
  console.log('User nodded yes');
});

tracker.on('shake-no', () => {
  console.log('User shook head no');
});

tracker.on('look-up', () => {
  console.log('User looked up');
});

tracker.start();

Design for the medium

A Web App on a desktop monitor and a Web App in someone's vision are fundamentally different. Key principles:

Dark background. The display is additive — black pixels are transparent. Always use dark/black backgrounds so your content floats naturally in the wearer's view.
Glanceable. The wearer should read your content in under one second. If they have to focus to parse it, you've lost.
High contrast. Use white or bright text on black. The display goes up to 5000 nits but works best with simple, high-contrast elements.
Quiet. Show the minimum. Use motion sparingly. Never animate to demand attention — the user is living their life.
Forgiving. Pinches misfire. Voice is noisy. Build every action so an accidental input can be undone in one gesture.

Resources

Essential links for Meta Ray-Ban Display developers: