QMLQT QUICK · C++ · PYTHON
Build desktop interfaces with QML components, shared tokens and practical examples you can run yourself.
QML Core is a separate product. C++ and Python hosts share the same QML screens.
QML CORE
56 of 56 components
START WITH A WORKING APP
Unzip the SDK and use a Qt kit compatible with the plugin edition.
cmake -S examples/cmake-app -B build -G Ninja -DCMAKE_BUILD_TYPE=Release -DCMAKE_PREFIX_PATH=C:/Qt/6.12.0/msvc2022_64 -DCMAKE_MSVC_DEBUG_INFORMATION_FORMAT=Embedded -DCMAKE_POLICY_DEFAULT_CMP0141=NEW
cmake --build build
build/syidax-example --license your.license.json --example workbenchUse the pure QML edition. Select your binding explicitly.
python -m venv .venv
.venv/Scripts/python -m pip install -r examples/python-app/requirements-pyside6.txt
.venv/Scripts/python examples/python-app/main.py --binding pyside6 --license your.license.json --example recordsRun with --diagnose --json to check your Qt version, import path, fonts, runtime and license. No license token is printed.
The Gallery evaluation app is available now. Paid SDK sales and downloads are coming soon. The installation examples above preview the SDK workflow.
Native window and example smoke checks cover the versions below. Qt 6.8 is a source minimum, not a promise of tested support for every Qt release. Gallery uses software rendering.
Step-by-step captures from the running Windows applications. Play, pause and inspect each state.
TRY IT YOURSELF
Browse examples, inspect properties and switch between light and dark themes in a Windows application. The Gallery is for evaluation; commercial SDK access is separate.
Download Gallery · Windows x64$24.99 / month
$249.99 / year per developer
Same regular unit price as Chart. The same price applies to first purchases, additional seats and renewals.
Documentation, runnable examples and diagnostics are included. Individual technical support, onboarding and SLAs are not provided.
View purchase and license terms →The --qml path must contain the Syidax folder. Python uses qml-pure. Run from the unzipped SDK, independently of the source repository.
Download your QML Core certificate and pass it with --license. Web Core, Chart and Grid certificates do not activate QML. Monthly use ends at expiry. Annual licenses retain only releases covered by their update period.
Check the Qt version and architecture used to build plugins. Do not mix Python Qt bindings. qml-pure removes the compiled plugin ABI dependency.
PDF requires the optional QtQuick.Pdf module. Other Core components remain usable without it. For icon packs and resource paths, read SDK docs/ICON-PACKS.md.
Examples write only to their application-data folder. Check permissions and disk space. Invalid JSON is backed up before reset. A failed save preserves your draft.
Build an application header with branding, navigation, search and common actions.
import Syidax.Core.GlobalHeader
| Type | Definition / role |
|---|---|
| Application header combining branding, navigation tabs and actions. |
Previews are images of native Qt runs. Use the buttons below each image to view a result.
Compare the configuration and result of Basic composition.
import QtQuick
import Syidax.Core
Item {
component EventLog: Rectangle {
id: logBox
property var lines: []
implicitWidth: 440
implicitHeight: Math.max(56, logText.implicitHeight + 24)
radius: 4; color: Theme.semantic.backgroundBold
function log(value) { lines = lines.slice(-3).concat([String(value)]) }
Text {
id: logText; x: 12; y: 12; width: parent.width - 24
text: logBox.lines.length ? logBox.lines.join("\n") : "Interact with the controls to see event results."
wrapMode: Text.Wrap; color: Theme.semantic.textDefault
font.family: Theme.monoFontFamily; font.pixelSize: 12
}
}
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
property QtObject settings: QtObject {
id: storyArgs
property string title: "Console"
property bool search: true
property bool information: true
property bool notification: true
}
Column {
spacing: 12
SyGlobalHeader {
width: 760
title: storyArgs.title
search: storyArgs.search
information: storyArgs.information
notification: storyArgs.notification
onSelected: (detail) => output.log(detail.tabkey)
tabs: [
SyTab { tabkey: "home"; text: "Home" },
SyTab { tabkey: "data"; text: "Data" },
SyTab { tabkey: "reports"; text: "Reports" }
]
}
EventLog { id: output }
}
}Three list properties take items.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
// Focused Gallery routes: keep only the selected API and its prerequisites.
id: featureStory
property QtObject settings: QtObject {
id: storyArgs
property int width: 560
}
SyGlobalHeader { id: featureTarget0;
width: storyArgs.width
title: "Console"
logo: Rectangle { width: 28; height: 28; radius: 6; color: Theme.semantic.backgroundBrandBold; Text { anchors.centerIn: parent; text: "SY"; font.family: Theme.fontFamily; font.pixelSize: 12; font.weight: Font.Bold; color: "white" } }
tabs: [
SyTab { tabkey: "home"; text: "Home" },
SyTab { tabkey: "data"; text: "Data" },
SyTab { tabkey: "reports"; text: "Reports" },
SyTab { tabkey: "settings"; text: "Settings" },
SyTab { tabkey: "admin"; text: "Admin" }
]
actions: SyButton { text: "Sign in"; size: "small" }
}
}SyGlobalHeader has three signals:
import QtQuick
import Syidax.Core
Item {
component EventLog: Rectangle {
id: logBox
property var lines: []
implicitWidth: 440
implicitHeight: Math.max(56, logText.implicitHeight + 24)
radius: 4; color: Theme.semantic.backgroundBold
function log(value) { lines = lines.slice(-3).concat([String(value)]) }
Text {
id: logText; x: 12; y: 12; width: parent.width - 24
text: logBox.lines.length ? logBox.lines.join("\n") : "Interact with the controls to see event results."
wrapMode: Text.Wrap; color: Theme.semantic.textDefault
font.family: Theme.monoFontFamily; font.pixelSize: 12
}
}
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
// Focused Gallery routes: keep only the selected API and its prerequisites.
id: featureStory
Column {
spacing: 12
SyGlobalHeader {
width: 760
title: "Console"
search: true; information: true; notification: true
onSelected: (detail) => { if (true) { output.log(("selected: %1").arg(detail.tabkey)) } }
onActionClick: (detail) => { if (true) { output.log(("actionClick: %1").arg(detail.type)) } }
onChanged: (detail) => { if (true) { output.log(("changed: %1").arg(detail.value)) } }
tabs: [
SyTab { tabkey: "home"; text: "Home" },
SyTab { tabkey: "data"; text: "Data" }
]
}
EventLog { id: output }
}
}setActiveTab(index) makes the tab at that index the active one and emits selected({ tabkey, index }); it is ignored when the index is out of range or that tab is disabled (its own disabled, or the header's).
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
// Focused Gallery routes: keep only the selected API and its prerequisites.
id: featureStory
Column {
spacing: 24
SyGlobalHeader { id: bar; width: 760; title: "Console"; tabs: [ SyTab { tabkey: "home"; text: "Home" }, SyTab { tabkey: "data"; text: "Data" }, SyTab { tabkey: "reports"; text: "Reports" } ] }
Row {
spacing: 8
SyButton { id: exampleControl1; visible: true; text: "bar.setActiveTab(1)"; variant: "secondary"; size: "small"; onClicked: bar.setActiveTab(1) }
SyButton { id: exampleControl2; visible: true; text: "bar.updateOverflowTabs()"; variant: "secondary"; size: "small"; onClicked: bar.updateOverflowTabs() }
}
Text {
text: "bar.active === " + bar.active + " bar.overflowTabs.length === " + bar.overflowTabs.length
font.family: Theme.monoFontFamily
font.pixelSize: 12
color: Theme.semantic.textSubtle
}
}
}Header with search, configured with search.
import QtQuick
import Syidax.Core
Item {
component EventLog: Rectangle {
id: logBox
property var lines: []
implicitWidth: 440
implicitHeight: Math.max(56, logText.implicitHeight + 24)
radius: 4; color: Theme.semantic.backgroundBold
function log(value) { lines = lines.slice(-3).concat([String(value)]) }
Text {
id: logText; x: 12; y: 12; width: parent.width - 24
text: logBox.lines.length ? logBox.lines.join("\n") : "Interact with the controls to see event results."
wrapMode: Text.Wrap; color: Theme.semantic.textDefault
font.family: Theme.monoFontFamily; font.pixelSize: 12
}
}
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
property QtObject settings: QtObject {
id: storyArgs
property string title: "Console"
property bool search: true
property bool information: true
property bool notification: true
}
Column {
spacing: 12
SyGlobalHeader {
width: 760
title: storyArgs.title
search: storyArgs.search
information: storyArgs.information
notification: storyArgs.notification
onSelected: (detail) => output.log(detail.tabkey)
tabs: [
SyTab { tabkey: "home"; text: "Home" },
SyTab { tabkey: "data"; text: "Data" },
SyTab { tabkey: "reports"; text: "Reports" }
]
}
EventLog { id: output }
}
}Information and notifications, configured with information, notification.
import QtQuick
import Syidax.Core
Item {
component EventLog: Rectangle {
id: logBox
property var lines: []
implicitWidth: 440
implicitHeight: Math.max(56, logText.implicitHeight + 24)
radius: 4; color: Theme.semantic.backgroundBold
function log(value) { lines = lines.slice(-3).concat([String(value)]) }
Text {
id: logText; x: 12; y: 12; width: parent.width - 24
text: logBox.lines.length ? logBox.lines.join("\n") : "Interact with the controls to see event results."
wrapMode: Text.Wrap; color: Theme.semantic.textDefault
font.family: Theme.monoFontFamily; font.pixelSize: 12
}
}
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
property QtObject settings: QtObject {
id: storyArgs
property string title: "Console"
property bool search: true
property bool information: true
property bool notification: true
}
Column {
spacing: 12
SyGlobalHeader {
width: 760
title: storyArgs.title
search: storyArgs.search
information: storyArgs.information
notification: storyArgs.notification
onSelected: (detail) => output.log(detail.tabkey)
tabs: [
SyTab { tabkey: "home"; text: "Home" },
SyTab { tabkey: "data"; text: "Data" },
SyTab { tabkey: "reports"; text: "Reports" }
]
}
EventLog { id: output }
}
}Hover or select an item for its QML example and copy button.
| Property | Type | Default | Description |
|---|---|---|---|
| string | "" | The app name after the logo (16 px medium); hidden when empty | |
| list | — | Items before the title | |
| list | — | The SyTab headers (one, or a list in brackets) | |
| list | — | Items at the right end, after the search field and the buttons | |
| bool | false | The 200 px search field; reports changed({ value }) | |
| bool | false | The help button; reports actionClick({ type: "information" }) | |
| bool | false | The bell button; reports actionClick({ type: "notification" }) | |
| int | 0 | The active tab's index; set it to switch silently, read it to know | |
| bool | false | Every tab, the search field, the information / notification buttons and the actions items inert | |
| var | [] | The collected headers, in order (maintained by the header) | |
| var | [] | The headers currently folded into the ··· menu |
| Name | Type / default | Description |
|---|---|---|
| Header width in logical pixels. Reduce it to test how tabs move into the overflow menu. |
| Method | Description |
|---|---|
Activates the tab at index and emits selected; ignored for an unknown index or a disabled tab | |
Lays the headers out again and refreshes overflowTabs; the header calls it on width and tab changes by itself |
| Signal | Arguments | When |
|---|---|---|
detail: { tabkey, index } | A tab became active by a click, Space / Enter, the arrow keys, the ··· menu or setActiveTab(). Not when active is set from a binding, not for a disabled tab | |
detail: { type } | The help ("information") or bell ("notification") button was clicked | |
detail: { value } | The search field's text changed (every edit) |
| Item | Behavior / conditions |
|---|---|
| Items before the title | |
| The app name after the logo (16 px medium); hidden when empty | |
The 200 px search field; reports changed({ value }) | |
The help button; reports actionClick({ type: "information" }) | |
The bell button; reports actionClick({ type: "notification" }) | |
| Items at the right end, after the search field and the buttons | |
| The SyTab headers (one, or a list in brackets) | |
| The active tab's index; set it to switch silently, read it to know | |
Activates the tab at index and emits selected; ignored for an unknown index or a disabled tab | |
A tab became active by a click, Space / Enter, the arrow keys, the ··· menu or setActiveTab(). Not when active is set from a binding, not for a disabled tab | |
Every tab, the search field, the information / notification buttons and the actions items inert | |
| The headers currently folded into the ··· menu | |
Lays the headers out again and refreshes overflowTabs; the header calls it on width and tab changes by itself | |
A closable header's × removes the header from the bar (the tab's own closed signal fires; the header itself has no close signal). | |
| The search field's text changed (every edit) | |
The help ("information") or bell ("notification") button was clicked | |
| Tab reaches the enabled headers, the search field, the buttons and the actions in order; on a focused header Left / Up and Right / Down move to the previous / next enabled tab (wrapping, activating it) and Space / Enter select it. |
| Item | Behavior / conditions |
|---|---|
| The SyTab headers (one, or a list in brackets) |