EnglishEspañol
  • Pixel-Nexus Logo
Using web UI's in Maya

Using web UI technology within Maya - or every other QT supporting application
​

by Bert Plasschaert, Pixel-Nexus | 07 March 2025

This article will provide you with a method of using Web UIs (HTML, CSS and JS) within any application that supports QT and Python. We make use of QWebEngineWidgets for the browser, and QWebChannels for the communication to the Python backend.

Below you will find a minimal example with all the required functions for you to get going. As well as a more applied example of a basic asset list which can be used to import, reference or open assets. These scripts were tested in Maya 2023, for Maya2025 you might need to switch some things around due to the PySide6 update.

A cool party trick? Or a method of unifying the UI?
​

Jakob's Law is a well established UX rule that states:

Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.

In the context of this article we've introduced a UI divergence away from the Maya UI language. It can only be treated as a 3th party integration (as it literally is). You could argue that this violates Jakob's Law, but you could also argue the opposite.

Lets say you have a suite of custom tools and applications with a unified distinct look. Using a webUI would be a great method of bringing this design language into Maya, directly communicating to the user that this tool is part of that suite. This argument would adhere to Jakob's Law.

A third option would be to utilise QT and style it according to your unified custom tools look. This would also violate Jakob's Law according to the first argument, as it also steps away from the Maya look. But it would be treated as a first party integration as it stays within QT.

You would lose a lot of the conveniences of using Web UIs such as the wide ecosystem of tools available (tailwind, react-components) etc... You are absolutely able to recreate everything within QT, but the amount of time it would take could be significantly longer depending on the amount of sips (skill issues per second) you encounter.

Running web UI within Maya
​

For our browser window we use a QtWebEngineView. This is a widget which acts as a browser and is able to display either a hosted url or local files. The browser QT provides is chromium based, which results in high compatibility with modern features as well as a great debugger!

One of the challenges was to be able to run the backend directly within Maya. My initial approach was to have a separate flask server running and passing the Python commands over a commandport into Maya. Someone did something similar to be able to run commands using their streamdeck.

My Boss insisted that there must be a better way and I should be able to talk to the front-end directly from within Maya. Running an active webserver within Maya, from a separate non blocking thread, in a non thread-save application is so ridiculous, there must be a better alternative.

Welcome to QWebchannels, this allows the application to expose QObjects directly to the JavaScript front-end. which in turn is able to call functions on those QObjects. This stack overflow post and this snippet pushed me in the right direction.

Minimal example
​

This example contains all the fundamental communication methods between the front-end and back-end you could need.

  • run a function
  • set a value
  • get a value
  • set value and get a return (roundtrip)

Save the HTML snippet to an .html file and update the HTML_FILE_PATH variable in the python code. Then simply run the python code in Maya's script editor.

Backend:


from PySide2 import QtCore, QtWidgets, QtWebEngineWidgets, QtWebChannel
import json

import maya.OpenMayaUI as omui
from shiboken2 import wrapInstance

HTML_FILE_PATH = r"/path/to/html-file.html"

class Backend(QtCore.QObject):
    @QtCore.Slot()
    def triggerFunction(self) -> None:
        print("Hello from Python!")

    @QtCore.Slot(str)
    def setValue(self, o: str) -> None:
        print("set value in backend")
        data_from_frontend = json.loads(o)
        print(data_from_frontend)

    @QtCore.Slot(result=str)
    def getValue(self) -> str:
        print("requested value from backend")
        return json.dumps({"lunch": "chicken"})

    @QtCore.Slot(str, result=str)
    def roundtrip(self, o: str) -> str:
        menu = json.loads(o)

        if menu.get("lunch") == "chicken":
            return json.dumps({"approved": True})

        return json.dumps({"approved": False})


class MayaBrowser(QtWidgets.QMainWindow):
    def __init__(self, parent=None):
        super(MayaBrowser, self).__init__(parent)

        # NOTE: backend and channel MUST be class or global variables
        self.backend = Backend()
        self.channel = QtWebChannel.QWebChannel()
        self.channel.registerObject("backend", self.backend)

        view = QtWebEngineWidgets.QWebEngineView()
        view.page().setWebChannel(self.channel)
        url = QtCore.QUrl.fromLocalFile(HTML_FILE_PATH)
        view.load(url)
        self.setCentralWidget(view)

        # NOTE: this fully stops the instance from running after the window is closed
        self.setAttribute(QtCore.Qt.WA_DeleteOnClose)


def get_maya_main_window():
    main_window_ptr = omui.MQtUtil.mainWindow()
    return wrapInstance(int(main_window_ptr), QtWidgets.QMainWindow)


if __name__ == "__main__":
    app = get_maya_main_window()
    browser = MayaBrowser(parent=app)
    browser.show()

Frontend:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
    <script type="text/javascript">

        let menu = {breakfast: "cereal", lunch: "salad", dinner: "fish"}
        new QWebChannel(qt.webChannelTransport, function(channel) {
            var backend = channel.objects.backend;

            backend.triggerFunction()

            backend.setValue(JSON.stringify(menu))

            backend.getValue(function(response) {
                document.getElementById("getValueResult").innerText = response;
            });

            backend.roundtrip(JSON.stringify(menu), function(response) {
                customer_answer = JSON.parse(response)
                document.getElementById("roundtripResult").innerText = customer_answer.approved;
            });

        })
        function launchDebug(){
            debugger;
        }

    </script>
</head>
<body>
        <h1>Communication with Python</h1>
        <button class="" onclick="launchDebug()">debug</button>
        <p>GetValue result:</p>
        <p id="getValueResult">Waiting for message...</p>
        <p>Roundtrip result:</p>
        <p id="roundtripResult">Waiting for message...</p>
</body>

Full example
​

A second, more applied example can be found here. This is an example of a very basic asset browser that could be adapted to source data from your tracking software such as flow™ (shotgrid™, shotgun™ or whatever Autodesk rebrands it to next year). For this example I made use of Tailwind, just to show you can use any Web UI tool. As long as its features are compatible with Chromium based browsers and it builds to HTML, CSS and JS it should work.

Some tips and tricks
​

  • Updating slot function names will break the script until Maya is restarted

  • The backend and channel variables MUST be class or global variables. (this is not the case when ran in PySide2 directly, don't ask how long that took to debug)

  • Add the delete on close attribute to the window, otherwise the window will remain inactive after closing it.

  • As the browser is chromium based you have access to the powerful devtools and debugger

    • Set the following environment variable (before Maya starts) to a port number: QTWEBENGINE_REMOTE_DEBUGGING=1234
    • Go to the following address: http://localhost:1234/ .
    • Click on your open instance name, should be <your-filename>.html when using running the minimal example.
    • If you are running the minimal example the debugger will activate if you press the debug button in the UI

  • Add a debugger button to your UI when developing, this is also in the example.

Fun Fact!
​

The homescreen introduced in Maya 2022 also uses the webview system. When you are on your debugger homepage you'll see a Maya Application Home entry. This is the Maya homescreen window! These source files can be found here: C:\Program Files\Autodesk\Maya2023\resources\AppHome. The bundle.js file found in the dist\ subfolder contains all the js code used in the homescreen. Unfortunately it's not that easy to decipher as it seems to be minified presumably during their build step.

Nonetheless it's cool to see, maybe this is foreshadowing a start of a new web UI based framework for Maya? Just as Adobe has CEP and now UXP, both webUI based frameworks. I personally don't think this will be the case as QT is a mature and robust framework tightly integrated across their applications.

Closing words
​

I hope you are able to add the Web UI system to you arsenal of tools. wether or not you should consider using it for your next million dollar idea is up to you! Maya WebUI meme I've added some of the sources I came across below these might help you dive deeper into this topic.

commandport:

webview: