JavaScript Navigator xr Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word XR

Definition

navigator.xr is a read-only property that returns an XRSystem object — the entry point to the WebXR Device API for VR and AR sessions in this browsing context (MDN).

Read the notes below before you rely on this property. Prefer feature detection when support is limited.

Syntax

Use navigator.xr. Start with this line.

JavaScript
navigator.xr
CallWhat it does
navigator.xrPrimary signature.

Built into the browser. Read navigator.xr on Navigator — no import required.

Library declarations
JavaScript
navigator.xr

Parameters

ParameterDescription
Session modeRequired. immersive-vr, immersive-ar, or inline

Return Value

Return ValueDescription
*XRSystem (EventTarget)

JavaScript Examples

Example 1 — Feature Detection

Check whether WebXR is exposed before calling any methods.

JavaScript
if ("xr" in navigator) {
  console.log("WebXR available");
} else {
  console.log("WebXR not supported");
}

console.log("secure:", window.isSecureContext);
Try It Yourself

How It Works

  1. Ask the browser. The in operator checks for the property.
  2. Gate your code. Only call isSessionSupported / requestSession when present.
  3. Check HTTPS. MDN requires a secure context in supporting browsers.
  4. Expect gaps. Limited availability means Firefox and Safari omit the API.

Example 2 — Check immersive-vr

Ask whether this device can run an immersive VR session before showing Enter VR.

JavaScript
async function checkVr() {
  if (!navigator.xr) {
    console.log("WebXR not supported");
    return;
  }
  try {
    const ok = await navigator.xr.isSessionSupported("immersive-vr");
    console.log("immersive-vr supported:", ok);
  } catch (err) {
    console.log("check failed:", err.name);
  }
}

checkVr();
Try It Yourself

How It Works

  1. Detect first. Exit early when navigator.xr is missing.
  2. Pass a mode. "immersive-vr", "immersive-ar", or "inline" (MDN).
  3. Await the Promise. Resolves to true or false.
  4. Catch rejections. Permission policy / security issues reject instead of returning false.

Example 3 — Request a Session (User Gesture)

Start immersive VR from a button click. Catch errors when no device is present.

JavaScript
async function enterVr() {
  if (!navigator.xr) {
    console.log("WebXR not supported");
    return;
  }
  try {
    const session = await navigator.xr.requestSession("immersive-vr");
    console.log("session started:", session.mode);
    // set up rendering, then later: await session.end();
  } catch (err) {
    console.log("request failed:", err.name);
  }
}

// Call enterVr() from a button click handler
Try It Yourself

How It Works

  1. User gesture. Call from a click/tap — not from page load.
  2. Request a mode. requestSession resolves to an XRSession.
  3. Handle failure. No headset, denied permission, or blocked policy rejects the Promise.
  4. End cleanly. Call session.end() when leaving immersive mode.
Compatibility

Browser Support

Navigator.xr is part of the WebXR Device API. MDN marks it Experimental and Limited availability (not Baseline). Requires a secure context.

✓ Experimental · Limited availability

Navigator.xr

Best support in Chromium-based browsers from version 79 (Chrome, Edge, Opera; also Chrome Android). Missing in Firefox and Safari. Always feature-detect.

Limited Not Baseline
Google Chrome 79+ (secure context)
Yes
Microsoft Edge 79+ (secure context)
Yes
Opera 66+ (Chromium)
Yes
Mozilla Firefox Not supported
No
Apple Safari Not supported
No
Internet Explorer Not supported
No
xr Chromium 79+

Bottom line: Ship behind a feature detect. See the MDN xr reference. Prefer WebXR over deprecated WebVR.

Frequently Asked Questions

A read-only XRSystem object — the entry point to the WebXR Device API for VR and AR sessions in the current browsing context.
MDN marks it Experimental and Limited availability (not Baseline). It is not Deprecated or Non-standard. Always feature-detect and provide a non-XR fallback.
Yes. MDN lists navigator.xr as a secure-context feature (HTTPS or localhost) in supporting browsers.
After detecting navigator.xr, call await navigator.xr.isSessionSupported("immersive-vr"). The promise resolves to true or false (or may reject on permission/policy errors).
The WebXR Device API. Start with navigator.xr, then isSessionSupported() and requestSession() instead of the old WebVR VRDisplay APIs.
Usually no — starting an immersive session typically requires a user gesture (for example a button click). Check support first, then request the session from a click handler.

Next: canShare()

Learn how navigator.canShare() checks Web Share data before sharing.

canShare() tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

10 people found this page helpful

JavaScript Navigator windowControlsOverlay Property JavaScript Navigator canShare() Method