JavaScript Navigator gpu Property

What You’ll Learn

navigator.gpu is the entry point for the WebGPU API. Learn the GPU object, secure context rules, requestAdapter / requestDevice, five beginner examples, and try-it labs.

Introduction

WebGPU lets web apps use the graphics card for fast 3D rendering and GPU compute (machine learning, simulations, image processing). Before you draw anything, you need the API’s front door.

navigator.gpu is that door. When WebGPU is available, it returns a GPU object for the current browsing context. From there you request an adapter (the physical/logical GPU) and a device (your working handle for creating buffers, pipelines, and commands).

Understanding the gpu Property

Think of navigator.gpu as the WebGPU “reception desk.” It does not draw triangles by itself — it hands you the objects that can.

• GPU object — entry point returned by navigator.gpu.
• Adapter — from gpu.requestAdapter(); may be null.
• Device — from adapter.requestDevice(); where real work starts.
• Secure context — HTTPS / localhost required in supporting browsers.
• Missing property — browser or platform does not expose WebGPU — feature-detect.

📝 Syntax

General form of the property:

navigator.gpu

Value

• A GPU object when WebGPU is supported in this context.
• undefined (property missing) when WebGPU is not available.

Common patterns

// MDN-style init (simplified):
async function init() {
  if (!navigator.gpu) {
    throw Error("WebGPU not supported.");
  }

  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    throw Error("Couldn't request WebGPU adapter.");
  }

  const device = await adapter.requestDevice();
  // Use device for buffers, pipelines, command encoding…
}

// Safe feature-detect without throwing:
if ("gpu" in navigator && navigator.gpu) {
  // WebGPU entry point is available
}

Examples Gallery

Examples follow MDN navigator.gpu / WebGPU init patterns. Prefer Try It Yourself on HTTPS. Adapter/device steps need a supporting browser and GPU.

const supported = Boolean(navigator.gpu);
console.log(supported ? "WebGPU available" : "WebGPU missing");

WebGPU missing
(or "WebGPU available" in a supporting browser)

console.log("secure: " + window.isSecureContext);
console.log("gpu: " + Boolean(navigator.gpu));

if (!window.isSecureContext) {
  console.log("Serve over HTTPS to use WebGPU");
} else if (!navigator.gpu) {
  console.log("Secure, but WebGPU not exposed");
} else {
  console.log("Ready to request an adapter");
}

secure: true
gpu: false
Secure, but WebGPU not exposed
(messages vary by browser and URL)

async function getAdapter() {
  if (!navigator.gpu) {
    return "WebGPU not supported.";
  }
  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    return "Couldn't request WebGPU adapter.";
  }
  return "Adapter ready: " + (adapter.info?.description || "ok");
}

getAdapter().then(console.log);

WebGPU not supported.
(or "Adapter ready: …" / adapter error message)

async function init() {
  if (!navigator.gpu) {
    throw Error("WebGPU not supported.");
  }

  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    throw Error("Couldn't request WebGPU adapter.");
  }

  const device = await adapter.requestDevice();
  return "Device ready: " + device.label;
}

init()
  .then(console.log)
  .catch(function (err) {
    console.log(String(err.message || err));
  });

WebGPU not supported.
(or "Device ready: …" when WebGPU works)

function webgpuStatus() {
  const available = Boolean(navigator.gpu);
  return {
    available: available,
    secureContext: window.isSecureContext,
    preferredCanvasFormat: available
      ? navigator.gpu.getPreferredCanvasFormat()
      : null,
    advice: available
      ? "Call requestAdapter() then requestDevice()"
      : "Fall back to WebGL or Canvas 2D"
  };
}

console.log(JSON.stringify(webgpuStatus()));

{"available":false,"secureContext":true,"preferredCanvasFormat":null,"advice":"Fall back to WebGL or Canvas 2D"}

🚀 Common Use Cases

• 3D games & scenes — modern rendering pipelines via WebGPU.
• GPU compute — ML inference, physics, image filters in the browser.
• Feature gating — enable a “high performance” path only when navigator.gpu exists.
• Canvas presentation — use preferred format + device for crisp GPU-backed canvases.
• Progressive enhancement — WebGPU when available; WebGL / 2D otherwise.

📝 Notes

• Limited availability / not Baseline — support varies by browser and OS.
• Not Deprecated, Experimental, or Non-standard on MDN — no status banner on this page.
• Secure context required (HTTPS / localhost).
• requestAdapter() can return null — always check before requestDevice().
• Related: hardwareConcurrency, deviceMemory, JavaScript hub.

💡 Best Practices