Edit

Getting Started: Adding Windows APIs to Your Electron App

This guide walks you through adding Windows-native capabilities to an Electron application using the Windows App Development CLI. You'll learn how to call modern Windows APIs from your Electron app, test with app identity, and package for distribution.

What You'll Build

By the end of this guide, you'll have an Electron app that:

  • ✅ Calls modern Windows APIs (Windows SDK and Windows App SDK)
  • ✅ Uses Windows AI capabilities from JavaScript (Phi Silica or WinML)
  • ✅ Optionally uses a native addon when an API needs native code
  • ✅ Runs with app identity for testing protected APIs
  • ✅ Packages as a signed MSIX for distribution

Prerequisites

Before starting, ensure you have:

  • Windows 11 (Copilot+ PC if using Phi Silica)
  • Node.js - winget install OpenJS.NodeJS --source winget
  • .NET SDK v10 - winget install Microsoft.DotNet.SDK.10 --source winget
  • Visual Studio with the Native Desktop Workload - winget install --id Microsoft.VisualStudio.Community --source winget --override "--add Microsoft.VisualStudio.Workload.NativeDesktop --includeRecommended --passive --wait"

The Process

Follow these guides to set up your Electron app, call modern Windows APIs, and package it for distribution:

1. Setting Up the Development Environment

First, you'll set up your development environment with the necessary tools and SDKs. This includes:

  • Creating or configuring an Electron app
  • Installing winapp CLI
  • Initializing Windows SDKs and required assets
  • Setting up your build pipeline

Get Started with Setup →

2. Call Windows APIs from JavaScript

If you enabled JS bindings during setup, .winapp/bindings/ contains generated .js wrapper classes and matching .d.ts declarations for Windows App SDK APIs. Import #winapp/bindings to access all exported classes. The #winapp/bindings package import requires @microsoft/dynwinrt-codegen ≥ 0.1.0-preview.8; older projects can keep a path relative to the importing file (for example, require('../.winapp/bindings/index.js') from src/index.js) or upgrade with npm i -D @microsoft/dynwinrt-codegen@latest && npx winapp init --add-js-bindings.

3. Optional: Create a Native Addon

Skip this step if generated JS bindings cover the Windows App SDK API you need. Create a native addon only when you need a native boundary, such as Win32, pure COM, native C/C++ libraries, or managed .NET assemblies.

Option A: Creating a C++ Notification Addon

Learn how to create a C++ addon that calls the Windows App SDK notification APIs. This is a great starting point for understanding native addons before diving into more complex scenarios.

Create a C++ Notification Addon →

Option B: Creating a Phi Silica Addon

Learn how to create a C# addon that uses the Phi Silica AI model to summarize text on-device. Phi Silica is a small language model that runs locally on Windows 11 devices with NPUs.

Create a Phi Silica Addon →

Option C: Creating a WinML Addon

Learn how to create a C# addon that uses Windows Machine Learning (WinML) to run custom ONNX models for image classification, object detection, and more.

Create a WinML Addon →

4. Packaging for Distribution

Finally, you'll package your app as an MSIX for distribution. This includes:

  • Building your app for production
  • Creating and signing an MSIX package
  • Testing the installed package
  • Understanding distribution options

Package Your App →

Quick Navigation

Phase Guide What You'll Learn
1️⃣ Setup Install tools, initialize SDKs, configure build pipeline
2️⃣ Notification JS bindings Show a Windows App SDK notification directly from JavaScript
2️⃣ Windows APIs JS bindings Call a Windows App SDK API, then extend bindings to Windows SDK APIs
2️⃣ Phi Silica JS bindings Call the local language model directly from JavaScript
2️⃣ WinML JS bindings Register WinML execution providers and run ONNX Runtime from JavaScript
3️⃣ C++ Notification Addon Create C++ addon, call notification APIs, test with debug identity
3️⃣ Phi Silica Addon Create a C# addon alternative for AI APIs
3️⃣ WinML Addon Create a C# addon alternative for WinML
4️⃣ Packaging Build production app, create MSIX, distribute

Additional Resources

Get Help

  • Last updated on