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

Divider

Separate groups of content with a horizontal or vertical line.

import Syidax.Core.Divider

Supported QML types

Type	Definition / role
	Horizontal or vertical separator, optionally with a label.

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

01 Basic composition

SyDivider is a rule between content: horizontal across a column of items, or vertical between items that sit side by side.

Basic composition · Default — Qt capture · image

Default execution

QML code

import QtQuick
import Syidax.Core

Item {
    implicitWidth: Math.max(360, childrenRect.width)
    implicitHeight: childrenRect.height
    id: story

    property QtObject settings: QtObject {
        id: storyArgs
        property string type: "horizontal"
        property bool inset: false
        property real thickness: 1
        property string color: ""
    }

    

    Column {
        visible: storyArgs.type === "horizontal"
        width: 320
        Text { text: "Above the rule"; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
        SyDivider {
            width: parent.width
            type: storyArgs.type
            inset: storyArgs.inset
            thickness: storyArgs.thickness
            color: storyArgs.color.length > 0 ? storyArgs.color : (type === "vertical" ? Theme.divider.verticalBorderEnabled : Theme.divider.horizontalBorderEnabled)
        }
        Text { text: "Below the rule"; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
    }
    Row {
        visible: storyArgs.type === "vertical"
        height: 80
        Text { anchors.verticalCenter: parent.verticalCenter; text: "Left"; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
        SyDivider {
            height: parent.height
            type: storyArgs.type
            inset: storyArgs.inset
            thickness: storyArgs.thickness
            color: storyArgs.color.length > 0 ? storyArgs.color : Theme.divider.verticalBorderEnabled
        }
        Text { anchors.verticalCenter: parent.verticalCenter; text: "Right"; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
    }

}

02 type

type: "horizontal" (the default) draws the line across the divider's width and keeps margin (16 px by default) above and below it, so its height is thickness + 2 × margin.

Default execution

QML code

import QtQuick
import Syidax.Core

Item {
    implicitWidth: Math.max(360, childrenRect.width)
    implicitHeight: childrenRect.height

    Column {
        spacing: 24
        Column {
            width: 320
            Text { text: "Above the rule"; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
            SyDivider { width: parent.width }
            Text { text: "Below the rule"; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
        }
        Row {
            height: 48
            Text { anchors.verticalCenter: parent.verticalCenter; text: "Left"; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
            SyDivider { type: "vertical"; height: parent.height }
            Text { anchors.verticalCenter: parent.verticalCenter; text: "Right"; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
        }
    }
}

03 inset

inset: true shortens the line by 16 px at both ends

QML code

import QtQuick
import Syidax.Core

Item {
    implicitWidth: Math.max(360, childrenRect.width)
    implicitHeight: childrenRect.height
    property QtObject settings: QtObject {
        id: storyArgs
        property bool inset: true
    }

    

    Rectangle {
        width: 320
        height: column.implicitHeight
        color: "transparent"
        border.width: 1
        border.color: Theme.semantic.borderBold
        Column {
            id: column
            width: parent.width
            Text { leftPadding: 12; topPadding: 8; text: "Above the rule"; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
            SyDivider { width: parent.width; inset: storyArgs.inset }
            Text { leftPadding: 12; bottomPadding: 8; text: "Below the rule"; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
        }
    }
}

04 thickness · color

thickness is the line's size across its axis in pixels (1 by default; fractions are allowed); the divider's cross size grows with it since it is thickness + 2 × margin.

thickness · color · 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

    property QtObject settings: QtObject {
        id: storyArgs
        property real thickness: 3
        property string color: "#5a2a82"
    }

    

    Column {
        width: 320
        Text { text: "Above the rule"; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
        SyDivider { id: featureTarget0;
            width: parent.width
            thickness: storyArgs.thickness
            color: storyArgs.color.length > 0 ? storyArgs.color : Theme.divider.horizontalBorderEnabled
        }
        Text { text: "Below the rule"; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
    }
}

API 19

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

Properties

Type	Default	Description
string	`"horizontal"`	`"horizontal"` (across the width) · `"vertical"` (down the height)
bool	`false`	Shorten the line by 16 px at both ends
real	`1`	The line's size across its axis, in px
color	divider token	The line color; the horizontal or vertical token by default
real	`16`	Space kept on both sides of the line across its axis
bool (read-only)	—	`type !== "vertical"`
real (read-only)	—	16 with `inset`, else 0

Methods

Item	Behavior / conditions
	None.

Signals

Item	Behavior / conditions
	None.

Behavior

Item	Behavior / conditions
	`"horizontal"` (across the width) · `"vertical"` (down the height)
	`type !== "vertical"`
	`type: "horizontal"` (default) draws the line across the divider's `width`; the divider has no implicit width, so give it one or let a `ColumnLayout` stretch it (`Layout.fillWidth` is preset). `type: "vertical"` draws the line down the divider's `height`; the implicit width is `thickness` + 2 × `margin` and `Layout.fillHeight` is preset for a `RowLayout`.
	The line's size across its axis, in px
	Space kept on both sides of the line across its axis
	`type: "vertical"` draws the line down the divider's `height`; the implicit width is `thickness` + 2 × `margin` and `Layout.fillHeight` is preset for a `RowLayout`.
	Shorten the line by 16 px at both ends
	The line color; the horizontal or vertical token by default
	The divider has no signals, no methods, and does not react to input.

Keyboard

Item	Behavior / conditions
	`SyCard` frames a group; `SyFlex` and the Qt layouts place the dividers between items.

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

Divider

Supported QML types

Learn by example

01 Basic composition

02 type

03 inset

04 thickness · color

Properties

Methods

Signals

Behavior

Keyboard

One design language.
Native applications.