In modern desktop applications, embedding a web interface within a native UI has become increasingly popular. Microsoft’s Edge WebView2 allows developers to host modern, standards-compliant web content inside native Windows applications — offering the power of HTML5, CSS, and JavaScript within a Qt-based C++ app.
In this post, we’ll walk through how to link WebView2 with Qt, display a webpage, and interact between Qt and JavaScript.
🧩 What is Microsoft Edge WebView2?
WebView2 is a control that lets you embed the Microsoft Edge (Chromium) rendering engine in your native applications. It provides all the features of a modern browser without leaving your app window.
✅ Benefits and Key Features:
- Modern HTML/JS rendering using Chromium.
- Two-way communication between native code and JavaScript.
- Lightweight and fast, optimized for Windows 10+.
- Automatic updates — uses the system Edge runtime.
- Perfect for hybrid apps that combine native performance with web flexibility.
Why Use Microsoft Edge WebView2 Instead of Qt WebEngine
Before jumping into the integration steps, let’s understand why developers are increasingly choosing WebView2 over the traditional Qt WebEngine module for Windows desktop applications.
While Qt WebEngine embeds Chromium directly inside your app, it comes with a large binary size, limited integration with system-level APIs, and heavier runtime dependencies.
Microsoft Edge WebView2, on the other hand, uses the system-installed Edge (Chromium) runtime — meaning your app becomes much lighter and better integrated with Windows.
🔍 Key Advantages of WebView2
| Feature | Qt WebEngine | WebView2 |
|---|---|---|
| Runtime Size | ~300–400 MB embedded Chromium | Uses existing Edge runtime (already on Windows) |
| Performance | Slower startup due to embedded engine | Fast startup using system Edge |
| Integration | Limited Windows API access | Deep Windows API integration |
| Updates | App must ship with new Chromium versions | Always uses updated Edge runtime |
| Interoperability | Custom IPC required | Built-in bidirectional messaging (JS ↔ C++) |
| Deployment | Larger installer | Lightweight binary, faster deployment |
🧠 In Short:
If your application primarily targets Windows 10/11, WebView2 provides:
- A modern browser environment without bundling Chromium.
- Smaller executables and faster launch times.
- Seamless communication between JavaScript and C++.
- Native look and feel inside your Qt user interface.
🧱 Step 1: Setup and Requirements
Before integrating WebView2 into your Qt application, make sure you have the following prerequisites in place:
✅ Requirements
- Qt 6.x or Qt 5.x (MSVC build kit recommended)
- Microsoft Edge WebView2 Runtime installed (usually pre-installed on Windows 10+).
- WebView2 SDK — includes headers and libraries required for C++ integration.
You can download the WebView2 SDK from Microsoft’s official page:
👉 https://developer.microsoft.com/en-us/microsoft-edge/webview2/
After downloading the SDK package (WebView2-SDK.zip), extract it to a convenient location — for example:
C:\WebView2SDK\
This path will contain folders such as:
C:\WebView2SDK\build\native\include
C:\WebView2SDK\build\native\x64
⚙️ Update Your Qt Project (.pro) File
Add the following lines to your .pro file to include the SDK headers and link the WebView2 library:
# Include WebView2 header files
INCLUDEPATH += C:/WebView2SDK/build/native/include
# Link WebView2 library (x64)
LIBS += -LC:/WebView2SDK/build/native/x64 -lWebView2Loader
# Required Windows libraries
LIBS += -lUser32 -lGdi32 -lOle32 -lShlwapi -lComctl32 -lRuntimeObject
💡 Tip: Make sure the SDK path matches your extraction location. If you place it elsewhere (e.g.,
D:/DevTools/WebView2SDK), update the paths accordingly.
This ensures that when you build your Qt project, the compiler can locate the WebView2 headers and the required DLL loader library (WebView2Loader.dll).
🧩 Step 2: Create the WebView2 Widget
Create a custom Qt widget — QWebView2Widget — to host WebView2 inside a Qt layout.
#include "QWebView2Widget.h"
#include <QDebug>
using namespace Microsoft::WRL;
void QWebView2Widget::showEvent(QShowEvent *event)
{
QWidget::showEvent(event);
if (!m_webview) initWebView();
}
void QWebView2Widget::initWebView()
{
CreateCoreWebView2EnvironmentWithOptions(
nullptr, nullptr, nullptr,
Callback<ICoreWebView2CreateCoreWebView2EnvironmentCompletedHandler>(
[this](HRESULT, ICoreWebView2Environment* env) -> HRESULT {
env->CreateCoreWebView2Controller(
(HWND)winId(),
Callback<ICoreWebView2CreateCoreWebView2ControllerCompletedHandler>(
[this](HRESULT, ICoreWebView2Controller* controller) -> HRESULT {
if (controller) {
m_controller = controller;
m_controller->get_CoreWebView2(&m_webview);
}
resizeWebView();
if (m_webview) {
// Load your local or hosted web content
m_webview->Navigate(L"http://localhost:8002/webpage/index.html");
// Listen for messages from JavaScript
m_webview->add_WebMessageReceived(
Callback<ICoreWebView2WebMessageReceivedEventHandler>(
[this](ICoreWebView2*, ICoreWebView2WebMessageReceivedEventArgs* args) -> HRESULT {
LPWSTR message = nullptr;
args->TryGetWebMessageAsString(&message);
if (message) {
QString msg = QString::fromWCharArray(message);
emit entityClicked(msg);
CoTaskMemFree(message);
}
return S_OK;
}).Get(), nullptr);
}
return S_OK;
}).Get());
return S_OK;
}).Get());
}
void QWebView2Widget::resizeWebView()
{
if (m_controller) {
RECT bounds;
GetClientRect((HWND)winId(), &bounds);
m_controller->put_Bounds(bounds);
}
}
void QWebView2Widget::runJavaScript(const QString &script)
{
if (m_webview) {
std::wstring wscript = script.toStdWString();
m_webview->ExecuteScript(wscript.c_str(), nullptr);
}
}
This widget initializes the WebView2 environment, embeds it inside a QWidget, and enables message passing between C++ and JavaScript.
🧩 Step 3: Use WebView2 in Your Qt MainWindow
You can now add your QWebView2Widget inside a Qt UI layout:
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent), ui(new Ui::MainWindow)
{
ui->setupUi(this);
m_webview2 = new QWebView2Widget(this);
ui->webviewHorizontalLayout->addWidget(m_webview2);
// Connect messages from JavaScript
connect(m_webview2, &QWebView2Widget::entityClicked, this, [this](const QString &msg){
qDebug() << "JS message:" << msg;
});
showMaximized();
}
🔄 Step 4: Interacting with JavaScript
You can easily call JavaScript functions from Qt using:
if (m_webview2) {
QJsonObject radarData;
radarData["minClockAngle"] = 30.0;
radarData["maxClockAngle"] = 50.0;
QString jsonString = QString(QJsonDocument(radarData).toJson(QJsonDocument::Compact));
QString jsCode = QString("setRadarAngle('%1');").arg(jsonString);
m_webview2->runJavaScript(jsCode);
}
In your HTML/JavaScript page, define:
function setRadarAngle(data) {
const radar = JSON.parse(data);
console.log("Radar angles:", radar.minClockAngle, radar.maxClockAngle);
}
And to send messages from JavaScript to Qt:
window.chrome.webview.postMessage("42"); // Example track ID
🧠 Conclusion
Integrating Microsoft Edge WebView2 into Qt brings the best of both worlds — the performance and control of C++ with the flexibility and interactivity of modern web technologies.
You can display dynamic dashboards, 3D visualization (via WebGL or CesiumJS), or interactive UI components right inside your Qt application — all while maintaining a single, integrated environment.
Whether you’re building a GIS viewer, mission control dashboard, or simulation interface, WebView2 provides a powerful bridge between native and web experiences.
If you’re interested in a full-fledged GIS solution, check out our flagship product PrithviGIS – a powerful QGIS-based platform for real-time geospatial visualization. PrithviGIS is an indigenous GIS development in India.
Check out our Live Aircraft Simulation using CesiumJS.