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

Flex

Arrange items in rows or columns with control over alignment, spacing and wrapping.

import Syidax.Core.Flex

Supported QML types

Type	Definition / role
	Container for arranging content along a horizontal or vertical axis with alignment and gaps.

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

01 Basic composition

Compare the configuration and result of Basic composition.

Basic composition · Default — Qt capture · image

Default execution

QML code

import QtQuick
import Syidax.Core

Item {
    component FlexBox: Rectangle {
    property string label: ""
    property real side: 48
    width: side
    height: side
    radius: Foundation.borderRadiusMedium
    color: Theme.flex.itemBackgroundEnabled
    border.width: 1
    border.color: Theme.flex.containerBorderEnabled
    Text {
        anchors.centerIn: parent
        text: parent.label
        font.family: Theme.fontFamily
        font.pixelSize: 13
        color: Theme.semantic.textDefault
    }
}

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

    property QtObject settings: QtObject {
        id: storyArgs
        property string direction: "horizontal"
        property string justify: "start"
        property string align: "start"
        property string wrap: "nowrap"
        property string rowGap: "medium"
        property string columnGap: "medium"
        property string padding: "medium"
    }

    

    Rectangle {
        width: 480
        height: flex.height
        color: "transparent"
        border.width: 1
        border.color: Theme.flex.containerBorderEnabled
        SyFlex {
            id: flex
            width: parent.width
            height: storyArgs.direction.indexOf("vertical") === 0 ? 320 : Math.max(implicitHeight, 48 + 2 * paddingPx)
            direction: storyArgs.direction
            justify: storyArgs.justify
            align: storyArgs.align
            wrap: storyArgs.wrap
            rowGap: storyArgs.rowGap
            columnGap: storyArgs.columnGap
            padding: storyArgs.padding
            FlexBox { label: "1" }
            FlexBox { label: "2"; height: 64 }
            FlexBox { label: "3"; width: 72 }
            FlexBox { label: "4" }
            FlexBox { label: "5" }
        }
    }

}

02 justify

justify distributes the free space along the main axis

QML code

import QtQuick
import Syidax.Core

Item {
    component FlexBox: Rectangle {
    property string label: ""
    property real side: 48
    width: side
    height: side
    radius: Foundation.borderRadiusMedium
    color: Theme.flex.itemBackgroundEnabled
    border.width: 1
    border.color: Theme.flex.containerBorderEnabled
    Text {
        anchors.centerIn: parent
        text: parent.label
        font.family: Theme.fontFamily
        font.pixelSize: 13
        color: Theme.semantic.textDefault
    }
}

    implicitWidth: Math.max(360, childrenRect.width)
    implicitHeight: childrenRect.height
    property QtObject settings: QtObject {
        id: storyArgs
        property string justify: "space-between"
    }

    

    Rectangle {
        width: 480
        height: flex.implicitHeight
        color: "transparent"
        border.width: 1
        border.color: Theme.flex.containerBorderEnabled
        SyFlex {
            id: flex
            width: parent.width
            justify: storyArgs.justify
            padding: "small"
            FlexBox { label: "1" }
            FlexBox { label: "2" }
            FlexBox { label: "3" }
        }
    }
}

03 align

align places each child across the main axis

QML code

import QtQuick
import Syidax.Core

Item {
    component FlexBox: Rectangle {
    property string label: ""
    property real side: 48
    width: side
    height: side
    radius: Foundation.borderRadiusMedium
    color: Theme.flex.itemBackgroundEnabled
    border.width: 1
    border.color: Theme.flex.containerBorderEnabled
    Text {
        anchors.centerIn: parent
        text: parent.label
        font.family: Theme.fontFamily
        font.pixelSize: 13
        color: Theme.semantic.textDefault
    }
}

    implicitWidth: Math.max(360, childrenRect.width)
    implicitHeight: childrenRect.height
    property QtObject settings: QtObject {
        id: storyArgs
        property string align: "center"
    }

    

    Rectangle {
        width: 480
        height: flex.implicitHeight
        color: "transparent"
        border.width: 1
        border.color: Theme.flex.containerBorderEnabled
        SyFlex {
            id: flex
            width: parent.width
            align: storyArgs.align
            padding: "small"
            FlexBox { label: "1"; height: 32 }
            FlexBox { label: "2"; height: 72 }
            FlexBox { label: "3"; height: 48 }
        }
    }
}

04 wrap

wrap: "nowrap" (the default) keeps every child on one line even when it overflows the container.

QML code

import QtQuick
import Syidax.Core

Item {
    component FlexBox: Rectangle {
    property string label: ""
    property real side: 48
    width: side
    height: side
    radius: Foundation.borderRadiusMedium
    color: Theme.flex.itemBackgroundEnabled
    border.width: 1
    border.color: Theme.flex.containerBorderEnabled
    Text {
        anchors.centerIn: parent
        text: parent.label
        font.family: Theme.fontFamily
        font.pixelSize: 13
        color: Theme.semantic.textDefault
    }
}

    implicitWidth: Math.max(360, childrenRect.width)
    implicitHeight: childrenRect.height
    property QtObject settings: QtObject {
        id: storyArgs
        property string wrap: "wrap"
    }

    

    Rectangle {
        width: 320
        height: Math.max(flex.implicitHeight, 48 + 2 * Foundation.spacingSmall)
        clip: true
        color: "transparent"
        border.width: 1
        border.color: Theme.flex.containerBorderEnabled
        SyFlex {
            id: flex
            width: parent.width
            wrap: storyArgs.wrap
            padding: "small"
            rowGap: "small"
            columnGap: "small"
            Repeater {
                model: 7
                FlexBox { required property int index; label: String(index + 1); width: 72 }
            }
        }
    }
}

05 direction

direction picks the main axis and the order.

direction · Default — Qt capture · image

QML code

import QtQuick
import Syidax.Core

Item {
    component FlexBox: Rectangle {
    property string label: ""
    property real side: 48
    width: side
    height: side
    radius: Foundation.borderRadiusMedium
    color: Theme.flex.itemBackgroundEnabled
    border.width: 1
    border.color: Theme.flex.containerBorderEnabled
    Text {
        anchors.centerIn: parent
        text: parent.label
        font.family: Theme.fontFamily
        font.pixelSize: 13
        color: Theme.semantic.textDefault
    }
}

    implicitWidth: Math.max(360, childrenRect.width)
    implicitHeight: childrenRect.height
    property QtObject settings: QtObject {
        id: storyArgs
        property string direction: "vertical"
    }

    

    Rectangle {
        width: flex.implicitWidth
        height: flex.implicitHeight
        color: "transparent"
        border.width: 1
        border.color: Theme.flex.containerBorderEnabled
        SyFlex {
            id: flex
            width: implicitWidth
            height: implicitHeight
            direction: storyArgs.direction
            padding: "small"
            rowGap: "small"
            columnGap: "small"
            FlexBox { label: "1" }
            FlexBox { label: "2" }
            FlexBox { label: "3" }
        }
    }
}

06 Spread actions evenly

Spread actions evenly, configured with justify.

Spread actions evenly · Result — Qt capture · image

Default execution

QML code

import QtQuick
import Syidax.Core

Item {
    component FlexBox: Rectangle {
    property string label: ""
    property real side: 48
    width: side
    height: side
    radius: Foundation.borderRadiusMedium
    color: Theme.flex.itemBackgroundEnabled
    border.width: 1
    border.color: Theme.flex.containerBorderEnabled
    Text {
        anchors.centerIn: parent
        text: parent.label
        font.family: Theme.fontFamily
        font.pixelSize: 13
        color: Theme.semantic.textDefault
    }
}

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

    property QtObject settings: QtObject {
        id: storyArgs
        property string direction: "horizontal"
        property string justify: "space-between"
        property string align: "start"
        property string wrap: "nowrap"
        property string rowGap: "medium"
        property string columnGap: "medium"
        property string padding: "medium"
    }

    

    Rectangle {
        width: 480
        height: flex.height
        color: "transparent"
        border.width: 1
        border.color: Theme.flex.containerBorderEnabled
        SyFlex {
            id: flex
            width: parent.width
            height: storyArgs.direction.indexOf("vertical") === 0 ? 320 : Math.max(implicitHeight, 48 + 2 * paddingPx)
            direction: storyArgs.direction
            justify: storyArgs.justify
            align: storyArgs.align
            wrap: storyArgs.wrap
            rowGap: storyArgs.rowGap
            columnGap: storyArgs.columnGap
            padding: storyArgs.padding
            FlexBox { label: "1" }
            FlexBox { label: "2"; height: 64 }
            FlexBox { label: "3"; width: 72 }
            FlexBox { label: "4" }
            FlexBox { label: "5" }
        }
    }

}

API 35

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

Properties

Type	Default	Description
list (default property)	—	The children to lay out (hidden ones are skipped)
string	`"horizontal"`	`horizontal` · `vertical` · `horizontal-reverse` · `vertical-reverse`
string	`"start"`	Along the main axis: `start` · `center` · `end` · `space-between` · `space-around` · `space-evenly`
string	`"start"`	Across the main axis: `start` · `end` · `center` · `stretch` · `baseline` (like `start`)
string	`"nowrap"`	`nowrap` · `wrap` · `wrap-reverse`
string	`"medium"`	Spacing name: between lines in a row, between children in a column
string	`"medium"`	Spacing name: between children in a row, between lines in a column
string	`"medium"`	Spacing name: the inner margin on every side
int	`0`	Lines after the last layout (0 without children)
bool (read-only)	—	The main axis is the width
bool (read-only)	—	the order is reversed
real (read-only)	—	The spacing names in pixels
real (read-only)	—	The spacing names in pixels
real (read-only)	—	The spacing names in pixels
real	`0`	The laid-out children plus padding — one line, or with `wrap` the stacked lines plus cross gaps — the implicit size (maintained by the flex)
real	`0`	The laid-out children plus padding — one line, or with `wrap` the stacked lines plus cross gaps — the implicit size (maintained by the flex)

Methods

Method	Description
	Places the children now; the flex schedules it itself after every change, so it is rarely needed

Signals

Item	Behavior / conditions
	`SyFlex` has no signals of its own; `lineCount` and the children's positions change after each layout.

Behavior

Item	Behavior / conditions
	`horizontal` · `vertical` · `horizontal-reverse` · `vertical-reverse`
	`direction: "horizontal"` (default) is a row, `"vertical"` a column; the `-reverse` variants keep the axis and reverse the order inside every line.
	Spacing name: between children in a row, between lines in a column
	Spacing name: between lines in a row, between children in a column
	`nowrap` · `wrap` · `wrap-reverse`
	Lines after the last layout (0 without children)
	Along the main axis: `start` · `center` · `end` · `space-between` · `space-around` · `space-evenly`
	Across the main axis: `start` · `end` · `center` · `stretch` · `baseline` (like `start`)
	The container takes the `width` and `height` it is given and never resizes a child except under `stretch`.
	The container takes the `width` and `height` it is given and never resizes a child except under `stretch`.
	Spacing name: the inner margin on every side
	`rowGap`, `columnGap` and `padding` take a spacing name: `none` 0 · `xsmall` 8 · `small` 12 · `medium` 16 · `large` 20 · `xlarge` 28 px (an unknown name counts as `medium`); `rowGapPx`, `columnGapPx` and `paddingPx` expose the pixels.
	`rowGap`, `columnGap` and `padding` take a spacing name: `none` 0 · `xsmall` 8 · `small` 12 · `medium` 16 · `large` 20 · `xlarge` 28 px (an unknown name counts as `medium`); `rowGapPx`, `columnGapPx` and `paddingPx` expose the pixels.
	`rowGap`, `columnGap` and `padding` take a spacing name: `none` 0 · `xsmall` 8 · `small` 12 · `medium` 16 · `large` 20 · `xlarge` 28 px (an unknown name counts as `medium`); `rowGapPx`, `columnGapPx` and `paddingPx` expose the pixels.
	Do not bind a child's `x` / `y` — the flex sets them.
	Do not bind a child's `x` / `y` — the flex sets them.

Keyboard

Item	Behavior / conditions
	`SyLayout` frames a page; `SyButtonGroup` joins buttons without gaps; `SyDivider` separates groups laid out by a flex.

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

Flex

Supported QML types

Learn by example

01 Basic composition

02 justify

03 align

04 wrap

05 direction

06 Spread actions evenly

Properties

Methods

Signals

Behavior

Keyboard

One design language.
Native applications.