QML Viewer

Free online QML viewer — paste Qt Quick QML to inspect structure and preview layout. Runs entirely in your browser.

Paste Qt Quick QML to inspect imports, the object tree, and an approximate layout preview. Everything runs in your browser — nothing is uploaded.

QML source

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

ApplicationWindow {
    id: window
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello QML")
    color: "#0f172a"

ColumnLayout {
        id: rootLayout
        anchors.fill: parent
        anchors.margins: 16
        spacing: 12

Text {
            id: heading
            text: "QML Viewer Sample"
            color: "#f8fafc"
            font.pixelSize: 24
            horizontalAlignment: Text.AlignHCenter
            Layout.fillWidth: true
        }

Text {
            id: subtitle
            text: "Approximate layout preview — not a Qt runtime"
            color: "#94a3b8"
            font.pixelSize: 13
            Layout.fillWidth: true
        }

Rectangle {
            id: card
            Layout.fillWidth: true
            Layout.preferredHeight: 140
            color: "#1e293b"
            radius: 12

Row {
                id: swatches
                anchors.centerIn: parent
                spacing: 16

Rectangle {
                    width: 72
                    height: 72
                    color: "#38bdf8"
                    radius: 10
                }

Rectangle {
                    width: 72
                    height: 72
                    color: "#a78bfa"
                    radius: 10
                }

Rectangle {
                    width: 72
                    height: 72
                    color: "#34d399"
                    radius: 10
                }
            }
        }

RowLayout {
            id: actions
            Layout.fillWidth: true
            spacing: 8

Button {
                text: "Cancel"
                Layout.fillWidth: true
            }

Button {
                text: "OK"
                Layout.fillWidth: true
            }
        }

Image {
            id: hero
            source: "placeholder.png"
            Layout.preferredWidth: 120
            Layout.preferredHeight: 80
            Layout.alignment: Qt.AlignHCenter
        }
    }
}

96 lines · 2,140 chars

ZoomChrome

Layout preview (approximate) — not a Qt / QML runtime. Common anchors, sizes, Row/Column/Grid, colors, and text are mapped to HTML/CSS.

QML Viewer Sample

Approximate layout preview — not a Qt runtime

Cancel

Image

Mais Ferramentas para desenvolvedores

QML Viewer

Mais Ferramentas para desenvolvedores

QML Viewer