Feedback Edit

Sample Code for WebView2

  • Article
  • 6 minutes to read

This article is about understanding what samples, .sln files, and README.md files are in the WebView2Samples repo.

Sample code for Get Started guides

The WebView2 Get Started guides help you create the same completed, working projects as are in the WebView2Samples repo, which you can download or clone.

Platform Article Code
Win32 Get started with WebView2 in Win32 apps Starter code at WebView2Samples > Win32_GettingStarted
WinForms Get started with WebView2 in WinForms apps .NET starter code at WebView2Samples > WinForms_GettingStarted
WinUI 2 Get started with WebView2 in WinUI 2 (UWP) apps (public preview) Uses the WinUI 2 NuGet package. Has no sample code.
WinUI 3 Get started with WebView2 in WinUI 3 (Windows App SDK) apps Starter code at WebView2Samples > WinUI3_GettingStarted
WPF Get started with WebView2 in WPF apps .NET starter code at WebView2Samples > WPF_GettingStarted

Apps in the WebView2Samples.sln file

The WebView2Samples repo includes samples that demonstrate the WebView2 control and the WebView2 API, for Win32, WPF, WinForms, and WinUI. These samples are hybrid applications that use the Microsoft Edge WebView2 control.

  1. In a separate window or tab, see WebView2Samples repo (README page).

  2. Download or clone the WebView2Samples repo, as described in Download the WebView2 samples repo or Clone the WebView2 samples repo in Set up your Dev environment for WebView2.

  3. In your resulting, local copy of the repo directory structure, find *.sln files.

  4. Open one of the .sln files. For example, open your local copy of the multi-platform solution file WebView2Samples/SampleApps/WebView2Samples.sln (downloaded as path WebView2Samples-main/SampleApps/WebView2Samples.sln) in Microsoft Visual Studio. When you open that solution file in Visual Studio, Solution Explorer contains the following WebView2 samples, as projects:

    Solution Explorer for the WebView2Samples repo, showing the WebView2 samples as projects.

This particular .sln file doesn't include the Get Started projects, which are separate .sln files, one per platform.

The WebView2Samples repo contains the following projects. These projects are included in the WebView2Samples.sln file, and each platform also has a dedicated .sln file.

Type of sample Sample Project Description
UWP WinUI 2 browser webview2_sample_uwp Embeds a WebView2 control within a UWP application.

Built as a UWP Visual Studio 2019 project. Uses C++ and HTML/CSS/JavaScript in the WebView2 environment.
Win32 C++ WebView2APISample Embeds a WebView2 control within a Win32 native application. Illustrates a selection of WebView2 event handlers and API methods that allow a native Win32 application to directly interact with a WebView2 control and vice versa.

Built as a Win32 project in Visual Studio 2019. Uses C++ and HTML/CSS/JavaScript in the WebView2 environment.

The .sln file is in the parent, SampleApps directory.
Win32 C++ with Visual Composition WebView2SampleWinComp Embeds a WebView2 control within a Win32 native application. Uses Windows Runtime Composition APIs, also called the Visual layer, to take advantage of the latest Windows 10 or later UI features and create better look, feel, and functionality in C++ Win32 applications.

Built as a Win32 project in Visual Studio 2019. Uses C++ and HTML/CSS/JavaScript in the WebView2 environment.
WinForms WebView2WindowsFormsBrowser Embeds a WebView2 control within a Windows Forms application.

Built as a Windows Forms project in Visual Studio 2019. Uses C# and HTML/CSS/JavaScript in the WebView2 environment.
Windows Presentation Foundation (WPF) .NET WebView2WpfBrowser Embeds a WebView2 control within a WPF application.

Built as a WPF project in Visual Studio 2019. Uses C# and HTML/CSS/JavaScript in the WebView2 environment.
Chrome DevTools Protocol (CDP) in WPF WV2CDPExtensionWPFSample Uses Chrome DevTools Protocol functions using a DevToolsProtocolHelper object in WebView2. Demonstrates the usage patterns of the WebView2 CDP extension in WPF. This application is built with the WebView2 CDP Extension that defines all CDP methods, events, and types.

Built as a WPF project in Visual Studio 2019. Uses C# in the WebView2 environment.
WiX Burn Bundle to deploy Runtime WV2DeploymentWiXBurnBundleSample Creates a WiX installer for the WebView2APISample and uses WiX Burn Bundle to chain-install the Evergreen WebView2 Runtime.

Used when deploying the Evergreen WebView2 Runtime with your app.
WiX Custom Action to deploy Runtime WV2DeploymentWiXCustomActionSample Creates a WiX installer for the WebView2APISample and uses WiX Custom Action to chain-install the Evergreen WebView2 Runtime.

Used when deploying the Evergreen WebView2 Runtime with your app.

UWP/WinUI samples

A comprehensive API sample for UWP/WinUI is available from the WinUI Controls Gallery.

This WinUI Controls Gallery sample shows all of the XAML controls in an interactive format. This app is the interactive companion to the Fluent Design Guidelines and shows the usage of both UWP XAML APIs and Windows UI Toolkit APIs.

Deploy the Evergreen WebView2 Runtime

The WV2DeploymentVSInstallerSample uses the Microsoft Visual Studio Installer Projects extension for Visual Studio, to create an installer for WebView2APISample and chain-install the Evergreen WebView2 Runtime.

This sample is a separate installer. It's not part of the WebView2Samples repo.

Directory structure of the WebView2Samples repo

For general initial Dev environment setup, you can open any of the .sln files from the WebView2Samples repo:

The WebView2Samples repo has two main parts:

  • A set of Get Started solutions (.sln files and their various project files). There is a README.md file for each .sln file; most of them are very short. Most documentation is in the present set of articles.

  • A set of platform-specific samples (each with its own directory and .sln file), along with one multi-platform .sln file.

To download or clone this repo, see Set up your Dev environment for WebView2.

  • If you clone the repo, you can update your local copy using git commands or features of various Dev apps.

  • If you download the repo as a .zip file, you get a snapshot copy of the repo. You can then download another, updated copy of the repo later.

Local paths for .sln and README.md files

This section shows the path to every .sln and README.md file, resulting from downloading or cloning the repo to your local drive.

The WebView2Samples repo contains multiple README.md files and .sln files, listed below. When you download or clone the repo, you can then view any of these README.md files in Visual Studio. Or, view them online at the GitHub repo.

In the downloaded .zip file, the root directory is named WebView2Samples-main rather than WebView2Samples, representing the main branch of the repo.

In the links below, the local directory path to the .sln or README.md is shown. The link goes to the GitHub repo's directory level where you can see the .sln or README.md file in a directory listing. At GitHub, the README is automatically appended to the webpage of the directory that contains the README file.

Top-level README for the overall repo:

GettingStartedGuides directory: solution and readme files, for the per-platform tutorials:

There are four platform-specific solution files for the Get Started guides:

SampleApps directory: solution and readme files:

There is one multi-platform solution file:

  • WebView2Samples: WebView2Samples/SampleApps/WebView2Samples.sln - this solution file includes multiple platform projects.
    • WebView2Samples/SampleApps/WebView2APISample/README.md - A recommended long Readme file for the "WebView2 API Sample". This sample is an example of an application that embeds a WebView2 control within a Win32 native application. It is built as a Win32 Visual Studio 2019 project and makes use of both C++ and HTML/CSS/JavaScript in the WebView2 environment. It showcases a selection of WebView2's event handlers and API methods that allow a native Win32 application to directly interact with a WebView2 control, and vice versa.

There are five platform-specific solution files:

Readme files for WIX and Deployment Installer:

These don't use .sln files.

Downloaded repo has longer root directory name

If you download the repo (as a .zip file), the root directory name has -main appended. To match the name of the repo (WebView2Samples), you can rename the root directory.

The Win32-specific solution in the GettingStartedGuides directory has the path:

  • If you downloaded the repo:

    • WebView2Samples-main/GettingStartedGuides/Win32_GettingStarted/WebView2GettingStarted.sln

  • If you cloned the repo:

    • WebView2Samples/GettingStartedGuides/Win32_GettingStarted/WebView2GettingStarted.sln

The main, multi-project Win32 solution in the SampleApps directory has the path:

  • If you downloaded the repo:

    • WebView2Samples-main/SampleApps/WebView2Samples.sln

  • If you cloned the repo:

    • WebView2Samples/SampleApps/WebView2Samples.sln