QT QUICK · C++ · PYTHON

One design language.
Native applications.

Build desktop interfaces with QML components, shared tokens and practical examples you can run yourself.

Get started Explore components →

QML Core is a separate product. C++ and Python hosts share the same QML screens.

Syidax QML workbench running in the native application — A real Qt Quick application, built with Syidax Core.

QML CORE

Components

Search components

56 of 56 components

START WITH A WORKING APP

From download to your first window

C++ · CMake

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 workbench

Python · PySide6

Use 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 records

Run 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.

Tested Windows configurations

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.

Two complete application examples

Step-by-step captures from the running Windows applications. Play, pause and inspect each state.

Workbench: mark a task done, save changes and see release progress update.

Record Manager: preserve a failed save, retry, search and confirm before deleting.

See the components in context

TRY IT YOURSELF

The native Gallery

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

Download QML examples and sample assets

QML Core

$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 →

Troubleshooting

Module not found

The --qml path must contain the Syidax folder. Python uses qml-pure. Run from the unzipped SDK, independently of the source repository.

License is inactive or frozen

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.

Qt or plugin mismatch

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 or icons missing

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.

Save failure or corrupt settings

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.

← All components

Steps

Show the current stage and overall progress of a process such as setup or checkout.

import Syidax.Core.Steps

Supported QML types

Type	Definition / role
	Container showing the order and current state of a multi-step process.
	One labelled stage inside SySteps, with its status and optional description.

Previews are images of native Qt runs. Use the buttons below each image to view a result.

01 Basic composition

SySteps shows progress through a process: the SyStep items declared inside it, each a numbered disc with a title and an optional description, joined by a tail line.

Basic composition · Default — Qt capture · image

Default execution

QML code

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 int current: 1
        property bool clickable: false
        property bool complete: false
        property string type: "horizontal"
        property string size: "medium"
        property int startIndex: 0
    }

    readonly property string members: [
        "SyStep { title: " + JSON.stringify("Cart") + "; description: " + JSON.stringify("3 items") + " }",
        "SyStep { title: " + JSON.stringify("Address") + " }",
        "SyStep { title: " + JSON.stringify("Payment") + " }",
        "SyStep { title: " + JSON.stringify("Done") + " }"
    ].join("\n")

    Column {
        spacing: 12
        SySteps {
            width: storyArgs.type === "vertical" ? implicitWidth : 560
            current: storyArgs.current
            clickable: storyArgs.clickable
            complete: storyArgs.complete
            type: storyArgs.type
            size: storyArgs.size
            startIndex: storyArgs.startIndex
            onSelected: (index) => output.log(("selected: step %1").arg(index))
            SyStep { title: "Cart"; description: "3 items" }
            SyStep { title: "Address" }
            SyStep { title: "Payment" }
            SyStep { title: "Done" }
        }
        EventLog { id: output }
    }

}

02 status · loading · disabled

Each step draws itself from currentStatus, which is decided in this order:

status · loading · disabled · Default — Qt capture · image

Default execution

QML code

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

    SySteps {
        width: 560
        current: 2
        SyStep { title: "Cart" }
        SyStep { id: featureTarget0; title: "Address"; status: "error" }
        SyStep { id: featureTarget1; title: "Payment"; loading: true }
        SyStep { id: featureTarget2; title: "Done"; disabled: true }
    }
}

03 type · size

Compare the configuration and result of type · size.

type · size · Default — Qt capture · image

QML code

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 string size: "medium"
    }

    

    SySteps { id: featureTarget0;
        type: "vertical"
        current: 1
        size: storyArgs.size
        SyStep { title: "Cart"; description: "3 items" }
        SyStep { title: "Address" }
        SyStep { title: "Payment" }
    }
}

04 selected

selected(index: int) fires when the user clicks a step while the container's clickable is true.

Default execution

QML code

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
        SySteps {
            id: checkout
            width: 560; current: 0; clickable: true
            onSelected: (index) => { current = index; output.log(("selected: step %1").arg(index)) }
            SyStep { title: "Cart" }
            SyStep { title: "Address" }
            SyStep { title: "Payment" }
        }
        EventLog { id: output }
    }
}

05 Vertical process

Vertical process, configured with type.

Vertical process · Result — Qt capture · image

Default execution

QML code

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 int current: 1
        property bool clickable: false
        property bool complete: false
        property string type: "vertical"
        property string size: "medium"
        property int startIndex: 0
    }

    readonly property string members: [
        "SyStep { title: " + JSON.stringify("Cart") + "; description: " + JSON.stringify("3 items") + " }",
        "SyStep { title: " + JSON.stringify("Address") + " }",
        "SyStep { title: " + JSON.stringify("Payment") + " }",
        "SyStep { title: " + JSON.stringify("Done") + " }"
    ].join("\n")

    Column {
        spacing: 12
        SySteps {
            width: storyArgs.type === "vertical" ? implicitWidth : 560
            current: storyArgs.current
            clickable: storyArgs.clickable
            complete: storyArgs.complete
            type: storyArgs.type
            size: storyArgs.size
            startIndex: storyArgs.startIndex
            onSelected: (index) => output.log(("selected: step %1").arg(index))
            SyStep { title: "Cart"; description: "3 items" }
            SyStep { title: "Address" }
            SyStep { title: "Payment" }
            SyStep { title: "Done" }
        }
        EventLog { id: output }
    }

}

06 Completed process

Completed process, configured with complete.

Completed process · Result — Qt capture · image

Default execution

QML code

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 int current: 1
        property bool clickable: false
        property bool complete: true
        property string type: "horizontal"
        property string size: "medium"
        property int startIndex: 0
    }

    readonly property string members: [
        "SyStep { title: " + JSON.stringify("Cart") + "; description: " + JSON.stringify("3 items") + " }",
        "SyStep { title: " + JSON.stringify("Address") + " }",
        "SyStep { title: " + JSON.stringify("Payment") + " }",
        "SyStep { title: " + JSON.stringify("Done") + " }"
    ].join("\n")

    Column {
        spacing: 12
        SySteps {
            width: storyArgs.type === "vertical" ? implicitWidth : 560
            current: storyArgs.current
            clickable: storyArgs.clickable
            complete: storyArgs.complete
            type: storyArgs.type
            size: storyArgs.size
            startIndex: storyArgs.startIndex
            onSelected: (index) => output.log(("selected: step %1").arg(index))
            SyStep { title: "Cart"; description: "3 items" }
            SyStep { title: "Address" }
            SyStep { title: "Payment" }
            SyStep { title: "Done" }
        }
        EventLog { id: output }
    }

}

07 Start from one

Start from one, configured with startIndex, current.

Start from one · Result — Qt capture · image

Default execution

QML code

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 int current: 2
        property bool clickable: false
        property bool complete: false
        property string type: "horizontal"
        property string size: "medium"
        property int startIndex: 1
    }

    readonly property string members: [
        "SyStep { title: " + JSON.stringify("Cart") + "; description: " + JSON.stringify("3 items") + " }",
        "SyStep { title: " + JSON.stringify("Address") + " }",
        "SyStep { title: " + JSON.stringify("Payment") + " }",
        "SyStep { title: " + JSON.stringify("Done") + " }"
    ].join("\n")

    Column {
        spacing: 12
        SySteps {
            width: storyArgs.type === "vertical" ? implicitWidth : 560
            current: storyArgs.current
            clickable: storyArgs.clickable
            complete: storyArgs.complete
            type: storyArgs.type
            size: storyArgs.size
            startIndex: storyArgs.startIndex
            onSelected: (index) => output.log(("selected: step %1").arg(index))
            SyStep { title: "Cart"; description: "3 items" }
            SyStep { title: "Address" }
            SyStep { title: "Payment" }
            SyStep { title: "Done" }
        }
        EventLog { id: output }
    }

}

08 Click to change step

Click to change step, configured with clickable.

Click to change step · Result — Qt capture · image

Default execution

QML code

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 int current: 1
        property bool clickable: true
        property bool complete: false
        property string type: "horizontal"
        property string size: "medium"
        property int startIndex: 0
    }

    readonly property string members: [
        "SyStep { title: " + JSON.stringify("Cart") + "; description: " + JSON.stringify("3 items") + " }",
        "SyStep { title: " + JSON.stringify("Address") + " }",
        "SyStep { title: " + JSON.stringify("Payment") + " }",
        "SyStep { title: " + JSON.stringify("Done") + " }"
    ].join("\n")

    Column {
        spacing: 12
        SySteps {
            width: storyArgs.type === "vertical" ? implicitWidth : 560
            current: storyArgs.current
            clickable: storyArgs.clickable
            complete: storyArgs.complete
            type: storyArgs.type
            size: storyArgs.size
            startIndex: storyArgs.startIndex
            onSelected: (index) => output.log(("selected: step %1").arg(index))
            SyStep { title: "Cart"; description: "3 items" }
            SyStep { title: "Address" }
            SyStep { title: "Payment" }
            SyStep { title: "Done" }
        }
        EventLog { id: output }
    }

}

API 45

Hover or select an item for its QML example and copy button.

Properties · SySteps

Type	Default	Description
list (default property)	—	The SyStep items, in order
int	`0`	The number of the step in progress; values outside `startIndex` … `startIndex` + count act as the nearest bound
bool	`false`	Steps can be clicked; each click emits `selected(index)`
bool	`false`	Every step `finish`, whatever `current` and `status` say
string	`"horizontal"`	`horizontal` (equal shares of `width`) · `vertical` (stacked)
string	`"medium"`	`medium` (32 px disc) · `small` (24 px disc, smaller text)
int	`0`	The first step's number
list (read-only)	—	The steps inside, in order
bool	—	`type === "vertical"` · `current` after clamping
int (read-only)	—	`type === "vertical"` · `current` after clamping

Properties · SyStep

Type	Default	Description
string	`""`	The step title (16 px; 14 px small)
string	`""`	Text under the title (14 px); hidden when empty
string	`"none"`	`none` (follow `current`) · `finish` · `current` · `wait` · `error`
bool	`false`	A turning ring on a white disc, unless disabled, finished or in error
bool	`false`	Greyed and not clickable (except in `error`, which keeps its colors)
bool	`false`	Set by the container from its own `clickable` on every layout
int	`0`	The step's number — set by the container (`startIndex` + position)
int	—	Set by the container: its `current`, size, type, `"finish"` when `complete`, whether this is the last step
string	—	Set by the container: its `current`, size, type, `"finish"` when `complete`, whether this is the last step
string	—	Set by the container: its `current`, size, type, `"finish"` when `complete`, whether this is the last step
string	—	Set by the container: its `current`, size, type, `"finish"` when `complete`, whether this is the last step
bool	—	Set by the container: its `current`, size, type, `"finish"` when `complete`, whether this is the last step
string (read-only)	—	The state drawn: `finish` · `current` · `wait` · `error`
bool (read-only)	—	The ring is showing
bool (read-only)	—	a click would report

Methods

Item	Behavior / conditions
	`SySteps` and `SyStep` have no methods; drive them with `current`, `complete` and the per-step properties.

Signals

Signal	Arguments	When
	`index: int`	A clickable step was clicked (its number); re-emitted right after the step's own
	`index: int`	This step was clicked while clickable, not disabled and not in error

Behavior

Item	Behavior / conditions
	The first step's number
	The step's number — set by the container (`startIndex` + position)
	`current` names the step in progress by that number; a value outside `startIndex` … `startIndex` + the step count acts as the nearest bound (`clampedCurrent`; one past the last step means "all finished"): a step with a smaller number is `finish`, the equal one `current`, larger ones `wait`. `complete: true` makes every step `finish` regardless of `current`. A step's drawn state is `currentStatus`, decided as: the container's `complete` → `finish`; else the step's own `status` when it is not `"none"` (`finish` · `current` · `wait` · `error`); else the comparison with `current`. The container does not move `current` itself.
	`current` names the step in progress by that number; a value outside `startIndex` … `startIndex` + the step count acts as the nearest bound (`clampedCurrent`; one past the last step means "all finished"): a step with a smaller number is `finish`, the equal one `current`, larger ones `wait`.
	The number of the step in progress; values outside `startIndex` … `startIndex` + count act as the nearest bound
	Every step `finish`, whatever `current` and `status` say
	The state drawn: `finish` · `current` · `wait` · `error`
	`none` (follow `current`) · `finish` · `current` · `wait` · `error`
	A turning ring on a white disc, unless disabled, finished or in error
	Greyed and not clickable (except in `error`, which keeps its colors)
	`medium` (32 px disc) · `small` (24 px disc, smaller text)
	The disc is 32 px (24 px with `size: "small"`) and shows the step's number (16 / 12 px) — or ✓ when `finish`, ✕ when `error`.
	Horizontal (the default): every step gets an equal share of the container's `width`, with the disc and texts at its left and the tail line from the end of the title to the step's right edge; the container's implicit width is at least 320 px, so set `width`.
	Horizontal (the default): every step gets an equal share of the container's `width`, with the disc and texts at its left and the tail line from the end of the title to the step's right edge; the container's implicit width is at least 320 px, so set `width`.
	Steps can be clicked; each click emits `selected(index)`
	A clickable step was clicked (its number); re-emitted right after the step's own

Keyboard

Item	Behavior / conditions
	`SyProgressBar` for a single percentage; `SyBreadcrumb` for a path; `SyTabGroup` for views the user switches freely.

One design language.Native applications.

Components

From download to your first window

C++ · CMake

Python · PySide6

Tested Windows configurations

Two complete application examples

See the components in context

The native Gallery

QML Core

Troubleshooting

Steps

Supported QML types

Learn by example

01 Basic composition

02 status · loading · disabled

03 type · size

04 selected

05 Vertical process

06 Completed process

07 Start from one

08 Click to change step

Properties · SySteps

Properties · SyStep

Methods

Signals

Behavior

Keyboard

One design language.
Native applications.