WebNN in 2026: running AI on your browser's NPU
For most of the browser-AI era, "on-device inference" meant WebGPU talking to your GPU, or WASM SIMD grinding on your CPU. Both work, but both ignore the most interesting piece of silicon in modern laptops and phones: the NPU. That is what WebNN fixes. After years of drafts, WebNN reached W3C Candidate Recommendation in January 2026, Chrome 146 Beta opened an origin trial in March, and Firefox shipped native WebNN support through ONNX Runtime Web.
Want to see what your device can actually do? Open the free WebNN NPU Benchmark — it probes navigator.ml, runs a real workload on every available backend, and shows you the numbers without uploading anything.
TL;DR
- WebNN is the W3C API that exposes the OS-level ML accelerators (Apple Neural Engine, Qualcomm Hexagon, Intel/AMD NPUs, DirectML on Windows) to JavaScript.
- It reached W3C Candidate Recommendation in January 2026. Chrome 146 Beta opened an origin trial in March 2026. Firefox supports it natively via ONNX Runtime Web.
- For INT8 workloads, an NPU is roughly 5-10x more power-efficient than the GPU and often 1.3-2x faster on the same model.
- It is not production-ready everywhere — Safari and Firefox expose the GPU backend but no NPU. Use it as a progressive enhancement with a WebGPU then WASM fallback.
What WebNN actually exposes
WebNN gives you a single JavaScript entry point — navigator.ml — that maps to whatever ML accelerator the operating system provides:
- Windows → DirectML (which then dispatches to NPU / GPU / CPU)
- macOS → Metal / Apple Neural Engine
- Android → NNAPI
- Linux → CPU fallback (GPU via OpenCL on some setups)
The API itself is a graph builder: you declare tensors, operators (conv, matmul, attention, softmax, …), and an execution context, then hand the compiled graph to the runtime. The runtime decides which silicon runs it.
Browser support in mid-2026
| Browser | Version | NPU | GPU | Notes |
| Chrome | 146+ | Yes (origin trial) | Yes | Production needs an origin-trial token |
| Edge | 146+ | Yes | Yes | Same Chromium origin-trial rules |
| Firefox | 128+ | No | Yes | Via ONNX Runtime Web |
| Safari | 17.5+ | No | Yes | GPU backend only |
| Safari iOS | 17.5+ | No | Yes | ANE not yet exposed |
Two practical takeaways: (1) if you want NPU access today, you need a Chromium browser and an origin-trial token; (2) every modern browser has at least the GPU backend, so feature-detecting navigator.ml is safe.
NPU vs GPU vs WASM: real numbers
On the same workload — a 1024×1024×1024 matmul on a MacBook Pro M4 — typical mid-2026 numbers look like this:
| WASM SIMD (4 threads) | ~450 ms | 1x |
| WebGPU (integrated GPU) | ~12 ms | ~37x |
For a more realistic model — MobileNetV3 image classification at 224×224 — the picture is similar across devices:
| Device | NPU (WebNN) | GPU (WebNN) | WASM SIMD |
| MacBook Pro M4 | 4 ms | 6 ms | 45 ms |
| Intel Core Ultra 7 | 5 ms | 8 ms | 65 ms |
| iPhone 15 Pro | 6 ms | 10 ms | 80 ms |
The NPU win is not just raw speed — it is speed per watt. On a Snapdragon X Elite, a Whisper-tiny transcription can run at about 30x realtime while the GPU stays asleep. For an 8-hour call-center session, that is the difference between a usable product and a battery panic.
Detecting WebNN safely
The biggest gotcha: 'ml' in navigator does not mean navigator.ml.createContext() will succeed. Early builds shipped the object before the runtime was wired up. Always probe the full context:
async function pickBackend() {
if (!('ml' in navigator)) return 'wasm';
try {
const ctx = await navigator.ml.createContext({ deviceType: 'npu' });
return ctx ? 'npu' : 'gpu';
} catch {
try {
const ctx = await navigator.ml.createContext({ deviceType: 'gpu' });
return ctx ? 'gpu' : 'wasm';
} catch {
return 'wasm';
}
}
}
If you use ONNX Runtime Web, the same ort.createSession() call accepts executionProvider: 'webnn' and ORT handles the fallback chain for you.
The fallback chain
For production in mid-2026, the safe order is:
WebNN (NPU) — fastest and most efficient, Chromium + origin trial only.
WebNN (GPU) — Firefox and Safari get this for free.
WebGPU — broad support, good for custom shaders and rendering-fused ML.
WASM SIMD — the everywhere fallback. Slow, but always works.When to actually use WebNN
- Real-time audio — Whisper, Silero VAD, streaming ASR. The NPU's power efficiency matters most on always-on sessions.
- Image classification on mobile — MobileNet, ResNet. NPU is faster and cooler than the GPU.
- Privacy-first features — PII redaction, on-device OCR, face detection where data must not leave the device.
- Edge LLM UIs — small SmolLM / TinyLlama variants for local chat. Anything below ~3B params fits in a tab on a modern laptop.
Skip WebNN and use WebGPU directly when you need custom operators, fine-grained memory control, or rendering-fused ML like neural super-resolution inside a 3D scene.
Try it on your machine
The fastest way to know whether your device has a usable NPU is to run a real workload on it. Open the WebNN NPU Benchmark:
- Detects
navigator.ml and probes NPU, GPU, and CPU backends.
- Runs the same model on each backend and reports ms per inference.
- Falls back to the WebGPU GPU Benchmark if WebNN is unavailable.
- Want to actually load a model? Try the Local AI Model Runner — Whisper, MobileNet, and a small LLM, all in the browser.
Everything runs locally. Nothing leaves your machine.