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

Inline Message

Show feedback next to the control it concerns, with an optional action to resolve the issue.

import Syidax.Core.InlineMessage

Supported QML types

Type	Definition / role
	Compact contextual message placed beside the related content.

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

01 Basic composition

SyInlineMessage is a small message bubble that floats next to the control it is declared in

Basic composition · Opened — 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

    property QtObject settings: QtObject {
        id: storyArgs
        property string variant: "informational"
        property string message: "Saved."
        property bool icon: true
        property bool action: false
        property string btnLabel: ""
        property string position: "bottom"
        property string trigger: "click"
        property bool sticky: false
        property string animation: "none"
    }

    

    Column {
        spacing: 12
        Item {
            width: 360
            height: 120
            SyButton {
                anchors.centerIn: parent
                text: "Click me"
                SyInlineMessage { id: exampleControl1; 
                    variant: storyArgs.variant
                    message: storyArgs.message
                    icon: storyArgs.icon
                    action: storyArgs.action
                    btnLabel: storyArgs.btnLabel
                    position: storyArgs.position
                    trigger: storyArgs.trigger
                    sticky: storyArgs.sticky
                    animation: storyArgs.animation
                    onActionClick: output.log("actionClick")
                }
            }
        }
        EventLog { id: output }
    }

}

02 actionClick · dismiss

Three signals.

actionClick · dismiss · Opened — 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
    // Focused Gallery routes: keep only the selected API and its prerequisites.
    id: featureStory

    Column {
        spacing: 12
        Item {
            width: 360
            height: 100
            SyInput {
                anchors.centerIn: parent
                width: 240
                label: "Email"
                SyInlineMessage { id: exampleControl1; 
                    variant: "error"
                    message: "This field is required."
                    btnLabel: "Fix"
                    trigger: "focusout"
                    onActionClick: { if (true) { output.log("actionClick") } }
                    onDismiss: { if (true) { output.log("dismiss") } }
                }
            }
        }
        EventLog { id: output }
    }
}

03 show · hide

show() opens the message and hide() closes it from code, whatever the trigger

show · hide · Opened — 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

    Column {
        spacing: 24
        Item {
            width: 560
            height: 180
            SyButton { anchors.centerIn: parent; text: "Click me"; SyInlineMessage { id: note; variant: "success"; message: "Saved."; trigger: "none"; sticky: true } }
        }
        Row {
            objectName: "exampleCommands"

            spacing: 8
            SyButton { id: exampleControl1;  visible: true; text: "note.show()"; variant: "secondary"; size: "small"; onClicked: note.show() }
            SyButton { id: exampleControl2;  visible: true; text: "note.hide()"; variant: "secondary"; size: "small"; onClicked: note.hide() }
        }
        Text {
            text: "note.isOpen === " + note.isOpen
            font.family: Theme.monoFontFamily
            font.pixelSize: 12
            color: Theme.semantic.textSubtle
        }
    }
}

04 Error feedback

Error feedback, configured with variant.

Error feedback · Opened — 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

    property QtObject settings: QtObject {
        id: storyArgs
        property string variant: "error"
        property string message: "Saved."
        property bool icon: true
        property bool action: false
        property string btnLabel: ""
        property string position: "bottom"
        property string trigger: "click"
        property bool sticky: false
        property string animation: "none"
    }

    

    Column {
        spacing: 12
        Item {
            width: 360
            height: 120
            SyButton {
                anchors.centerIn: parent
                text: "Click me"
                SyInlineMessage { id: exampleControl1; 
                    variant: storyArgs.variant
                    message: storyArgs.message
                    icon: storyArgs.icon
                    action: storyArgs.action
                    btnLabel: storyArgs.btnLabel
                    position: storyArgs.position
                    trigger: storyArgs.trigger
                    sticky: storyArgs.sticky
                    animation: storyArgs.animation
                    onActionClick: output.log("actionClick")
                }
            }
        }
        EventLog { id: output }
    }

}

05 Success feedback

Success feedback, configured with variant.

Success feedback · Opened — 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

    property QtObject settings: QtObject {
        id: storyArgs
        property string variant: "success"
        property string message: "Saved."
        property bool icon: true
        property bool action: false
        property string btnLabel: ""
        property string position: "bottom"
        property string trigger: "click"
        property bool sticky: false
        property string animation: "none"
    }

    

    Column {
        spacing: 12
        Item {
            width: 360
            height: 120
            SyButton {
                anchors.centerIn: parent
                text: "Click me"
                SyInlineMessage { id: exampleControl1; 
                    variant: storyArgs.variant
                    message: storyArgs.message
                    icon: storyArgs.icon
                    action: storyArgs.action
                    btnLabel: storyArgs.btnLabel
                    position: storyArgs.position
                    trigger: storyArgs.trigger
                    sticky: storyArgs.sticky
                    animation: storyArgs.animation
                    onActionClick: output.log("actionClick")
                }
            }
        }
        EventLog { id: output }
    }

}

06 Text-only feedback

Text-only feedback, configured with icon.

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

    property QtObject settings: QtObject {
        id: storyArgs
        property string variant: "informational"
        property string message: "Saved."
        property bool icon: false
        property bool action: false
        property string btnLabel: ""
        property string position: "bottom"
        property string trigger: "click"
        property bool sticky: false
        property string animation: "none"
    }

    

    Column {
        spacing: 12
        Item {
            width: 360
            height: 120
            SyButton {
                anchors.centerIn: parent
                text: "Click me"
                SyInlineMessage { id: exampleControl1; 
                    variant: storyArgs.variant
                    message: storyArgs.message
                    icon: storyArgs.icon
                    action: storyArgs.action
                    btnLabel: storyArgs.btnLabel
                    position: storyArgs.position
                    trigger: storyArgs.trigger
                    sticky: storyArgs.sticky
                    animation: storyArgs.animation
                    onActionClick: output.log("actionClick")
                }
            }
        }
        EventLog { id: output }
    }

}

07 Feedback above the field

Feedback above the field, configured with position.

Feedback above the field · Opened — 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

    property QtObject settings: QtObject {
        id: storyArgs
        property string variant: "informational"
        property string message: "Saved."
        property bool icon: true
        property bool action: false
        property string btnLabel: ""
        property string position: "top"
        property string trigger: "click"
        property bool sticky: false
        property string animation: "none"
    }

    

    Column {
        spacing: 12
        Item {
            width: 360
            height: 120
            SyButton {
                anchors.centerIn: parent
                text: "Click me"
                SyInlineMessage { id: exampleControl1; 
                    variant: storyArgs.variant
                    message: storyArgs.message
                    icon: storyArgs.icon
                    action: storyArgs.action
                    btnLabel: storyArgs.btnLabel
                    position: storyArgs.position
                    trigger: storyArgs.trigger
                    sticky: storyArgs.sticky
                    animation: storyArgs.animation
                    onActionClick: output.log("actionClick")
                }
            }
        }
        EventLog { id: output }
    }

}

08 Feedback with action

Feedback with action, configured with action.

Feedback with action · Opened — 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

    property QtObject settings: QtObject {
        id: storyArgs
        property string variant: "informational"
        property string message: "Saved."
        property bool icon: true
        property bool action: true
        property string btnLabel: ""
        property string position: "bottom"
        property string trigger: "click"
        property bool sticky: false
        property string animation: "none"
    }

    

    Column {
        spacing: 12
        Item {
            width: 360
            height: 120
            SyButton {
                anchors.centerIn: parent
                text: "Click me"
                SyInlineMessage { id: exampleControl1; 
                    variant: storyArgs.variant
                    message: storyArgs.message
                    icon: storyArgs.icon
                    action: storyArgs.action
                    btnLabel: storyArgs.btnLabel
                    position: storyArgs.position
                    trigger: storyArgs.trigger
                    sticky: storyArgs.sticky
                    animation: storyArgs.animation
                    onActionClick: output.log("actionClick")
                }
            }
        }
        EventLog { id: output }
    }

}

API 67

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

Properties

Type	Default	Description
string	`"informational"`	`"informational"` (= `"info"`) · `"success"` · `"warning"` · `"error"` — colors and icon.
string	`"Inline message"`	The text; wraps so the bubble stays within 300 px.
bool	`true`	Show the variant icon.
bool	`false`	Show the action button (labelled `btnLabel` or "OK").
string	`""`	The button's label; a non-empty label shows the button even when `action` is false.
list	—	Your own items in the action row; they replace the built-in button.
string	`"click"`	`"click"` · `"focusout"` · `"none"`.
string	`"bottom"`	`"top"` · `"bottom"` · `"left"` · `"right"` (the base's corner names work too).
bool	`false`	Never closes by itself; `hide()` only (and the anchor toggle with the click trigger).
bool	`false`	The base popup's pointer towards the anchor.
int	`0`	Milliseconds before opening / closing.
int	`0`	Milliseconds before opening / closing.
string	`"none"`	`"none"` · `"fade"`; speed `"x-fast"` · `"fast"` · `"medium"` · `"slow"` · `"x-slow"`.
string	`"fast"`	`"none"` · `"fade"`; speed `"x-fast"` · `"fast"` · `"medium"` · `"slow"` · `"x-slow"`.
Item	the item it is declared in	The item it follows (resolved to the nearest ancestor with `hovered` within three levels).
bool (read-only)	—	The message is visible.
string (read-only)	—	The side after flipping.
read-only	—	Whether the action row is shown, the resolved variant, and the theme colors and icon.
read-only	—	Whether the action row is shown, the resolved variant, and the theme colors and icon.
read-only	—	Whether the action row is shown, the resolved variant, and the theme colors and icon.
read-only	—	Whether the action row is shown, the resolved variant, and the theme colors and icon.
read-only	—	Whether the action row is shown, the resolved variant, and the theme colors and icon.
base popup	—	Lower-level geometry and look; `position` and `variant` drive them.
base popup	—	Lower-level geometry and look; `position` and `variant` drive them.
base popup	—	Lower-level geometry and look; `position` and `variant` drive them.
base popup	—	Lower-level geometry and look; `position` and `variant` drive them.
base popup	—	Lower-level geometry and look; `position` and `variant` drive them.
base popup	—	Lower-level geometry and look; `position` and `variant` drive them.
base popup	—	Lower-level geometry and look; `position` and `variant` drive them.

Methods

Method	Description
	Opens from code (`setOpen()`): cancels pending delays; refused while the anchor is `disabled` / `readonly` / not enabled.
	Closes from code (`setClose()`): cancels pending delays, closes even when `sticky`, and `dismiss()` follows.
	The base popup's methods; `show()` / `hide()` are the ones to use.
	The base popup's methods; `show()` / `hide()` are the ones to use.
	The base popup's methods; `show()` / `hide()` are the ones to use.
	The base popup's methods; `show()` / `hide()` are the ones to use.
	The base popup's methods; `show()` / `hide()` are the ones to use.

Signals

Signal	Arguments	When
	—	The built-in action button was pressed. Not for `actionContent` items. The message stays open.
	—	Right after `actionClick()` for the same press — an alias; handle one of the two.
	—	The bubble became hidden, by any path (`hide()`, Escape, outside press, anchor toggle). Not emitted while already hidden.
	—	Emitted after the popup finishes its enter transition.
	—	Emitted after the popup finishes its exit transition.
	—	The base popup's lifecycle signals.

Behavior

Item	Behavior / conditions
	the item the message is declared in; inside a control's content it walks up at most three parents to the nearest item with a boolean `hovered`, so the control itself is the anchor. It is parented to the anchor and drawn in the window overlay, following the anchor.
	Interactive anchor — the message opens only while the anchor is `enabled` and neither `disabled` nor `readonly`; this applies to every trigger and to `show()`.
	Opens from code (`setOpen()`): cancels pending delays; refused while the anchor is `disabled` / `readonly` / not enabled.
	`"click"` · `"focusout"` · `"none"`.
	Closes from code (`setClose()`): cancels pending delays, closes even when `sticky`, and `dismiss()` follows.
	Never closes by itself; `hide()` only (and the anchor toggle with the click trigger).
	The built-in action button was pressed. Not for `actionContent` items. The message stays open.
	Right after `actionClick()` for the same press — an alias; handle one of the two.
	The bubble became hidden, by any path (`hide()`, Escape, outside press, anchor toggle). Not emitted while already hidden.
	Show the variant icon.
	The text; wraps so the bubble stays within 300 px.
	Show the action button (labelled `btnLabel` or "OK").
	The button's label; a non-empty label shows the button even when `action` is false.
	Your own items in the action row; they replace the built-in button.
	`informational` (default; `info` is the same), `success`, `warning`, `error`: background, border, text and icon colors from the theme.
	`"top"` · `"bottom"` · `"left"` · `"right"` (the base's corner names work too).
	The side after flipping.
	`placement` is the base's lower-level property that `position` drives — set `position`, not both.
	The base popup's pointer towards the anchor.
	`animation: "fade"` fades over `animationSpeed` (`x-fast` 100 · `fast` 150 · `medium` 250 · `slow` 350 · `x-slow` 500 ms); none under `Theme.reducedMotion`.
	`animation: "fade"` fades over `animationSpeed` (`x-fast` 100 · `fast` 150 · `medium` 250 · `slow` 350 · `x-slow` 500 ms); none under `Theme.reducedMotion`.
	Delays — `opendelay` / `closedelay` in ms (0 by default); `show()` / `hide()` cancel them, and closing by any route — Escape, an outside press, `close()` — cancels a pending delayed open.
	Delays — `opendelay` / `closedelay` in ms (0 by default); `show()` / `hide()` cancel them, and closing by any route — Escape, an outside press, `close()` — cancels a pending delayed open.
	Delays — `opendelay` / `closedelay` in ms (0 by default); `show()` / `hide()` cancel them, and closing by any route — Escape, an outside press, `close()` — cancels a pending delayed open.

Keyboard

Item	Behavior / conditions
	`SyBannerMessage` for page-wide notices, `SyToast` for passing confirmations, `SyTooltip` for a plain hint, `SyForm` for form-level validation; `SyInput` and `SyButton` as typical anchors.

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

Inline Message

Supported QML types

Learn by example

01 Basic composition

02 actionClick · dismiss

03 show · hide

04 Error feedback

05 Success feedback

06 Text-only feedback

07 Feedback above the field

08 Feedback with action

Properties

Methods

Signals

Behavior

Keyboard

One design language.
Native applications.