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.
Toggle a setting between on and off, such as notifications or automatic saving.
import Syidax.Core.Switch
| Type | Definition / role |
|---|---|
| On/off form field styled as a sliding switch. |
Previews are images of native Qt runs. Use the buttons below each image to view a result.
SySwitch is the on / off toggle: a track with a sliding handle and the label beside it.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
property QtObject settings: QtObject {
id: storyArgs
property string label: "Notifications"
property bool checked: true
property string size: "medium"
property bool loading: false
property bool disabled: false
property bool readonly: false
property bool required: false
}
SySwitch {
label: storyArgs.label
checked: storyArgs.checked
size: storyArgs.size
loading: storyArgs.loading
disabled: storyArgs.disabled
readonly: storyArgs.readonly
required: storyArgs.required
onCheckedChanged: if (storyArgs.checked !== checked) storyArgs.checked = checked
}
}size has two values: medium (the default) draws a 44 × 22 px track with an 18 px handle, small a 28 × 16 px track with a 12 px handle; the "|" and "○" marks on the track and the loading ring scale with it.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
Column {
spacing: 12
SySwitch { label: "Notifications"; checked: true }
SySwitch { label: "Notifications"; checked: true; size: "small" }
}
}Compare the configuration and result of loading.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
Column {
spacing: 12
SySwitch {
id: sync
label: "Sync in the background"
onChanged: (checked) => { loading = true; saveTimer.restart() }
}
Timer { id: saveTimer; interval: 1500; onTriggered: sync.loading = false }
SySwitch { label: "Saving…"; checked: true; loading: true }
SySwitch { label: "Saving…"; loading: true; size: "small" }
}
}disabled: true grays the track and the label and makes the switch inert: no click, no keys, Tab skips it, the arrow cursor.
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: 12
SySwitch { id: featureTarget0; visible: true; label: "Disabled"; disabled: true }
SySwitch { id: featureTarget1; visible: true; label: "Disabled"; disabled: true; checked: true }
SySwitch { id: featureTarget2; visible: true; label: "Read only"; readonly: true }
SySwitch { id: featureTarget3; visible: true; label: "Read only"; readonly: true; checked: true }
}
}The switch has three signals, all carrying the current checked boolean rather than an object.
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
Column {
spacing: 12
SySwitch {
label: "Dark mode"
onChanged: (checked) => output.log(("changed: %1").arg(checked))
}
EventLog { id: output }
}
}The switch's functions, shown by the buttons in the demo (a required Notifications switch):
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
SySwitch { id: notify; label: "Notifications"; required: true }
Flow {
width: 560
spacing: 8
SyButton { id: exampleControl1; visible: true; text: "notify.toggle()"; variant: "secondary"; size: "small"; onClicked: notify.toggle() }
SyButton { id: exampleControl2; visible: true; text: "notify.setFocus()"; variant: "secondary"; size: "small"; onClicked: notify.setFocus() }
SyButton { id: exampleControl3; visible: true; text: "notify.checkValidity()"; variant: "secondary"; size: "small"; onClicked: output.log("checkValidity() → " + notify.checkValidity()) }
SyButton { visible: true; text: "notify.reportValidity()"; variant: "secondary"; size: "small"; onClicked: output.log("reportValidity() → " + notify.reportValidity()) }
SyButton { visible: true; text: "notify.getValidStatus()"; variant: "secondary"; size: "small"; onClicked: output.log("getValidStatus() → " + JSON.stringify(notify.getValidStatus())) }
}
EventLog { id: output }
}
}Compare the untouched field, validation error and reset result.
import QtQuick
import Syidax.Core
Column {
width: 440; spacing: 12
SySwitch {
id: field; width: parent.width; name: "selection"; required: true
label: "Required selection"
error: "Complete this field before continuing."
}
Row {
spacing: 8
SyButton { id: check; text: "Validate"; onClicked: field.reportValidity() }
SyButton { id: reset; text: "Reset"; onClicked: field.reset() }
}
Text { text: "Status: " + (field.invalid ? "Invalid" : "Ready"); color: Theme.semantic.textDefault }
}Show an application-specific error, then reset the field.
import QtQuick
import Syidax.Core
Column {
width: 440; spacing: 12
SySwitch {
id: field; width: parent.width; name: "selection"; required: true
label: "Required selection"
checked: true
error: "This selection is currently unavailable. Choose another."
}
Row {
spacing: 8
SyButton { id: check; text: "Show error"; onClicked: field.setCustomError() }
SyButton { id: reset; text: "Reset"; onClicked: field.reset() }
}
Text { text: "Status: " + (field.invalid ? "Invalid" : "Ready"); color: Theme.semantic.textDefault }
}Hover or select an item for its QML example and copy button.
| Item | Behavior / conditions |
|---|---|
The shared field properties (name, required, disabled, message, error, touched, submitted, customError, validStatus, valid, invalid, ready) are described on the Form page; the ones below are the switch's own or have switch-specific meaning. | |
The shared field properties (name, required, disabled, message, error, touched, submitted, customError, validStatus, valid, invalid, ready) are described on the Form page; the ones below are the switch's own or have switch-specific meaning. | |
The shared field properties (name, required, disabled, message, error, touched, submitted, customError, validStatus, valid, invalid, ready) are described on the Form page; the ones below are the switch's own or have switch-specific meaning. | |
The shared field properties (name, required, disabled, message, error, touched, submitted, customError, validStatus, valid, invalid, ready) are described on the Form page; the ones below are the switch's own or have switch-specific meaning. | |
The shared field properties (name, required, disabled, message, error, touched, submitted, customError, validStatus, valid, invalid, ready) are described on the Form page; the ones below are the switch's own or have switch-specific meaning. | |
The shared field properties (name, required, disabled, message, error, touched, submitted, customError, validStatus, valid, invalid, ready) are described on the Form page; the ones below are the switch's own or have switch-specific meaning. | |
The shared field properties (name, required, disabled, message, error, touched, submitted, customError, validStatus, valid, invalid, ready) are described on the Form page; the ones below are the switch's own or have switch-specific meaning. | |
The shared field properties (name, required, disabled, message, error, touched, submitted, customError, validStatus, valid, invalid, ready) are described on the Form page; the ones below are the switch's own or have switch-specific meaning. | |
The shared field properties (name, required, disabled, message, error, touched, submitted, customError, validStatus, valid, invalid, ready) are described on the Form page; the ones below are the switch's own or have switch-specific meaning. | |
The shared field properties (name, required, disabled, message, error, touched, submitted, customError, validStatus, valid, invalid, ready) are described on the Form page; the ones below are the switch's own or have switch-specific meaning. | |
The shared field properties (name, required, disabled, message, error, touched, submitted, customError, validStatus, valid, invalid, ready) are described on the Form page; the ones below are the switch's own or have switch-specific meaning. | |
The shared field properties (name, required, disabled, message, error, touched, submitted, customError, validStatus, valid, invalid, ready) are described on the Form page; the ones below are the switch's own or have switch-specific meaning. |
| Property | Type | Default | Description |
|---|---|---|---|
| bool | false | The state. Flipped by a click on the track, Space / Enter and toggle(); every change emits changed. | |
| string | "" | The text beside the track, with * when required. Hidden when empty. | |
| string | "medium" | medium (44 × 22 px) · small (28 × 16 px). Any other value draws medium. | |
| bool | false | Spinner in the handle; the switch ignores every flip until it is cleared. Does not change checked. | |
| string | "on" | What the owning SyForm submits under name while on. | |
| var (read-only) | — | value while on, null otherwise — what SyForm.values() stores. | |
| string | "" | Key in the owning SyForm's values(). | |
| bool | false | Off → valueMissing; adds the * mark. | |
| bool | false | Inert and grayed; not a Tab stop; always valid; not submitted. | |
| bool | false | Focusable but unchangeable; always valid; still submitted. | |
| string | "" | Helper line under the switch | |
| string | "" | custom error copy for the required check. | |
| bool (read-only) | — | The track has active focus | |
| bool (read-only) | — | the pointer is over it (false while disabled) | |
| bool (read-only) | — | it is being pressed. | |
| bool (read-only) | — | Not disabled, not read-only, not loading — a flip is possible. | |
| read-only | — | The geometry for the current size. | |
| read-only | — | The geometry for the current size. | |
| read-only | — | The geometry for the current size. | |
| read-only | — | The geometry for the current size. | |
| string (read-only) | — | enabled · hover · focus · pressed · loading · readonly · disabled. | |
| bool | false | The field base's title line, turned off for the switch (the label sits beside the track). |
| Method | Description |
|---|---|
The click: flips checked (changed fires). Ignored while disabled, readonly or loading. | |
Give the track keyboard focus / take it away (focused / blured fire; the blur sets touched). | |
Give the track keyboard focus / take it away (focused / blured fire; the blur sets touched). | |
true unless a required switch is off (or a custom error is set). Silent. | |
| Same verdict, and the error line shows from now on. | |
"" · valueMissing · custom. | |
"" · valueMissing · custom. | |
Force / lift the custom status; the error shows at once. | |
Force / lift the custom status; the error shows at once. | |
Restores checked (to initialChecked, the value the switch was created with) and value, and clears the touched, reported and custom flags. |
| Signal | Arguments | When |
|---|---|---|
checked: bool — the new state | checked changed after load, by the user or from code. Not for the initial value; not while disabled, read-only or loading block the flip. | |
checked: bool — the current state | The track gained active focus. | |
checked: bool — the current state | The track lost focus; touched is set first. |
| Item | Behavior / conditions |
|---|---|
The state. Flipped by a click on the track, Space / Enter and toggle(); every change emits changed. | |
The click: flips checked (changed fires). Ignored while disabled, readonly or loading. | |
checked changed after load, by the user or from code. Not for the initial value; not while disabled, read-only or loading block the flip. | |
Spinner in the handle; the switch ignores every flip until it is cleared. Does not change checked. | |
What the owning SyForm submits under name while on. | |
value while on, null otherwise — what SyForm.values() stores. | |
Key in the owning SyForm's values(). | |
Off → valueMissing; adds the * mark. | |
required makes an off switch valueMissing; the error line under the switch ("This field is required", or error) appears once the switch was left (touched) or reported (submitted). | |
required makes an off switch valueMissing; the error line under the switch ("This field is required", or error) appears once the switch was left (touched) or reported (submitted). | |
required makes an off switch valueMissing; the error line under the switch ("This field is required", or error) appears once the switch was left (touched) or reported (submitted). | |
message draws a helper line under it. | |
| Inert and grayed; not a Tab stop; always valid; not submitted. | |
| Focusable but unchangeable; always valid; still submitted. | |
| Tab stops on the track unless it is disabled (a read-only switch is still a Tab stop); Space, Return and Enter toggle. The focus ring is drawn 2 px outside the track while it has focus and is not disabled. The hand cursor shows while the switch is interactive (not disabled, read-only or loading). | |
The handle slides in 200 ms and the track color cross-fades in 200 ms; while the track is pressed the handle stretches into a pill (6 px wider, 4 px when small) and springs back on release. All of it is skipped under Theme.reducedMotion. | |
disabled grays everything, blocks every interaction and the Tab stop, and the switch is skipped by SyForm.values(). | |
Tones: disabled > readonly > loading > pressed > focus > hover > enabled, in the checked or unchecked palette. | |
Tones: disabled > readonly > loading > pressed > focus > hover > enabled, in the checked or unchecked palette. | |
Tones: disabled > readonly > loading > pressed > focus > hover > enabled, in the checked or unchecked palette. | |
| The track gained active focus. | |
The track lost focus; touched is set first. | |
medium (44 × 22 px) · small (28 × 16 px). Any other value draws medium. | |
size is medium (44 × 22, handle 18) or small (28 × 16, handle 12); the label is 14 px in both. | |
The text beside the track, with * when required. Hidden when empty. | |
Colors come from Theme.switchFamily by state and follow Theme.scheme; the handle is the page background color. |