WebEngine Qt Quick Minimal Example

Displays a web page using the Qt Quick integration of Qt WebEngine.

WebEngine Qt Quick Minimal Example demonstrates how to use the WebEngineView item to render a web page. It shows the minimum amount of code needed to load and display an HTML page, and can be used as a basis for further experimentation.

Running the Example

To run the example from Qt Creator, open the Welcome mode and select the example from Examples. For more information, visit Building and Running an Example.

C++ Code

In main.cpp we use only the QGuiApplication and QQmlApplicationEngine classes. We also include qtwebengineglobal.h to be able to use QtWebEngine::initialize.

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <qtwebengineglobal.h>

In the main function we first set the QCoreApplication::organizationName property. This affects the locations where Qt WebEngine stores persistent and cached data (see also WebEngineProfile::cachePath and WebEngineProfile::persistentStoragePath).

We also set the Qt::AA_EnableHighDpiScaling attribute. This lets the web view automatically scale on high-dpi displays. Then we instantiate a QGuiApplication object.

Next, we call QtWebEngine::initialize, which makes sure that OpenGL contexts can be shared between the main process and the dedicated renderer process (QtWebEngineProcess). This method needs to be called before any OpenGL context is created.

Then we create a QQmlApplicationEngine, and tell it to load main.qml from the Qt Resource System.

Finally, QGuiApplication::exec() launches the main event loop.

int main(int argc, char *argv[])
{
    QCoreApplication::setOrganizationName("QtExamples");
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QCoreApplication::setAttribute(Qt::AA_ShareOpenGLContexts);
    QtWebEngine::initialize();
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    return app.exec();
}

QML Code

In main.qml we create the top level window, set a sensible default size and make it visible. The window will be filled by a WebEngineView item loading the Qt Homepage.

import QtQuick 2.0
import QtQuick.Window 2.0
import QtWebEngine 1.0

Window {
    width: 1024
    height: 750
    visible: true
    WebEngineView {
        anchors.fill: parent
        url: "https://www.qt.io"
    }
}

Requirements

The example requires a working internet connection to render the Qt Homepage. An optional system proxy should be picked up automatically.

Example project @ code.qt.io

© 2024 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.