Join us on April 18th for a discussion about the top 5 UX/UI Trends shaping the future. Sign-up for the webinar today
最新版Qt 6.3已正式发布。 了解更多。
最新バージョンQt 6.3がご利用いただけます。 詳細はこちら

Extending Qt Bridge

Qt Design Studio is the latest offering from The Qt Company. It's an easy-to-use design tool that lets designers import designs from Sketch and Photoshop to Qt, animate them, test them live on the target hardware, and turn them into QML code developers can use.
The Qt Bridge is the plugin component for the design tools like Photoshop and Sketch. The plugin primarily enables designers to annotate the design document's layers and exports these annotations along with the assets and DOM of the design document into an intermediate format which can be imported in the QDS. The plugin is developed using Javascript and uses APIs exposed by the design tools. See Qt Bridge documentation for more details about the plugin. 
Qt Bridge plugin version 1.4 onwards allows users to write a JSX script to extend or customise the Qt Bridge plugin behaviour for Photoshop. The settings screen allows the user to select the custom script. The script is evaluated when the plugin loads.

Override script settings


Following APIs can be defined in the JSX file to customise or extend the Qt Bridge behaviour.

  • preExport(documentInstance)

    The preExport(...) API is called before the PSD document is exported. The document instance is sent as an argument. The user can make changes to the document and, if required, revert those changes once the export is done by defining postExport(...) API.

    Details about Photoshop object model are available at

  • postExport(documentInstance)

    The postExport(...) API is called after the PSD document is exported. The document instance is sent as an argument. The user can make changes to the document instance. For example you might want to revert the changes made to the document in the preExport(...) API.

  • customQmlId(generatedQmlId, psdLayerInstance)

    The API customQmlId(...) is called every time a default QML id is generated for a PSD layer and user can return the QML id to be assigned to the layer. The parameter generatedQmlId is the default QML id generated by the Qt Bridge plugin for the layer and the parameter layerInstance is the PSD layer object.

    Note: Return null to use the default generated QML id. 


Example override JSX:

The following script logs the export start and finish of the exported PSD document to a export.log file inside the home directory. The QML Ids are  prefixed with "m_" and the document and layer ids are removed.


var logFile = null

preExport = function (documentInstance) {
    if (openLogFile("~/export.log")) {
        var date = new Date();
        logFile.writeln(date + ": Exporting: " +;

postExport = function (documentInstance) {
    if (logFile) {
        var date = new Date();
        logFile.writeln(date + ": Exporting done: " +;

customDefaultQmlId = function(generatedQmlId, psdLayerInstance) {
    return "m_" + generatedQmlId.replace(/_[0-9]*_[0-9]*$/g, "");

function openLogFile(path) {
    logFile = new File(path);
    var fileCreated = false;

Report bugs and suggestions at

Blog Topics: