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.
Show several people together in a compact avatar row, with a count for additional members.
import Syidax.Core.Avatar
| Type | Definition / role |
|---|---|
| Displays a profile image, icon, letter or initials. | |
| Arranges avatars in an overlapping group and summarizes overflow. |
Previews are images of native Qt runs. Use the buttons below each image to view a result.
SyAvatarGroup lays the SyAvatar items declared inside it out in one row
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
id: story
property QtObject settings: QtObject {
id: storyArgs
property string variant: "stack"
property string size: "medium"
property int maxCount: 3
property bool clickable: false
}
Column {
spacing: 12
SyAvatarGroup {
variant: storyArgs.variant
size: storyArgs.size
maxCount: storyArgs.maxCount
clickable: storyArgs.clickable
onSelected: (detail) => output.log(("selected: %1").arg(detail.text))
SyAvatar { text: "Jane Doe"; variant: "purple" }
SyAvatar { text: "John Smith"; variant: "blue" }
SyAvatar { text: "Ada Lovelace"; variant: "green" }
SyAvatar { text: "Grace Hopper"; variant: "orange" }
SyAvatar { text: "Alan Turing"; variant: "teal" }
}
EventLog { id: output }
}
}variant sets how the members are placed.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
readonly property string members: [
"SyAvatar { text: " + JSON.stringify("Jane Doe") + "; variant: \"purple\" }",
"SyAvatar { text: " + JSON.stringify("John Smith") + "; variant: \"blue\" }",
"SyAvatar { text: " + JSON.stringify("Ada Lovelace") + "; variant: \"green\" }"
].join("\n")
Column {
spacing: 16
SyAvatarGroup {
SyAvatar { text: "Jane Doe"; variant: "purple" }
SyAvatar { text: "John Smith"; variant: "blue" }
SyAvatar { text: "Ada Lovelace"; variant: "green" }
}
SyAvatarGroup {
variant: "grid"
SyAvatar { text: "Jane Doe"; variant: "purple" }
SyAvatar { text: "John Smith"; variant: "blue" }
SyAvatar { text: "Ada Lovelace"; variant: "green" }
}
}
}selected(detail) is the group's only signal; detail is { letter, text, icon, image } of the member that was clicked (icon / image as strings).
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
SyAvatarGroup {
maxCount: 2; clickable: true
onSelected: (detail) => output.log(("selected: %1").arg(detail.text))
SyAvatar { text: "Jane Doe"; variant: "purple" }
SyAvatar { text: "John Smith"; variant: "blue" }
SyAvatar { text: "Ada Lovelace"; variant: "green" }
SyAvatar { text: "Grace Hopper"; variant: "orange" }
}
EventLog { id: output }
}
}Avatar grid, configured with variant.
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
id: story
property QtObject settings: QtObject {
id: storyArgs
property string variant: "grid"
property string size: "medium"
property int maxCount: 3
property bool clickable: false
}
Column {
spacing: 12
SyAvatarGroup {
variant: storyArgs.variant
size: storyArgs.size
maxCount: storyArgs.maxCount
clickable: storyArgs.clickable
onSelected: (detail) => output.log(("selected: %1").arg(detail.text))
SyAvatar { text: "Jane Doe"; variant: "purple" }
SyAvatar { text: "John Smith"; variant: "blue" }
SyAvatar { text: "Ada Lovelace"; variant: "green" }
SyAvatar { text: "Grace Hopper"; variant: "orange" }
SyAvatar { text: "Alan Turing"; variant: "teal" }
}
EventLog { id: output }
}
}Hover or select an item for its QML example and copy button.
| Property | Type | Default | Description |
|---|---|---|---|
| — | — | The SyAvatar members (declared or produced by a Repeater). | |
| string | "stack" | stack (overlap 4 / 6 / 8 px by size) or grid (gap 2 / 4 / 6 px). | |
| string | "medium" | small 24 · medium 32 · large 40; written into every member. | |
| bool | false | true makes every member clickable and enables the "+n" list rows; false leaves a member's own clickable alone. | |
| int | 0 | Members shown before the "+n" disc; 0 = all. | |
| var (read-only) | — | The member items. | |
| int | — | How many are drawn | |
| var (read-only) | — | the hidden members. | |
| real (read-only) | — | The avatar diameter | |
| real (read-only) | — | the x distance between members. |
| Method | Description |
|---|---|
| Re-applies size, clickability, visibility and positions to the members (runs automatically on every relevant change). |
| Signal | Arguments | When |
|---|---|---|
detail: { letter, text, icon, image } | A visible member was clicked (relayed from the member) or a "+n" list row was clicked; both need clickable. |
| Item | Behavior / conditions |
|---|---|
The avatars are the group's children that look like SyAvatar (they expose initials). | |
At completion, and whenever the children, size, clickable, maxCount or variant change, layout() runs: every member gets the group's size (and clickable: true when the group is clickable — a member's own clickable is left alone otherwise), visible when its index is below shownCount, x = index × step, y = 0, z = index, and its selected is connected to the group's. | |
At completion, and whenever the children, size, clickable, maxCount or variant change, layout() runs: every member gets the group's size (and clickable: true when the group is clickable — a member's own clickable is left alone otherwise), visible when its index is below shownCount, x = index × step, y = 0, z = index, and its selected is connected to the group's. With the group clickable, the disc and the rows show the pointer cursor, the rows highlight on hover, and a click on a row emits selected with that member's detail and closes the list. The group's selected is the member's selected, relayed: it fires for a visible member only when the member is clickable (every member is when the group is clickable; otherwise the member's own clickable counts) and not disabled. Rows of the list fire only when the group is clickable. | |
Members shown before the "+n" disc; 0 = all. | |
stack (overlap 4 / 6 / 8 px by size) or grid (gap 2 / 4 / 6 px). | |
| Re-applies size, clickability, visibility and positions to the members (runs automatically on every relevant change). | |
small 24 · medium 32 · large 40; written into every member. | |
true makes every member clickable and enables the "+n" list rows; false leaves a member's own clickable alone. | |
At completion, and whenever the children, size, clickable, maxCount or variant change, layout() runs: every member gets the group's size (and clickable: true when the group is clickable — a member's own clickable is left alone otherwise), visible when its index is below shownCount, x = index × step, y = 0, z = index, and its selected is connected to the group's. | |
At completion, and whenever the children, size, clickable, maxCount or variant change, layout() runs: every member gets the group's size (and clickable: true when the group is clickable — a member's own clickable is left alone otherwise), visible when its index is below shownCount, x = index × step, y = 0, z = index, and its selected is connected to the group's. implicitWidth = diameter + (shownCount − 1 + (remaining ? 1 : 0)) × step (0 with no members), implicitHeight = diameter. With maxCount > 0, shownCount = min(maxCount, count) and remaining holds the members beyond it; they are hidden and a "+n" disc (same diameter, lightgray tokens, n = remaining.length) is drawn after the last visible member. | |
At completion, and whenever the children, size, clickable, maxCount or variant change, layout() runs: every member gets the group's size (and clickable: true when the group is clickable — a member's own clickable is left alone otherwise), visible when its index is below shownCount, x = index × step, y = 0, z = index, and its selected is connected to the group's. | |
At completion, and whenever the children, size, clickable, maxCount or variant change, layout() runs: every member gets the group's size (and clickable: true when the group is clickable — a member's own clickable is left alone otherwise), visible when its index is below shownCount, x = index × step, y = 0, z = index, and its selected is connected to the group's. stack: step = diameter − (4 | 6 | 8); grid: step = diameter + (2 | 4 | 6). implicitWidth = diameter + (shownCount − 1 + (remaining ? 1 : 0)) × step (0 with no members), implicitHeight = diameter. | |
At completion, and whenever the children, size, clickable, maxCount or variant change, layout() runs: every member gets the group's size (and clickable: true when the group is clickable — a member's own clickable is left alone otherwise), visible when its index is below shownCount, x = index × step, y = 0, z = index, and its selected is connected to the group's. | |
A visible member was clicked (relayed from the member) or a "+n" list row was clicked; both need clickable. | |
diameter is 24 / 32 / 40 for size small / medium / large. stack: step = diameter − (4 | 6 | 8); grid: step = diameter + (2 | 4 | 6). implicitWidth = diameter + (shownCount − 1 + (remaining ? 1 : 0)) × step (0 with no members), implicitHeight = diameter. | |
implicitWidth = diameter + (shownCount − 1 + (remaining ? 1 : 0)) × step (0 with no members), implicitHeight = diameter. | |
implicitWidth = diameter + (shownCount − 1 + (remaining ? 1 : 0)) × step (0 with no members), implicitHeight = diameter. With maxCount > 0, shownCount = min(maxCount, count) and remaining holds the members beyond it; they are hidden and a "+n" disc (same diameter, lightgray tokens, n = remaining.length) is drawn after the last visible member. | |
implicitWidth = diameter + (shownCount − 1 + (remaining ? 1 : 0)) × step (0 with no members), implicitHeight = diameter. | |
Hovering the disc opens a 160 px popup under it listing each hidden member as a 24 px disc with its initials and colours plus its label (tooltipContent / text / letter, or "Avatar"). | |
Hovering the disc opens a 160 px popup under it listing each hidden member as a 24 px disc with its initials and colours plus its label (tooltipContent / text / letter, or "Avatar"). | |
Hovering the disc opens a 160 px popup under it listing each hidden member as a 24 px disc with its initials and colours plus its label (tooltipContent / text / letter, or "Avatar"). | |
Hovering the disc opens a 160 px popup under it listing each hidden member as a 24 px disc with its initials and colours plus its label (tooltipContent / text / letter, or "Avatar"). | |
With the group clickable, the disc and the rows show the pointer cursor, the rows highlight on hover, and a click on a row emits selected with that member's detail and closes the list. | |
The group's selected is the member's selected, relayed: it fires for a visible member only when the member is clickable (every member is when the group is clickable; otherwise the member's own clickable counts) and not disabled. |
| Item | Behavior / conditions |
|---|---|
SyAvatar (the members), SyTooltip (if a hover name is wanted on single avatars), SyCard / SyTable (where member rows usually appear). |