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.
Attach a count or status dot to an item, such as unread messages on a notification button.
import Syidax.Core.Badge
| Type | Definition / role |
|---|---|
| Adds a count, dot or status label to content. |
Previews are images of native Qt runs. Use the buttons below each image to view a result.
SyBadge pins a small count or a dot to one corner of whatever is declared inside it — a button, an icon, an avatar — or, with no wrapped item, draws the badge inline automatically.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
id: story
property QtObject settings: QtObject {
id: storyArgs
property int value: 5
property int overflowCount: 0
property bool dot: false
property bool hidden: false
property bool standalone: false
property string position: "topRight"
property string size: "medium"
property string variant: "red"
}
Item {
width: 200
height: 56
SyBadge {
x: 12
y: 12
value: storyArgs.value
overflowCount: storyArgs.overflowCount
dot: storyArgs.dot
hidden: storyArgs.hidden
standalone: storyArgs.standalone
position: storyArgs.position
size: storyArgs.size
variant: storyArgs.variant
SyButton { visible: !storyArgs.standalone; text: "Inbox" }
}
}
}variant picks the badge color from five semantic names: "red" (the default — errors, alerts), "yellow" (warnings), "green" (success), "blue" (information) and "gray" (neutral).
import QtQuick
import Syidax.Core
pragma ComponentBehavior: Bound
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
id: story
readonly property var variants: ["red", "yellow", "green", "blue", "gray"]
Row {
spacing: 24
Repeater {
model: story.variants
delegate: Column {
id: cell
required property string modelData
spacing: 8
SyBadge { anchors.horizontalCenter: parent.horizontalCenter; standalone: true; value: 8; variant: cell.modelData }
Text { anchors.horizontalCenter: parent.horizontalCenter; text: cell.modelData; font.family: Theme.fontFamily; font.pixelSize: 11; color: Theme.semantic.textSubtle }
}
}
}
}size is "medium" (default, 20 px tall) or "small" (16 px).
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
property QtObject settings: QtObject {
id: storyArgs
property string size: "medium"
}
Item {
width: 200
height: 56
SyBadge {
x: 12
y: 12
value: 12
size: storyArgs.size
SyButton { text: "Inbox" }
}
}
}dot: true replaces the number with a plain dot — 8 px at size: "medium", 6 px at "small" — for "something is here" when the exact count does not matter (unread state, a pending update).
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
property QtObject settings: QtObject {
id: storyArgs
property bool dot: true
property string size: "medium"
}
Item {
width: 200
height: 56
SyBadge {
x: 12
y: 12
dot: storyArgs.dot
value: 3
size: storyArgs.size
SyButton { text: "Inbox" }
}
}
}position names the corner of the wrapped content the badge sits on: "topLeft", "topRight" (default), "bottomLeft" or "bottomRight".
import QtQuick
import Syidax.Core
pragma ComponentBehavior: Bound
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
id: story
readonly property var positions: ["topLeft", "topRight", "bottomLeft", "bottomRight"]
Row {
spacing: 40
leftPadding: 12
topPadding: 12
bottomPadding: 12
Repeater {
model: story.positions
delegate: Column {
id: cell
required property string modelData
spacing: 12
SyBadge {
anchors.horizontalCenter: parent.horizontalCenter
value: 3
position: cell.modelData
Rectangle { width: 48; height: 48; color: Theme.semantic.backgroundBold; radius: 4 }
}
Text { anchors.horizontalCenter: parent.horizontalCenter; text: cell.modelData; font.family: Theme.fontFamily; font.pixelSize: 11; color: Theme.semantic.textSubtle }
}
}
}
}overflowCount caps the number: when it is greater than 0 and value exceeds it, the badge reads the cap followed by "+" (with overflowCount: 99, 120 shows "99+"; 99 itself still shows "99").
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
property QtObject settings: QtObject {
id: storyArgs
property int value: 120
property int overflowCount: 99
}
Item {
width: 200
height: 56
SyBadge {
x: 12
y: 12
value: storyArgs.value
overflowCount: storyArgs.overflowCount
SyButton { text: "Inbox" }
}
}
}standalone: true draws the badge on its own, with no wrapped content: the item's size becomes the badge's size (20 × 20 px for a one-digit count at medium), so it can sit inline with text or in a Row.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
Row {
spacing: 8
Text { anchors.verticalCenter: parent.verticalCenter; text: "Inbox"; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
SyBadge { anchors.verticalCenter: parent.verticalCenter; standalone: true; value: 12 }
SyBadge { anchors.verticalCenter: parent.verticalCenter; standalone: true; value: 120; overflowCount: 99; variant: "blue" }
SyBadge { anchors.verticalCenter: parent.verticalCenter; standalone: true; dot: true; variant: "green" }
}
}Bottom-left badge, configured with position.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
id: story
property QtObject settings: QtObject {
id: storyArgs
property int value: 5
property int overflowCount: 0
property bool dot: false
property bool hidden: false
property bool standalone: false
property string position: "bottomLeft"
property string size: "medium"
property string variant: "red"
}
Item {
width: 200
height: 56
SyBadge {
x: 12
y: 12
value: storyArgs.value
overflowCount: storyArgs.overflowCount
dot: storyArgs.dot
hidden: storyArgs.hidden
standalone: storyArgs.standalone
position: storyArgs.position
size: storyArgs.size
variant: storyArgs.variant
SyButton { visible: !storyArgs.standalone; text: "Inbox" }
}
}
}Hover or select an item for its QML example and copy button.
| Property | Type | Default | Description |
|---|---|---|---|
| list (default property) | — | The wrapped content; the badge sits on one of its corners and takes its size. Hidden when standalone is on. | |
| int | 0 | The count. Shown rounded down; 0 is drawn as "0". | |
| int | 0 | Cap: when greater than 0 and value exceeds it, the badge reads "N+" with N = overflowCount. | |
| bool | false | Draw a plain dot (8 / 6 px) instead of the count; value and overflowCount are then ignored. | |
| bool | false | Hide the mark, keep the content and the size. | |
| bool | automatic | Defaults to true with no wrapped visual item; otherwise false. Explicit true hides wrapped content and uses the mark size. | |
| string | "topRight" | The corner: "topLeft" · "topRight" · "bottomLeft" · "bottomRight". | |
| string | "medium" | "medium" = 20 px count / 8 px dot · "small" = 16 px count / 6 px dot. | |
| string | "red" | "red" · "yellow" · "green" · "blue" · "gray" — the semantic color. | |
| string (read-only) | — | The text actually drawn: "" for a dot, "N+" when capped, otherwise the count. | |
| real (read-only) | — | The mark's height (count) or diameter (dot) for the current size and dot. | |
| real (read-only) | — | How far the mark's center sits outside the corner. | |
| color (read-only) | — | The theme colors resolved from variant. | |
| color (read-only) | — | The theme colors resolved from variant. |
| Item | Behavior / conditions |
|---|---|
SyBadge declares no methods. |
| Item | Behavior / conditions |
|---|---|
SyBadge declares no signals. The property change signals of QML are available — onDisplayValueChanged is the useful one. |
| Item | Behavior / conditions |
|---|---|
whatever is declared inside the badge is its content (the default property). The badge's implicitWidth / implicitHeight equal the content's size, so it drops into any layout exactly like the content alone would; the mark overhangs the corner and is not counted, so an ancestor with clip: true cuts it off. | |
The text actually drawn: "" for a dot, "N+" when capped, otherwise the count. | |
Cap: when greater than 0 and value exceeds it, the badge reads "N+" with N = overflowCount. 0 = never cap. | |
The count. Shown rounded down; 0 is drawn as "0". | |
a count badge is 20 px tall ("medium") or 16 px ("small"), at least as wide as it is tall, and gains 6 px of padding per side from two characters on. A dot is 8 / 6 px. The mark is centered on the corner: offset 10 / 8 px for a count, 4 / 3 px for a dot. The digits are 12 px bold. | |
The corner: "topLeft" · "topRight" · "bottomLeft" · "bottomRight". | |
| Defaults to true with no wrapped visual item; otherwise false. Explicit true hides wrapped content and uses the mark size. | |
| Hide the mark, keep the content and the size. | |
"red" · "yellow" · "green" · "blue" · "gray" — the semantic color. | |
| the badge does not handle pointer input; clicks fall through to the content. |
| Item | Behavior / conditions |
|---|---|
SyTag for text labels, SyAvatar and SyIcon as typical content, SyButton for an inbox-style button with a count. |