- Qt 5.15
- Qt WebEngine
- Qt WebEngine Examples
- WebEngine Qt Quick Minimal Example
- Qt 5.15.19 Reference Documentation

# 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