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

Banner

Keep an important notice visible across the page, with optional actions and dismissal.

import Syidax.Core.Banner

Supported QML types

Type	Definition / role
	Wide message area for notices and actions within a page.

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

01 Basic composition

SyBannerMessage is a full-width announcement for the whole page

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

    property QtObject settings: QtObject {
        id: storyArgs
        property string variant: "info"
        property string header: "Scheduled maintenance"
        property string message: "The service pauses tonight from 23:00 to 01:00."
        property bool showIcon: true
        property bool closable: true
    }

    

    Column {
        spacing: 12
        Item {
            width: 520
            height: banner.visible ? banner.implicitHeight : 0
            SyBannerMessage {
                id: banner
                variant: storyArgs.variant
                header: storyArgs.header
                message: storyArgs.message
                showIcon: storyArgs.showIcon
                neutralIcon: Icons.bannerInfo
                closable: storyArgs.closable
                onDismissed: output.log("dismissed")
            }
        }
        EventLog { id: output }
    }

}

02 content · footer

Two places for your own items.

content · footer · 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

    Item {
        width: 520
        height: banner.implicitHeight
        SyBannerMessage {
            id: banner
            variant: "warning"
            showIcon: true
            header: "Scheduled maintenance"
            message: "The service pauses tonight from 23:00 to 01:00."
            footer: [
                SyButton { text: "Learn more"; size: "small" },
                SyButton { text: "Remind me later"; variant: "borderless"; size: "small" }
            ]
            Text { text: "Saved work is kept; open sessions end."; width: parent ? parent.width : 0; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 13; color: banner.textColor }
        }
    }
}

03 dismissed

dismissed() is the banner's only signal.

dismissed · 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

    Column {
        spacing: 12
        Item {
            width: 520
            height: banner.visible ? banner.implicitHeight : 0
            SyBannerMessage {
                id: banner
                variant: "success"
                showIcon: true
                closable: true
                message: "Your settings were saved."
                onDismissed: output.log("dismissed")
            }
        }
        EventLog { id: output }
    }
}

04 removeBanner

removeBanner() is the one method: it emits dismissed() and then hides the banner (visible = false).

removeBanner · Default — Qt capture · image

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: 24
        Item {
            width: 520
            height: banner.implicitHeight
            SyBannerMessage { id: banner; variant: "info"; showIcon: true; message: "The service pauses tonight from 23:00 to 01:00."; onDismissed: output.log("dismissed") }
        }
        Row {
            spacing: 8
            SyButton { id: exampleControl1;  text: "banner.removeBanner()"; variant: "secondary"; size: "small"; onClicked: banner.removeBanner() }
            SyButton { id: exampleControl2;  text: "banner.visible = true"; variant: "secondary"; size: "small"; onClicked: banner.visible = true }
        }
        EventLog { id: output }
    }
}

05 Success notice

Success notice, configured with variant.

Success notice · 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

    property QtObject settings: QtObject {
        id: storyArgs
        property string variant: "success"
        property string header: "Scheduled maintenance"
        property string message: "The service pauses tonight from 23:00 to 01:00."
        property bool showIcon: true
        property bool closable: true
    }

    

    Column {
        spacing: 12
        Item {
            width: 520
            height: banner.visible ? banner.implicitHeight : 0
            SyBannerMessage {
                id: banner
                variant: storyArgs.variant
                header: storyArgs.header
                message: storyArgs.message
                showIcon: storyArgs.showIcon
                neutralIcon: Icons.bannerInfo
                closable: storyArgs.closable
                onDismissed: output.log("dismissed")
            }
        }
        EventLog { id: output }
    }

}

06 Warning notice

Warning notice, configured with variant.

Warning notice · 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

    property QtObject settings: QtObject {
        id: storyArgs
        property string variant: "warning"
        property string header: "Scheduled maintenance"
        property string message: "The service pauses tonight from 23:00 to 01:00."
        property bool showIcon: true
        property bool closable: true
    }

    

    Column {
        spacing: 12
        Item {
            width: 520
            height: banner.visible ? banner.implicitHeight : 0
            SyBannerMessage {
                id: banner
                variant: storyArgs.variant
                header: storyArgs.header
                message: storyArgs.message
                showIcon: storyArgs.showIcon
                neutralIcon: Icons.bannerInfo
                closable: storyArgs.closable
                onDismissed: output.log("dismissed")
            }
        }
        EventLog { id: output }
    }

}

API 28

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

Properties

Type	Default	Description
list (default property)	—	Items stacked under the message, as wide as the text area.
list	—	Items in a row under the content (4 px apart); the row is hidden when empty.
string	`"info"`	`"info"` · `"success"` · `"warning"` · `"error"` · `"neutral"` — colors and the built-in icon.
string	`""`	The 16 px title line; hidden when empty.
string	`""`	The 14 px body; hidden when empty.
bool	`false`	Show the variant icon (`neutral` needs `neutralIcon` too).
url	`""`	The icon of a `neutral` banner (an `Icons.*` url or an SVG file); ignored for other variants.
bool	`false`	Adds the × that calls `removeBanner()`.
string (read-only)	—	`variant` with `info` resolved to `informational`.
bool (read-only)	—	Whether an icon is actually drawn.
read-only	—	The resolved text color, icon color and icon source.
read-only	—	The resolved text color, icon color and icon source.
read-only	—	The resolved text color, icon color and icon source.

Methods

Method	Description
	Emits `dismissed()` and hides the banner (`visible = false`). No arguments, no return value; emits again if called while already hidden. Bring the banner back with `visible = true`.

Signals

Signal	Arguments	When
	—	The × was pressed or `removeBanner()` was called — emitted before `visible` turns false. Not emitted when you set `visible = false` yourself.

Behavior

Item	Behavior / conditions
	Width and height — `width` is bound to the parent's width (480 px without a parent); assign `width` or use `Layout.fillWidth` to override.
	`info` (default, informational colors) · `success` · `warning` · `error` · `neutral`; it sets the background, border, text and icon colors and, for the four non-neutral variants, the icon.
	Show the variant icon (`neutral` needs `neutralIcon` too).
	The icon of a `neutral` banner (an `Icons.*` url or an SVG file); ignored for other variants.
	The 16 px title line; hidden when empty.
	The 14 px body; hidden when empty.
	Items in a row under the content (4 px apart); the row is hidden when empty.
	Adds the × that calls `removeBanner()`.
	Emits `dismissed()` and hides the banner (`visible = false`). No arguments, no return value; emits again if called while already hidden. Bring the banner back with `visible = true`.
	The × was pressed or `removeBanner()` was called — emitted before `visible` turns false. Not emitted when you set `visible = false` yourself.
	Closing — the × (`closable`) calls `removeBanner()`, which emits `dismissed()` and then sets `visible = false`. Nothing else emits `dismissed`; setting `visible` yourself is silent. `visible = true` shows the banner again.
	the banner takes no pointer input except the ×; your footer buttons report their own clicks.

Keyboard

Item	Behavior / conditions
	`SyInlineMessage` for feedback on one control, `SyToast` for passing notifications, `SyButton` for footer actions, `SyIcon` / `Icons.banner*` for a neutral icon.

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

Banner

Supported QML types

Learn by example

01 Basic composition

02 content · footer

03 dismissed

04 removeBanner

05 Success notice

06 Warning notice

Properties

Methods

Signals

Behavior

Keyboard

One design language.
Native applications.