JavaScript ML Frameworks vs Vanilla JavaScript
WebNN can be used either through supported JavaScript machine learning frameworks or directly via vanilla JavaScript. Choose the approach that best suits your needs.
JavaScript ML Frameworks
WebNN API is integrating into major JavaScript machine learning frameworks like ONNX Runtime Web, Transformers.js, and LiteRT.js. This enables web developers to build AI applications using these high-level frameworks with less code while leveraging WebNN’s efficient, low-level neural network operations.
| Framework | Model format | Best for | Select WebNN with |
|---|---|---|---|
| Transformers.js | ONNX models from the Hugging Face Hub | Task pipelines with pre- and post-processing included, in a few lines | device: 'webnn-gpu' |
| ONNX Runtime Web | .onnx | Full control over sessions, shapes and tensors | executionProviders: ['webnn'] |
| LiteRT.js | .tflite | Models from LiteRT or converted from PyTorch, and an NPU path | accelerator: 'webnn' |
Whichever framework you choose, WebNN needs fixed tensor shapes, so plan to set free dimension overrides or export models with static shapes, and keep a wasm fallback for browsers without WebNN. If something goes wrong, see Troubleshooting.
Vanilla JavaScript
Use the WebNN API directly to create custom computational graphs and neural network models with greater flexibility in your AI applications. However, building models with the raw WebNN API requires more complex code compared to using mature solutions like ONNX and TFLite.
Using the WebNN JavaScript API directly instead of a ML framework reduces application size by eliminating framework distributions overhead.