https://www.kdab.com/embedding-servo-in-qt/ Skip to content x How can we help you? Thanks for your interest in KDAB. Please write your message here and we'll get back to you as soon as possible. Name: * [ ] E-Mail: * [ ] Company: [ ] Phone: [ ] [ ] [ ] [ ] [ ] Message: * [ ] KDAB is committed to ensuring that your privacy is protected. * Only the above data is collected about you when you fill out this form. * The data will be stored securely. * The data will only be used to contact you about possible business together. * If we do not engage in business within 3 years, your personal data will be erased from our systems. * If you wish for us to erase it earlier, email us at info@kdab.com For more information about our Privacy Policy, please read https://www.kdab.com/about/kdab-privacy-policy/ [ ]* I have read and agree to the terms above. [ ] Yes, sign me up for the KDAB newsletter [Send] x Contact us Germany - KDAB (Deutschland) GmbH Reuchlinstrasse 10-11, 10553 Berlin +49 30 5213 254 70 +49 30 5213 254 99 info-de@kdab.com Other countries US: +1.866.777.5322 SE: +46 563 540090 FR: +33 4 90 84 08 53 UK: +44 1625 809908 Full list of all countries x Contact us Name[ ] E-Mail[ ] Company[ ] E-Mail[ ] [ ] [ ] [ ] Message[ ] Please attach your CV (PDF only) [ ] captcha [ ] [Send request] [ ] [ ] [ ] [ ] [ ] [ ] [ ] D[ ] * Services + Projects o Code Migration o Modernization o Development o Consulting & Architecture o Mentoring & Support + Workshops o Code Migration & Modernization o Architecture o Profiling & Performance o Testing & Refactoring o Agile Development + Training * Expertise + Qt / QML o Qt 3D o Qt on Android o Qt on QNX Neutrino RTOS o Qt on Windows Embedded CE o Qt Tools o Is Qt Right for Your Project? + C++ o C++ Latest Standards o C++ Tools o C++ Training # Advanced Modern C++ # Modern C++: Introduction + 3D / OpenGL o OpenGL o Qt 3D o Vulkan o Kuesa 3D * Platforms + Android + Linux + Web integration + QNX + Windows Embedded + Mobile iOS/Android + Windows + macOS + Unix / X11 (Motif) * Resources + Blogs + KDAB TV o News o Academy # Introduction to Qt/QML # Qt Widgets and more... # Kuesa 3D # GammaRay # Multithreading with Qt # Cutelyst # Presentations o Showcases o Events # Demos o Archive + Monthly Digest + Content Library Search + Whitepapers, Brochures & Articles + Success Stories + Conferences o Qt Embedded Days o Qt Desktop Days o Qt World Summit # Qt World Summit '20 # Qt World Summit '19 # Qt World Summit '18 # Qt World Summit '17 # Qt World Summit '16 # Qt World Summit '15 o Qt Developer Days # Qt Developer Days 2014 # Qt Developer Days 2013 # Qt Developer Days 2012 + Newsletter + Events + Qt Tools + Qt and CMake resources + Qt Creator Card + Codebrowser.dev + Kuesa 3D * [ ] * * * About us + Contact + Customers & Industries + ISO 9001 Certified + Partners + Mission + Working at KDAB + KDAB France + KDAB Japan + Terms and Conditions + Privacy Policy & Cookies Qt/QML C++ 3D/OpenGL Qt/QML C++ 3D/OpenGL Embedding the Servo Web Engine in Qt Using CXX-Qt to integrate a web rendering engine written in Rust # 05.04.2024 # Andrew Hayzen and Magnus Gross # One comment FacebookTwitterLinkedInEmail With the Qt WebEngine module, Qt makes it possible to embed a webview component inside an otherwise native application. Under the hood, Qt WebEngine uses the Chromium browser engine, currently the de facto standard engine for such use cases. While the task of writing a brand new standard-compliant browser engine is infamous as being almost unachievable nowadays (and certainly so with Chromium coming in at 31 million lines of code), the Rust ecosystem has been brewing up a new web rendering engine called Servo. Initially created by Mozilla in 2012, Servo is still being developed today, now under the stewardship of the Linux Foundation. With the browser inherently being exposed to the internet, it is usually the biggest attack vector on a system. Naturally this makes Servo very attractive as an alternative browser engine, given that it is written in a memory-safe language. A Servo WebView At KDAB we managed to embed the Servo web engine inside Qt, by using our CXX-Qt library as a bridge between Rust and C++. This means that we can now use Servo as an alternative to Chromium for webviews in Qt applications. From a QML perspective this component is similar to the Chromium WebView, such as providing canGoBack, canGoForward, loading, title, url properties and goBack, goForward methods. The QML item itself acts in the same way with the contents being rendered to match its size. import QtQuick import QtQuick.Window import com.kdab.servo Window { height: 720 width: 1280 title: webView.title visible: true ServoWebView { id: webView anchors.fill: parent url: "https://servo.org/" } } The screenshot below shows a basic QML application with a toolbar containing back, forward, go buttons and an address bar. We use CXX-Qt to define Qt properties, invokables, and event handlers (e.g. touch events) in Rust and trigger events in the Servo engine. Then any update requests from Servo can trigger an update of the Qt side via the Qt event loop. [cxx-qt-servo-webview] As we move towards stabilising CXX-Qt at KDAB, investigating real world use cases, such as exposing Servo to Qt, allows us to identify potential missing functionality and explore what is possible when joining the Rust and Qt ecosystems together. Technical details Under the hood most of the heavy lifting is done by our CXX-Qt bindings, which already bridges the obvious gap between the Rust and Qt/C++ worlds. However, some further glue is needed to connect the rendering contexts of Servo to being able to render the surfaces into the actual Qt application. Internally, Servo uses surfman, a Rust library to manage rendering surfaces. At the time of writing, surfman supports OpenGL and Metal, with support for Vulkan being planned. We use surfman to create a new OpenGL context, that Servo then uses for rendering. To render the result into the QtQuick scene, we borrow the surface from Servo, create a new framebuffer object and blit the framebuffer into a QQuickFrameBufferObject on the Qt side. Future possibilities Servo development is active again after a period of less activity, therefore the API is evolving and there is work to improve the API for embedders. This could result in a simpler and documented process for integrating Servo into apps. Also as part of the Tauri and Servo collaboration, a backend for WRY could become available. All of these result in many possible changes for the bridge to Qt, as currently this demo directly constructs Servo components (similar to servoshell) but could instead use a shared library or WRY instead. On the Qt side, there are areas that could be improved or investigated further. For example, currently we are using a framebuffer object which forces use of the OpenGL backend, but with RHI, developers might want to use other backends. A way to solve this for QML would be to change the implementation to instead use a custom Qt Scene Graph node, which can then have implementations for Vulkan, OpenGL etc and read from the Servo engine. Alternatively Qt 6.7 has introduced a new QQuickRhiItem element, which is currently a technical preview, but can be used as a rendering API-agnostic alternative to QQuickFrameBufferObject. If this sounds interesting to your use case or you would like to collaborate with us, the code for this tech demo is available on GitHub under KDABLabs/cxx-qt-servo-webview or contact KDAB directly. We also have a Zulip chat if you want to discuss any parts of bridging Servo or CXX-Qt with us. Come and see us at Embedded World 2024 where we will have the Servo demo and others on display! FacebookTwitterLinkedInEmail Categories: KDAB Blogs / KDAB on Qt / QML / Qt / Rust / Technical 1 thought on "Embedding the Servo Web Engine in Qt" 1. [b09a] # Blablabla # 05.04.2024 # 2:10 pm Thank you so much for this, this gives me hope that we could have an upstream Servo Qt web engine. I for one really wish to have Servo as a web engine alternative available in KDE apps (particularly, Falkon) - and even better, if it was the default web engine for it and being able to ditch qtwebengine from my system. Reply Leave a Reply Cancel reply Your email address will not be published. Required fields are marked * [ ] [ ] [ ] [ ] [ ] [ ] [ ] Comment * [ ] Name * [ ] E-Mail * [ ] [Post Comment] [ ] [ ] [ ] [ ] [ ] [ ] [ ] D[ ] Improve your programming skills Book a scheduled KDAB training! Boost team productivity Book an on-site training! Access KDAB's expertise Book a workshop! The KDAB Group is the global No.1 software consultancy for Qt, C++ and OpenGL applications across desktop, embedded and mobile platforms * About us + Contact + Customers & Industries + ISO 9001 Certified + Partners + Mission + Working at KDAB + KDAB France + KDAB Japan + Terms and Conditions + Privacy Policy & Cookies * Services + Projects + Workshops + Training * Expertise + Qt / QML + C++ + 3D / OpenGL * Platforms + Android + Linux + Web integration + QNX + Windows Embedded + Mobile iOS/Android + Windows + macOS + Unix / X11 (Motif) * Resources + Blogs + KDAB TV + Monthly Digest + Content Library Search + Whitepapers, Brochures & Articles + Success Stories + Conferences + Newsletter + Events + Qt Tools + Qt and CMake resources + Qt Creator Card + Codebrowser.dev + Kuesa 3D Contact us DE: +49 30 5213 254 70 US: +1.866.777.5322 FR: +33 4 90 84 08 53 UK: +44 1625 809908 JP: +81 70 4001 0910 Full list, all countries * * * * [New-QAS-LO] Manage cookie permissions * [ ] * Services + Projects + Workshops * Training * Expertise + Qt/QML + C++ + 3D / OpenGL * Platforms * Blogs * Videos * About Us + Working at KDAB