JavaScript Navigator xr Property

What You’ll Learn

navigator.xr is the experimental entry point to the WebXR Device API. Learn feature detection, XRSystem, isSessionSupported(), immersive-vr checks, secure-context rules, five examples, and try-it labs.

Introduction

Virtual reality (VR) and augmented reality (AR) on the web start with one property: navigator.xr. When it exists, you get an XRSystem object that can ask whether a session mode is available and then start an XRSession.

You do not draw immersive scenes with navigator.xr alone. Think of it as the front door: detect it, check support, then request a session (usually from a button click) and render with WebGL / WebGPU or a framework such as Three.js, Babylon.js, or A-Frame.

Understanding the xr Property

The property itself is only the entry point. The useful pieces live on the returned XRSystem object.

• Feature detect — "xr" in navigator (MDN) or truthy navigator.xr.
• isSessionSupported(mode) — Promise<boolean> for modes like "immersive-vr", "immersive-ar", or "inline".
• requestSession(mode) — starts an XRSession (usually from a user gesture).
• devicechange — event when XR devices appear or disappear.
• Secure context — HTTPS / localhost required.
• Limited support — depends on browser + hardware; always fall back.

📝 Syntax

General form of the property:

navigator.xr

Value

• An XRSystem object used to interface with the WebXR Device API (when supported).

Common patterns

// MDN-style feature detect
if ("xr" in window.navigator) {
  // WebXR can be used!
} else {
  // WebXR isn't available
}

// Check immersive VR support (async)
async function checkImmersiveVr() {
  if (!navigator.xr) return false;
  return navigator.xr.isSessionSupported("immersive-vr");
}

// Enable a button only when immersive-vr is supported (MDN XRSystem pattern)
if (navigator.xr) {
  immersiveButton.addEventListener("click", onButtonClicked);
  navigator.xr.isSessionSupported("immersive-vr").then((isSupported) => {
    immersiveButton.disabled = !isSupported;
  });
}

Examples Gallery

Examples follow MDN navigator.xr / XRSystem patterns. Prefer Try It Yourself — many desktops report xr missing or isSessionSupported as false without a headset / compatible browser.

if ("xr" in window.navigator) {
  console.log("WebXR can be used!");
} else {
  console.log("WebXR isn't available");
}

WebXR isn't available
(or "WebXR can be used!" in supporting browsers)

const lines = [
  "xr: " + ("xr" in navigator ? "available" : "missing"),
  "isSecureContext: " + window.isSecureContext,
  "typeof navigator.xr: " + typeof navigator.xr
];
console.log(lines.join("\n"));

xr: missing
isSecureContext: true
typeof navigator.xr: undefined
(values vary by browser / page origin)

async function checkImmersiveVr() {
  if (!("xr" in navigator) || !navigator.xr) {
    return "WebXR not available";
  }
  try {
    const ok = await navigator.xr.isSessionSupported("immersive-vr");
    return "immersive-vr supported: " + ok;
  } catch (err) {
    return "isSessionSupported error: " + err.name;
  }
}

checkImmersiveVr().then(console.log);

WebXR not available
(or "immersive-vr supported: true/false")

const immersiveButton = { disabled: true };

function onButtonClicked() {
  // Call navigator.xr.requestSession("immersive-vr") from a real click
  console.log("User clicked Enter VR (requestSession goes here)");
}

if (navigator.xr) {
  // In a real page: immersiveButton.addEventListener("click", onButtonClicked);
  navigator.xr.isSessionSupported("immersive-vr").then((isSupported) => {
    immersiveButton.disabled = !isSupported;
    console.log("Enter VR disabled: " + immersiveButton.disabled);
  });
} else {
  console.log("No navigator.xr — keep Enter VR disabled");
}

No navigator.xr — keep Enter VR disabled
(or "Enter VR disabled: false" when immersive-vr is supported)

function pickImmersiveApi() {
  if ("xr" in navigator && navigator.xr) {
    return "Use WebXR via navigator.xr";
  }
  if ("activeVRDisplays" in navigator) {
    return "Legacy WebVR detected — do not use for new apps";
  }
  return "No WebXR / WebVR entry point — show 2D fallback";
}

console.log(pickImmersiveApi());

No WebXR / WebVR entry point — show 2D fallback
(or "Use WebXR via navigator.xr" when supported)

🚀 Common Use Cases

• Immersive VR experiences — museums, product demos, training sims.
• Augmented reality — when immersive-ar is supported on the device.
• Enter VR buttons — enable only after isSessionSupported.
• Framework apps — Three.js / Babylon.js / A-Frame still start from WebXR.
• Progressive enhancement — keep a normal 2D page when XR is missing.

📝 Notes

• Experimental & Limited availability — not Baseline; feature-detect always.
• Not Deprecated or Non-standard — Experimental banner only.
• Secure context required (HTTPS / localhost).
• Returns XRSystem; main next steps are isSessionSupported() and requestSession().
• Related: activeVRDisplays, canShare(), wakeLock, Window.

💡 Best Practices