Win32 sample app with Visual Composition

This WebView2 sample demonstrates creating 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 also uses Windows Runtime Composition APIs (also called the Visual layer) to take advantage of the Windows UI features and create a better look, feel, and functionality in C++ Win32 applications.

• Sample name: WebView2SampleWinComp
• Repo directory: WebView2SampleWinComp
• Solution file: WebView2SampleWinComp.sln

To use this sample (general-purpose steps):

The steps on the present page are general-purpose. See the sample-specific steps in the README sections, which may override the present page.

Step 1 - View the Readme

1. In a separate window or tab, read the rendered README.md file for this project at GitHub: README file for WebView2SampleWinComp. Then return to this page and continue the steps below.

   • README > Prerequisites

   • README > Build the WebView2 Sample WinComp

   You can also view the README.md source file (non-rendered) in Visual Studio. In File Manager or Visual Studio > Solution Explorer, open the file:

   <your-repos-directory>/WebView2Samples/SampleApps/WebView2SampleWinComp/README.md

   or:

   <your-repos-directory>/WebView2Samples-main/SampleApps/WebView2SampleWinComp/README.md

Step 2 - Install Visual Studio

Microsoft Visual Studio is required. Microsoft Visual Studio Code is not supported for this sample.

1. If Visual Studio (minimum required version) is not already installed, in a separate window or tab, see Install Visual Studio in Set up your Dev environment for WebView2. Follow the steps in that section, and then return to this page and continue the steps below.

Step 3 - Install a preview channel of Microsoft Edge

1. If a preview channel of Microsoft Edge (Beta, Dev, or Canary) is not already installed, in a separate window or tab, see Install a preview channel of Microsoft Edge in Set up your Dev environment for WebView2. Follow the steps in that section, and then return to this page and continue the steps below.

Step 4 - Download or clone the WebView2Samples repo

1. If not done already, download or clone the WebView2Sample repo to your local drive. In a separate window or tab, see Download the WebView2Samples repo in Set up your Dev environment for WebView2. Follow the steps in that section, and then return to this page and continue below.

Step 5 - Open the Solution and set the Windows SDK target

1. On your local drive, open the .sln file in Visual Studio, in the directory:

   • <your-repos-directory>/WebView2Samples/SampleApps/WebView2SampleWinComp/WebView2SampleWinComp.sln

   or:

   • <your-repos-directory>/WebView2Samples-main/SampleApps/WebView2SampleWinComp/WebView2SampleWinComp.sln

   A Review Solution Actions dialog box might open, prompting you for which installed Windows SDK to retarget the project to:

   

2. In the Windows SDK Version dropdown list, select 10.0.20348.0 or later, or 10.0.18362.0 or earlier; do not select 10.0.19041.0. Then click the OK button. If those versions aren't available, do the steps in the "Install the Windows SDK" section below. Otherwise, skip to the section below that.

If the solution is already open, you can change the target as follows:

• In Solution Explorer, right-click the WebView2SampleWinComp project (not solution), and then click Retarget Projects.

Step 6 - Install the Windows SDK

By default, this sample app uses the latest Window 10 SDK version you have installed. There's an issue with Windows 10 SDK, version 2004 (10.0.19041.0) that will stop this sample app from building. If you run into this issue, either install (and retarget this project to use) a later version, such as Windows 10 SDK version 2104 (10.0.20348.0), or an earlier version, such as 10.0.18362.1.

To install a Windows 10 SDK:

1. Go to Windows SDK and emulator archive.

2. On one of the following rows, click the Install SDK link:

   • Windows 10 SDK version 2104 (10.0.20348.0) (or later)
   • Windows 10 SDK, version 1903 (10.0.18362.1)

   A version-specific copy of winsdksetup.exe is downloaded to your Downloads directory.

3. In your Downloads directory, open the copy of winsdksetup.exe that you just downloaded.

4. The Windows SDK setup window opens:

   

5. Click the Next button and then follow the prompts. You can accept the defaults. At the end of installing, the Windows SDK Welcome screen for whichever version that you selected appears:

   

6. Click the Close button.

Do the previous step, "Open the Solution and set the Windows SDK target". Or, if the solution is already open, in Solution Explorer, right-click the WebView2SampleWinComp project (not solution), and then click Retarget Projects.

Step 7 - Install workloads if prompted

• If prompted, install any Visual Studio workloads that are requested. In a separate window or tab, see Install Visual Studio workloads in Set up your Dev environment for WebView2. Follow the steps in that section, and then return to this page and continue below.

Step 8 - View the opened project

The project opens in Visual Studio, showing the WebView2SampleWinComp project in Solution Explorer:

To zoom the screenshot, right-click > Open image in new tab.

Step 9 - Install or update the WebView2 prerelease SDK

This step is optional. The sample has preinstalled a version of the WebView2 prerelease SDK.

1. In Solution Explorer, right-click the WebView2SampleWinComp project (not the Solution node), and then select Manage NuGet Packages. The NuGet Package Manager tab opens.

2. Select the Include prerelease checkbox.

3. Click the Updates tab.

4. If a newer prerelease of the Microsoft.Web.WebView2 SDK is listed, click the Update button. A prerelease has a "-prerelease" suffix, such as 1.0.1248-prerelease. If you want to see details about this step, in a separate window or tab, see Install the WebView2 SDK in Set up your Dev environment for WebView2. Follow the steps in that section, and then return to this page and continue below.

To zoom the screenshot, right-click > Open image in new tab.

Step 10 - Install or update the Windows Implementation Libraries (WIL)

This step is optional. The sample has preinstalled a version of the Windows Implementation Libraries (WIL).

1. In Solution Explorer, right-click the WebView2SampleWinComp project (not the Solution node), and then select Manage NuGet Packages. The NuGet Package Manager tab opens.

2. Install or update the Windows Implementation Libraries (WIL) on the project node (not the solution node) in Solution Explorer. If the WebView2 prerelease SDK is already installed, and a newer prerelease is listed in the Update tab, update it. In a separate window or tab, see Install the WebView2 SDK in Set up your Dev environment for WebView2. Follow the steps in that section, and then return to this page and continue below.

Step 11 - Build the project

At the top of Visual Studio, set the build target, as follows:

1. In the Solution Configurations dropdown list, select Debug or Release.

2. In the Solution Platforms dropdown list, select x86, x64, or ARM64.

3. In Solution Explorer, right-click the WebView2SampleWinComp project, and then select Build.

   This builds the project file SampleApps/WebView2SampleWinComp/WebView2SampleWinComp.vcxproj.

Step 12 - Run (debug) the project

1. In Visual Studio, after building the project, select Debug > Start Debugging (F5).

   The sample app window opens:

   

2. Use the sample app; see README file for WebView2SampleWinComp.

3. In Visual Studio, select Debug > Stop Debugging. Visual Studio closes the app.

Step 13 - Inspect the code

1. In the Visual Studio code editor, inspect the code:

   

See also

• Get started with WebView2 in Win32 apps