Electron on Windows Gallery

Samples and guides for building great Electron applications on Windows

Electron on Windows Gallery is an Electron application which displays the range of native Windows functionality which can be accessed from Electron applications. It includes:

• Interactive samples powered by local AI models and the Windows SDK
• JavaScript sample code and API documentation
• Guides on getting started with Electron on Windows, building native addons, and more

Prerequisites

Before you get started, ensure you have the following installed:

• Node.js - Required for npm package management
• Git - Required to clone the repository
• Visual Studio Build Tools - Required for building native modules
• Python - Required as a build dependency

You should also verify that your machine meets:

• Electron's system prerequisites
• Windows AI APIs system requirements

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit Contributor License Agreements.

When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.

Getting started

1. Set up the environment

1. If you're new to building Electron apps, make sure your machine meets Electron's system prerequisites.
2. If you're new to running Windows AI API's, make sure your machine meet the system requirements for Windows AI API's.

2. Clone the repository

git clone https://github.com/microsoft/electron-on-windows-gallery.git

3. Configure local development

Before building the app locally, you'll need to create a .env file for Windows AI Limited Access Features:

# Create a .env file in the root of the repository with your LAF token
LAF_TOKEN=your_laf_token_here

4. Build and Run

cd <path to electron-on-windows-gallery repo>
npm install
npx winapp restore
npx winapp cert generate
npm run build-all
npm run setup-debug
npm run start

• npx winapp restore downloads the WinAppSDK NuGet packages and regenerates the JS bindings in .winapp/bindings/.
• npx winapp cert generate creates a self-signed certificate for local development.
• npm run build-all compiles the native addon for both x64 and arm64.
• npm run setup-debug registers the WinAppSDK framework package dependency.

You should see a .winapp directory at the root of your repo.

Windows AI API Bindings

This project uses @microsoft/dynwinrt to dynamically call Windows Runtime AI APIs from JavaScript. The bindings are generated by @microsoft/winappcli into .winapp/bindings/ and exposed through #winapp/bindings for both ESM imports and CommonJS requires.

ES modules:

import { LanguageModel } from '#winapp/bindings';

CommonJS:

const { StorageFile } = require('#winapp/bindings/StorageFile');

SDK Versions

Package	Version	Notes
Microsoft.WindowsAppSDK	2.2.0	Main SDK (configured in winapp.yaml)
@microsoft/winappcli	0.5.0	CLI that drives package/binding generation
@microsoft/dynwinrt	0.1.0-preview.17	Runtime WinRT invocation layer (npm)
@microsoft/dynwinrt-codegen	0.1.0-preview.17	Build-time code generator (npm)

AI Features

Feature	Class	Description
Text Generation	LanguageModel	On-device text generation via Phi Silica
Text Summarization	TextSummarizer	Summarize text and conversations
Text Rewriting	TextRewriter	Rewrite text in different tones
Text to Table	TextToTableConverter	Convert unstructured text to table format
Image Description	ImageDescriptionGenerator	Generate captions for images
OCR	TextRecognizer	Optical character recognition
Image Scaling	ImageScaler	AI super-resolution image upscaling
Object Extraction	ImageObjectExtractor	Segment and extract objects from images
Object Removal	ImageObjectRemover	Erase objects and fill background

Regenerating Bindings

The bindings live in .winapp/bindings/. To regenerate after editing winapp.jsBindings in package.json or bumping a package in winapp.yaml:

npx winapp restore

This refreshes the SDK packages, updates .winapp/winmds.lock.json, runs dynwinrt-codegen, and writes the bindings into .winapp/bindings/.

To add additional Windows SDK classes (Win32 / Windows.* namespaces), edit winapp.jsBindings.additionalWinmds in package.json and re-run npx winapp restore.

Trademarks

This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft's Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party's policies.