# Qt Preview

> Explore Qt directly in your browser-no installation required.

Qt Preview lets you explore a fully functional Qt application directly in your browser. You can browse the app, click Inspect to view the QML that powers specific UI elements, and follow highlighted topics to the right place in the codebase. The experience runs via WebAssembly-no local installation required.

## Use Cases
- **Evaluate Qt**: Test Qt's capabilities online before committing to development
- **Learn QML**: Hands-on way to understand QML UI development

## What You Can Explore
**UI Development**: desktop UI creation, reusable components, dynamic themes, Figma Integration 
**Visual Effects**: 3D graphics, animations, shaders, UI overlays 
**Advanced Features**: Interactive 3D models, customizable materials, state logic, data binding

## Main Features
- **Inspect**: Turn on Inspect by clicking **Inspect UI elements**. Then click on highlighted UI element to jump directly to the QML source that defines it, helping you understand the structure and logic of the interface.  
- **Chips**: Tags that highlight interesting parts of the UI and QML features. Clicking a chip navigates you directly to the part of the code that demonstrates that feature, making exploration and learning easier.  
- **Live Code Editor**: Edit QML code in real time within the browser. Press the **Run** button to activate your changes and see them reflected in the running application, enabling hands-on experimentation.

## Included Example Projects
The following example projects showcase different ways to build UIs with Qt and QML in the Qt Preview environment.

### [Excavator Configurator](/projects/excavator-configurator)
An industrial showcase application that demonstrates the power of creating user interfaces with Qt Design Studio, including Figma integration, reusable components, visual state logic, and smooth transitions.

### [HMI System](/projects/outrun-ivi)
An automotive UI created with QML, featuring 3D graphics, visual effects, motion design, and more.

### [OxyScan](/projects/oxyscan)
A medical app for efficient patient diagnostics with intuitive workflows, motion design, adaptive theming and dynamic data handling.

## Limitations
- Qt Preview runs on Qt for WebAssembly and is designed to demonstrate the QML and UI aspects of Qt. It does not support C++-based projects or other non-QML features.
- Qt Preview only allows editing the contents of the existing projects files, you cannot add or remove files.
- Qt Preview only allows users to view and edit the existing example projects, editing your own project on Qt Preview platform is not supported.
- Mobile browsers are not supported

## Related
### What Qt is
Qt is a comprehensive development framework (libraries, tools, and IDEs) used to build modern user interfaces and full applications. It delivers high runtime performance and a small footprint, with deployment options for desktop, mobile, embedded devices, and WebAssembly.

- [Qt Framework Overview](https://www.qt.io/product/framework): Product page describing the cross-platform libraries, tools, and supported targets
- [Qt Documentation - Languages](https://doc.qt.io/qt-6/qtlanguages.html): How Qt's C++, QML/Qt Quick, and Python bindings fit together

### What QML is (and how it relates to Qt Preview)
QML (Qt Meta-Object Language) is Qt's declarative UI language. It describes the structure, look, and behavior of user interfaces in a JSON-like syntax, with JavaScript used for logic. Qt Quick builds on QML to provide visual components, animations, and model-view support for fluid, touch-friendly UIs.

In the Qt Preview experience, QML is front and center: you explore a running Qt app and use **Inspect** to jump straight to the relevant QML source for the view you're seeing.

- [Qt Documentation - Languages (QML/Qt Quick)](https://doc.qt.io/qt-6/qtlanguages.html): Official overview of QML and Qt Quick  
- [Qt QML Book](https://qmlbook.github.io/) : Free, in-depth guide to QML and Qt Quick syntax and patterns

## External Links
- [Blog: New Online Exploring Experience Launched](https://www.qt.io/blog/new-online-exploring-experience-launched) : How Inspect works, QML code linking, and WebAssembly runtime
- [Qt for WebAssembly Documentation](https://doc.qt.io/qt-6/wasm.html) : Build and deploy Qt apps that run in the browser  
- [Qt Creator Overview](https://www.qt.io/product/development-tools) : QML live preview and Qt development workflow