QMLQT QUICK · C++ · PYTHON
Build desktop interfaces with QML components, shared tokens and practical examples you can run yourself.
QML Core is a separate product. C++ and Python hosts share the same QML screens.
QML CORE
56 of 56 components
START WITH A WORKING APP
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 workbenchUse 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 recordsRun 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.
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.
Step-by-step captures from the running Windows applications. Play, pause and inspect each state.
TRY IT YOURSELF
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$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 →The --qml path must contain the Syidax folder. Python uses qml-pure. Run from the unzipped SDK, independently of the source repository.
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.
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 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.
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.
Present a live QML example alongside its source code, or show code on its own with highlighting and copying.
import Syidax.Core.CodeViewer
| Type | Definition / role |
|---|---|
| Combines a live SyCodeRender preview with a collapsible SyCodeScript source panel. | |
| Hosts the live QML content of a code example; source supplies its displayed code. | |
| Shows highlighted source code with optional line numbers and a copy button. |
Previews are images of native Qt runs. Use the buttons below each image to view a result.
Compare the configuration and result of Basic composition.
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 language: "qml"
property bool showLineNumbers: true
property bool showCopyButton: true
property bool wrap: false
property string highlightLines: "2"
property bool collapsible: true
property bool defaultExpanded: true
property string triggerLabel: "SOURCE"
}
readonly property string sample: "Row {\n spacing: 8\n SyButton { text: " + JSON.stringify("Save") + "; variant: \"primary\" }\n SyTag { text: " + JSON.stringify("Draft") + "; color: \"yellow\" }\n}"
SyCodeViewer {
width: 520
language: storyArgs.language
showLineNumbers: storyArgs.showLineNumbers
showCopyButton: storyArgs.showCopyButton
wrap: storyArgs.wrap
highlightLines: storyArgs.highlightLines
collapsible: storyArgs.collapsible
defaultExpanded: storyArgs.defaultExpanded
triggerLabel: storyArgs.triggerLabel
SyCodeRender {
source: story.sample
Row {
spacing: 8
SyButton { text: "Save"; variant: "primary" }
SyTag { text: "Draft"; color: "yellow" }
}
}
SyCodeScript { }
}
}SyCodeScript works on its own as a read-only code panel: set code and language, and the text is tokenised and coloured with the editor palette
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: story
readonly property string js: "const total = items.reduce((sum, i) => sum + i.price, 0) // in cents\nrender(`Total: ${total / 100}`)"
readonly property string html: "<section class=\"card\">\n <h2 id=\"title\">Orders</h2>\n <!-- rows -->\n</section>"
readonly property string css: ".card {\n --gap: 8px;\n padding: var(--gap) 12px;\n color: #1f2937;\n}"
readonly property string json: "{ \"id\": 42, \"name\": \"Lee\", \"active\": true, \"tags\": [\"core\", \"qml\"] }"
Column {
spacing: 12
SyCodeScript { id: featureTarget0; width: 520; language: "javascript"; showLineNumbers: true; code: story.js }
SyCodeScript { id: featureTarget1; width: 520; language: "html"; code: story.html }
SyCodeScript { id: featureTarget2; width: 520; language: "css"; highlightLines: "2"; code: story.css }
SyCodeScript { id: featureTarget3; width: 520; language: "json"; showCopyButton: false; code: story.json }
}
}Signals of the viewer:
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: story
readonly property string sample: "SyButton { text: " + JSON.stringify("Save") + " }"
Column {
spacing: 12
SyCodeViewer {
id: viewer
width: 520; language: "qml"; showLineNumbers: true
onReady: (detail) => { if (true) { output.log(("ready: render %1, script %2").arg(detail.hasRender).arg(detail.hasScript)) } }
onExpandedChanged: { if (true) { output.log(("expanded: %1 (%2)").arg(viewer.expanded).arg(viewer.lastExpandSource)) } }
SyCodeRender { source: story.sample; SyButton { text: "Save" } }
SyCodeScript {
onLineClick: (detail) => { if (true) { output.log(("lineClick: %1").arg(detail.line)) } }
onCopied: (detail) => { if (true) { output.log(("copied: %1").arg(detail.language)) } }
}
}
EventLog { id: output }
}
}Highlight selected lines, configured with highlightLines.
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 language: "qml"
property bool showLineNumbers: true
property bool showCopyButton: true
property bool wrap: false
property string highlightLines: "2,4"
property bool collapsible: true
property bool defaultExpanded: true
property string triggerLabel: "SOURCE"
}
readonly property string sample: "Row {\n spacing: 8\n SyButton { text: " + JSON.stringify("Save") + "; variant: \"primary\" }\n SyTag { text: " + JSON.stringify("Draft") + "; color: \"yellow\" }\n}"
SyCodeViewer {
width: 520
language: storyArgs.language
showLineNumbers: storyArgs.showLineNumbers
showCopyButton: storyArgs.showCopyButton
wrap: storyArgs.wrap
highlightLines: storyArgs.highlightLines
collapsible: storyArgs.collapsible
defaultExpanded: storyArgs.defaultExpanded
triggerLabel: storyArgs.triggerLabel
SyCodeRender {
source: story.sample
Row {
spacing: 8
SyButton { text: "Save"; variant: "primary" }
SyTag { text: "Draft"; color: "yellow" }
}
}
SyCodeScript { }
}
}Initially collapsed, configured with collapsible, defaultExpanded.
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 language: "qml"
property bool showLineNumbers: true
property bool showCopyButton: true
property bool wrap: false
property string highlightLines: "2"
property bool collapsible: true
property bool defaultExpanded: false
property string triggerLabel: "SOURCE"
}
readonly property string sample: "Row {\n spacing: 8\n SyButton { text: " + JSON.stringify("Save") + "; variant: \"primary\" }\n SyTag { text: " + JSON.stringify("Draft") + "; color: \"yellow\" }\n}"
SyCodeViewer {
width: 520
language: storyArgs.language
showLineNumbers: storyArgs.showLineNumbers
showCopyButton: storyArgs.showCopyButton
wrap: storyArgs.wrap
highlightLines: storyArgs.highlightLines
collapsible: storyArgs.collapsible
defaultExpanded: storyArgs.defaultExpanded
triggerLabel: storyArgs.triggerLabel
SyCodeRender {
source: story.sample
Row {
spacing: 8
SyButton { text: "Save"; variant: "primary" }
SyTag { text: "Draft"; color: "yellow" }
}
}
SyCodeScript { }
}
}Wrap long lines, configured with wrap.
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 language: "qml"
property bool showLineNumbers: true
property bool showCopyButton: true
property bool wrap: true
property string highlightLines: "2"
property bool collapsible: true
property bool defaultExpanded: true
property string triggerLabel: "SOURCE"
}
readonly property string sample: "Row {\n spacing: 8\n SyButton { text: " + JSON.stringify("Save") + "; variant: \"primary\" }\n SyTag { text: " + JSON.stringify("Draft") + "; color: \"yellow\" }\n}"
SyCodeViewer {
width: 520
language: storyArgs.language
showLineNumbers: storyArgs.showLineNumbers
showCopyButton: storyArgs.showCopyButton
wrap: storyArgs.wrap
highlightLines: storyArgs.highlightLines
collapsible: storyArgs.collapsible
defaultExpanded: storyArgs.defaultExpanded
triggerLabel: storyArgs.triggerLabel
SyCodeRender {
source: story.sample
Row {
spacing: 8
SyButton { text: "Save"; variant: "primary" }
SyTag { text: "Draft"; color: "yellow" }
}
}
SyCodeScript { }
}
}Minimal code block, configured with showLineNumbers, showCopyButton.
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 language: "qml"
property bool showLineNumbers: false
property bool showCopyButton: false
property bool wrap: false
property string highlightLines: "2"
property bool collapsible: true
property bool defaultExpanded: true
property string triggerLabel: "SOURCE"
}
readonly property string sample: "Row {\n spacing: 8\n SyButton { text: " + JSON.stringify("Save") + "; variant: \"primary\" }\n SyTag { text: " + JSON.stringify("Draft") + "; color: \"yellow\" }\n}"
SyCodeViewer {
width: 520
language: storyArgs.language
showLineNumbers: storyArgs.showLineNumbers
showCopyButton: storyArgs.showCopyButton
wrap: storyArgs.wrap
highlightLines: storyArgs.highlightLines
collapsible: storyArgs.collapsible
defaultExpanded: storyArgs.defaultExpanded
triggerLabel: storyArgs.triggerLabel
SyCodeRender {
source: story.sample
Row {
spacing: 8
SyButton { text: "Save"; variant: "primary" }
SyTag { text: "Draft"; color: "yellow" }
}
}
SyCodeScript { }
}
}Python syntax, configured with language.
import QtQuick
import Syidax.Core
SyCodeScript {
width: 520
language: "python"
showLineNumbers: true
code: "def total(items):\n return sum(item[\"amount\"] for item in items)\n\nprint(total([{\"amount\": 12}, {\"amount\": 30}]))"
}Hover or select an item for its QML example and copy button.
| Property | Type | Default | Description |
|---|---|---|---|
| string | "plaintext" | The tokeniser for the script (unless the script sets its own language). | |
| bool | false | The gutter in the script (inherited). | |
| bool | true | The copy button in the script (inherited). | |
| bool | false | Wrap long lines instead of horizontal scrolling (inherited). | |
| real | 0 | Caps the script's height in px and scrolls the rest; 0 = unbounded (inherited). | |
| string | "" | "3,5-7" — 1-based lines and ranges to tint (inherited). | |
| bool | true | Shows the *SOURCE* bar when both parts exist. | |
| bool | true | The initial value of expanded. | |
| bool | defaultExpanded | Whether the script is shown under the bar; ignored when there is no bar. | |
| string | "SOURCE" | The bar's text. | |
| var | null | The collected SyCodeRender / SyCodeScript. | |
| var | null | The collected SyCodeRender / SyCodeScript. | |
| bool (read-only) | — | Whether each part was found. | |
| bool (read-only) | — | Whether each part was found. | |
| string (read-only) | — | The render's source ("" without a render). | |
| var (read-only) | — | highlightLines parsed to a sorted array of line numbers. | |
| bool (read-only) | — | Whether the bar is drawn | |
| bool (read-only) | — | whether the script is currently visible. | |
| string | "prop" | "user" while expandedChanged handlers run for a user toggle, else "prop". |
| Property | Type | Default | Description |
|---|---|---|---|
| string | "" | The code text the paired script shows when its own code is empty. | |
| var | null | The viewer (set by the viewer). | |
| — | — | The live items, drawn on a tinted stage with 12 px of padding. |
| Property | Type | Default | Description |
|---|---|---|---|
| string | "" | The text to show; "" inside a viewer = the render's source. | |
| string | "" | The tokeniser id or alias; "" = the viewer's, else plain text. | |
| var | undefined | undefined = inherit from the viewer; standalone defaults false · true · false · 0 · "". | |
| var | undefined | undefined = inherit from the viewer; standalone defaults false · true · false · 0 · "". | |
| var | undefined | undefined = inherit from the viewer; standalone defaults false · true · false · 0 · "". | |
| var | undefined | undefined = inherit from the viewer; standalone defaults false · true · false · 0 · "". | |
| var | undefined | undefined = inherit from the viewer; standalone defaults false · true · false · 0 · "". | |
| var | null | The viewer (set by the viewer). | |
| string (read-only) | — | What is actually shown and tokenised. | |
| string (read-only) | — | What is actually shown and tokenised. | |
| read-only | — | The effective settings after inheritance. | |
| read-only | — | The effective settings after inheritance. | |
| read-only | — | The effective settings after inheritance. | |
| read-only | — | The effective settings after inheritance. | |
| read-only | — | The effective settings after inheritance. | |
| read-only | — | The token lines | |
| read-only | — | their number | |
| read-only | — | the highlighted line numbers. | |
| real (read-only) | 21 | The row height | |
| real (read-only) | — | the gutter width (0 without line numbers). |
| Method | Description |
|---|---|
Flips expanded as a user action. | |
Sets expanded as a user action (lastExpandSource = "user"). | |
| Re-scans the children for the render and the script (called automatically). | |
Copies resolvedCode to the clipboard and emits copied. |
| Signal | Arguments | When |
|---|---|---|
detail: { hasRender, hasScript } | Once, after completion and the first collection of the parts. | |
| — | expanded changed by the user (lastExpandSource === "user") or by a binding / assignment ("prop"). | |
| — | The properties' own signals. | |
| — | The properties' own signals. | |
detail: { line } | A line number was clicked (needs showLineNumbers); 1-based. | |
detail: { code, language } | The copy button or copy() put the text on the clipboard. | |
| — | The code property changed. |
| Item | Behavior / conditions |
|---|---|
The viewer's children are collected at completion and whenever they change: an item with codeRender === true becomes render and is parented into the top area; one with codeScript === true becomes script and goes into the bottom area; each gets owner set to the viewer. | |
The viewer's children are collected at completion and whenever they change: an item with codeRender === true becomes render and is parented into the top area; one with codeScript === true becomes script and goes into the bottom area; each gets owner set to the viewer. | |
The viewer's children are collected at completion and whenever they change: an item with codeRender === true becomes render and is parented into the top area; one with codeScript === true becomes script and goes into the bottom area; each gets owner set to the viewer. | |
The viewer's children are collected at completion and whenever they change: an item with codeRender === true becomes render and is parented into the top area; one with codeScript === true becomes script and goes into the bottom area; each gets owner set to the viewer. | |
| The viewer (set by the viewer). | |
| Once, after completion and the first collection of the parts. | |
SyCodeScript.resolvedCode is its own code when non-empty, otherwise the owner render's source, otherwise "". It — or copy() — puts resolvedCode on the system clipboard through a hidden text edit and emits copied. | |
The text to show; "" inside a viewer = the render's source. | |
The code text the paired script shows when its own code is empty. | |
resolvedLanguage is its own language, else the viewer's, else "plaintext". | |
The tokeniser id or alias; "" = the viewer's, else plain text. | |
| The bar's text. | |
| Shows the *SOURCE* bar when both parts exist. | |
Flips expanded as a user action. | |
| Whether the script is shown under the bar; ignored when there is no bar. | |
The initial value of expanded. | |
Sets expanded as a user action (lastExpandSource = "user"). | |
"user" while expandedChanged handlers run for a user toggle, else "prop". | |
expanded changed by the user (lastExpandSource === "user") or by a binding / assignment ("prop"). | |
Lines listed in highlightLines — "3,5-7,12", 1-based, inclusive ranges, any order — get a tinted background and a 2 px brand-coloured left edge. | |
With showLineNumbers a right-aligned gutter (at least 28 px, wider for long files) shows the numbers; clicking one emits lineClick. | |
A line number was clicked (needs showLineNumbers); 1-based. | |
Long lines scroll horizontally unless wrap is on; with scriptHeight > 0 the panel is capped at that height and scrolls vertically. | |
Long lines scroll horizontally unless wrap is on; with scriptHeight > 0 the panel is capped at that height and scrolls vertically. SyCodeRender is as tall as its children plus 12 px of padding on each side and has a tinted stage background; SyCodeScript standalone is 480 wide unless its parent sets a width, and as tall as its lines (plus 56 px of padding) or scriptHeight. | |
Copies resolvedCode to the clipboard and emits copied. | |
The copy button or copy() put the text on the clipboard. | |
The viewer has implicitWidth 480 and an implicitHeight of render + bar + script (when shown) + 2 px of border; the render and the script take the viewer's inner width. | |
The viewer has implicitWidth 480 and an implicitHeight of render + bar + script (when shown) + 2 px of border; the render and the script take the viewer's inner width. |
| Item | Behavior / conditions |
|---|---|
SyButton (the copy button), SyIcon / Icons.editorCopy, Theme.editor (the token palette). |