On this page

Saving, Previewing and Printing Forms in Qt Widgets Designer

Although Qt Widgets Designer's forms are accurate representations of the components being edited, it is useful to preview the final appearance while editing. This feature can be activated by opening the Form menu and selecting Preview, or by pressing Ctrl+R when in the form.

Screenshot showing a preview of a layout to create an image with options to change name, width, height, and color depth

The preview shows exactly what the final component will look like when used in an application.

Since Qt 4.4, it is possible to preview forms with various skins - default skins, skins created with Qt Style Sheets or device skins. This feature simulates the effect of calling QApplication::setStyleSheet() in the application.

To preview your form with skins, open the Edit menu and select Preferences...

You will see the dialog shown below:

Screenshot of preferences dialog showing options for interface mode, font settings, print and preview configuration, additional template paths, and grid visibility and snapping

The Print/Preview Configuration checkbox must be checked to activate previews of skins. You can select the styles provided from the Style drop-down box.

Screenshot of Qt Widgets Designer print and preview configuration section showing a dropdown menu for selecting interface styles, including Default, Windows, WindowsXP etc.

Alternatively, you can preview custom style sheet created with Qt Style Sheets. The figure below shows an example of Qt Style Sheet syntax and the corresponding output.

Screenshot of Qt Widgets Designer dialogs showing the Edit Style Sheet window with QLineEdit CSS properties and the Create Image dialog for defining image name, size, and color depth

Another option would be to preview your form with device skins. A list of generic device skins are available in Qt Widgets Designer, however, you may also use other QVFB skins with the Browse... option.

Screenshot of Qt Widgets Designer print and preview configuration showing a dropdown menu for selecting device skins

Viewing the Form's Code

Since Qt 4.4, it is possible to view code generated by the User Interface Compiler (uic) for the Qt Widgets Designer form.

Screenshot showing option to view the layout in code under the drop down menu of "Forms"

Select View Code... from the Form menu and a dialog with the generated code will be displayed. The screenshot below is an example of code generated by the uic.

Screenshot showing a code of "Form" in a code viewer

Saving and Printing the Form

Forms created in Qt Widgets Designer can be saved to an image or printed.

Screenshot showing file menu optionsSaving Forms

To save a form as an image, choose the Save Image... option. The file will be saved in .png format.

Printing Forms

To print a form, select the Print... option.

© 2025 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.