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 the path to the current page and let users return to a parent level.
import Syidax.Core.Breadcrumb
| Type | Definition / role |
|---|---|
| Container that lays out breadcrumb items and their separators. | |
| One labelled destination in a SyBreadcrumb path. |
Previews are images of native Qt runs. Use the buttons below each image to view a result.
SyBreadcrumb shows the path to the current page: the SyBreadcrumbItem steps declared inside it in a row, a separator between them and none after the last.
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 separator: "slash"
}
Column {
spacing: 12
SyBreadcrumb {
separator: storyArgs.separator
onSelected: (index) => output.log(("selected: %1").arg(index))
SyBreadcrumbItem { text: "Home" }
SyBreadcrumbItem { text: "Reports" }
SyBreadcrumbItem { text: "Q3"; active: true }
}
EventLog { id: output }
}
}separator on SyBreadcrumb chooses the glyph drawn after every step but the last: "slash" (the default) or "arrow".
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
readonly property string items: [
"SyBreadcrumbItem { text: " + JSON.stringify("Home") + " }",
"SyBreadcrumbItem { text: " + JSON.stringify("Reports") + " }",
"SyBreadcrumbItem { text: " + JSON.stringify("Q3") + "; active: true }"
].join("\n")
Column {
spacing: 12
SyBreadcrumb {
SyBreadcrumbItem { text: "Home" }
SyBreadcrumbItem { text: "Reports" }
SyBreadcrumbItem { text: "Q3"; active: true }
}
SyBreadcrumb {
separator: "arrow"
SyBreadcrumbItem { text: "Home" }
SyBreadcrumbItem { text: "Reports" }
SyBreadcrumbItem { text: "Q3"; active: true }
}
}
}active: true marks the current page: the item is drawn in the current-page color, is not clickable, takes no keyboard focus and never emits selected.
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 bool disabled: true
}
SyBreadcrumb {
SyBreadcrumbItem { text: "Home" }
SyBreadcrumbItem { id: featureTarget0; text: "Reports"; disabled: storyArgs.disabled }
SyBreadcrumbItem { id: featureTarget1; text: "Q3"; active: true }
}
}Compare the configuration and result of selected.
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
SyBreadcrumb {
id: path
onSelected: (index) => {
output.log(("selected: %1 · %2").arg(index).arg(path.items[index].text))
for (let i = 0; i < path.items.length; i += 1) path.items[i].active = i === index
}
SyBreadcrumbItem { text: "Home"; onSelected: output.log(("%1 clicked").arg("Home")) }
SyBreadcrumbItem { text: "Reports" }
SyBreadcrumbItem { text: "Q3"; active: true }
}
EventLog { id: output }
}
}Arrow separators, configured with separator.
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 separator: "arrow"
}
Column {
spacing: 12
SyBreadcrumb {
separator: storyArgs.separator
onSelected: (index) => output.log(("selected: %1").arg(index))
SyBreadcrumbItem { text: "Home" }
SyBreadcrumbItem { text: "Reports" }
SyBreadcrumbItem { text: "Q3"; active: true }
}
EventLog { id: output }
}
}Slash separators, configured with separator.
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 separator: "slash"
}
Column {
spacing: 12
SyBreadcrumb {
separator: storyArgs.separator
onSelected: (index) => output.log(("selected: %1").arg(index))
SyBreadcrumbItem { text: "Home" }
SyBreadcrumbItem { text: "Reports" }
SyBreadcrumbItem { text: "Q3"; active: true }
}
EventLog { id: output }
}
}Hover or select an item for its QML example and copy button.
| Property | Type | Default | Description |
|---|---|---|---|
| list (default property) | — | The SyBreadcrumbItem steps, in order | |
| string | "slash" | "slash" · "arrow", handed to every item; an item's own separator wins | |
| list (read-only) | — | The items inside, in order (what selected(index) indexes) |
| Property | Type | Default | Description |
|---|---|---|---|
| string | "" | The step label | |
| bool | false | The current page: current color, not clickable, not focusable | |
| bool | false | Dimmed to 60 %, not clickable, not focusable | |
| string | "" | "slash" · "arrow" for the glyph after this item; empty = the breadcrumb's | |
| string | "slash" | Set by the breadcrumb: the inherited separator | |
| bool | false | no glyph after this item | |
| bool (read-only) | — | Neither active nor disabled | |
| string (read-only) | — | The separator in effect for this item |
| Method | Description |
|---|---|
Emits selected as a click would; ignored when the item is active or disabled |
| Signal | Arguments | When |
|---|---|---|
index: int | An interactive item was clicked, or Enter / Space pressed on it while focused; index is its position from 0 | |
| — | This item was clicked (or Enter / Space); emitted just before the breadcrumb's. Never for an active or disabled item |
| Item | Behavior / conditions |
|---|---|
| The step label | |
The breadcrumb hands every item the separator (parentSeparator) and tells the last one it is last (isLast); it does this on creation, when separator changes and when the items change. | |
The breadcrumb hands every item the separator (parentSeparator) and tells the last one it is last (isLast); it does this on creation, when separator changes and when the items change. | |
"slash" · "arrow" for the glyph after this item; empty = the breadcrumb's | |
"slash" · "arrow", handed to every item; an item's own separator wins | |
| The current page: current color, not clickable, not focusable | |
| Dimmed to 60 %, not clickable, not focusable | |
| This item was clicked (or Enter / Space); emitted just before the breadcrumb's. Never for an active or disabled item | |
| Interactive items are in the Tab order and show a 1 px outline while focused; Enter and Space act as a click. | |
| The breadcrumb's implicit size is the row of items (22 px tall); place it in a layout or anchor it. |
| Item | Behavior / conditions |
|---|---|
SyNav lists the places to go; SySteps shows progress through a process; SyGlobalHeader is where a breadcrumb often sits beneath. |