How to build a Meta Ray-Ban Display app
The complete guide to building, previewing, and shipping an app for Meta Ray-Ban Display glasses: the two SDK paths, the Web Apps constraints, and the deploy-to-glasses flow.
This is the practical, end-to-end guide to building an app for the Meta Ray-Ban Display, Meta's first AR glasses with an in-lens display. It covers what the platform actually is, the two ways to build for it, the real constraints of the Web Apps path, and how to get your app running on a pair of glasses.
It's written to be useful whether or not you ever use GlassKit. If you just want the fastest production path, jump to Where GlassKit fits.
What the Meta Ray-Ban Display is
The Meta Ray-Ban Display is a pair of smart glasses with a small, monocular, full-color display built into the right lens, paired with the Meta Neural Band, an EMG wristband that reads finger gestures from the muscle signals at your wrist. It is the first mainstream consumer device that puts a genuine heads-up display in an everyday form factor.
For developers, the important part is this: as of the 2026 Developer Preview, Meta lets third parties build for the display. There are two distinct paths.
The two build paths
Meta ships two separate SDKs, and they are not interchangeable.
1 · Device Access Toolkit
Native mobile SDK: Swift (iOS) / Kotlin (Android). Extends an existing mobile app onto the glasses. The only path with camera + audio capture. Deepest hardware integration.
2 · Web Apps
Standalone path: HTML / CSS / JS hosted at a public HTTPS URL. No native code, no app store. The path most indie developers will take, and what the rest of this guide covers.
Which should you pick?
If you need the camera, you need the native Device Access Toolkit. For everything else (utilities, navigation, fitness, reference, AI experiences), Web Apps are faster to build, deploy via URL, and work with the stack you already know.
What a Web App can and can't do
The Web Apps path has a specific, well-defined surface. Design for it from the start.
The display
- 600 × 600 pixels. Your entire app is a single 600×600 square.
- Additive display. The display is additive: black renders as transparent. You design on a dark base with bright, high-contrast elements that "float" in the wearer's view.
- Single screen. There's no scrolling browser chrome. Think one focused view, not a multi-page website.
Input
- D-pad navigation only. The Neural Band translates finger gestures (swipe left / right / up / down, pinch to select, middle-finger pinch to cancel) into what is effectively arrow-key input.
- There are no custom gestures. You get a directional pad and two pinch actions. Mark interactive elements as focusable and manage focus accordingly.
Sensors and data a Web App can access
- Motion and orientation: accelerometer / gyroscope data
- GPS: location from the paired phone
- Neural Band gestures: the discrete D-pad + pinch events above
- Local storage: standard browser storage
What a Web App cannot do
No camera, no audio capture
Camera access is exclusive to the native Device Access Toolkit. No web app on the platform can see through the glasses. Microphone / audio capture is also unavailable on the web path.
Building your first Web App
Because a Web App is just HTML, CSS, and JavaScript served over HTTPS, you can build it however you like: vanilla files, or a framework like Vite + React if you want a component model and TypeScript.
A minimal app is three files: index.html, styles.css, app.js.
Meta's own AI toolkit (a plugin for Claude Code, Cursor, Codex, and
Copilot) will scaffold exactly that. Whatever you use, respect the
constraints:
- A 600×600 viewport as your root container
- A dark / transparent base with bright foreground elements
- A
.focusableconvention so D-pad input has something to move between - High-contrast type. The display is small and see-through
Previewing your app
You do not need the glasses to start. A Web App runs in a normal desktop browser.
Open your app in the browser and size the viewport to 600×600.
Use the arrow keys to simulate D-pad navigation.
Use Chrome DevTools → More tools → Sensors to override location and orientation, so you can test GPS- and motion-driven features without moving.
This means the entire build-and-iterate loop happens on your laptop. The glasses are only needed for final on-device polish.
Deploying to the glasses
A Web App goes onto the glasses by URL.
Host it at a publicly accessible HTTPS URL. Vercel, Netlify, Cloudflare Pages, GitHub Pages: any static-capable HTTPS host works.
Enable Developer Mode in the Meta AI app (tap the app version a few times in Settings).
Add the app: in the Meta AI app, go to your Display Glasses settings → App connections → Web apps → Add a web app, and enter the URL. A QR code deep-link also works.
Your app now runs on the glasses.
Today's publishing limits
Two limits as of 2026
- No public publishing yet. You can't list an app for the general public. Meta has said publishing is coming.
- Up to ~100 testers. You can share your Web App via a private URL with up to roughly 100 testers right now.
Practical takeaway: build and test now, ship the day publishing opens. Teams that are fully built when the gate lifts win the early catalog.
Where GlassKit fits
Everything above gets you a working Web App. What it doesn't get you is a product: accounts, payments, a marketing site, transactional email, a backend, a design system, deployment wiring.