PureQML Controls

1.2.0 verified Fri May 01 auth: no javascript

Library of commonly used QML controls for the PureQML QML transpiler. Version 1.2.0 provides components for Canvas, YouTube, Google Charts, native and non-native inputs, mixins, SVG, VK.com, Yandex, and other UI elements. Release cadence is low, as the library is in a maintenance phase. Differentiators include direct integration with PureQML and support for platform-specific components.

Common errors

error TypeError: Cannot read property 'getContext' of null ↓

cause Canvas component not correctly imported or instantiated.

fix

Ensure canvas.qml is imported and the Canvas type is used correctly: import 'canvas.qml' as Canvas; then use Canvas.Canvas { ... }.

error module 'pureqml-controls' not found ↓

cause Attempting to use Node.js require or ES import with the package.

fix

PureQML uses QML imports via relative paths; do not use require(). Import the .qml file directly.

error QML import: Cannot find component: youtube ↓

cause youtube.qml not in the QML import path or import statement incorrect.

fix

Copy youtube.qml to the same directory as your main QML file and use import 'youtube.qml'.

Warnings

gotcha Import paths must be relative to the current QML file, not absolute or package-based. ↓

fix Use 'import "canvas.qml"' instead of 'import Canvas'.

gotcha Components may not be available in all PureQML builds; check platform support. ↓

fix Verify that the desired component (e.g., YouTube) is supported on your target platform.

gotcha The library is optimized for PureQML transpiler; may not work with standard QML runtimes. ↓

fix Use PureQML toolchain for development.

Install

npm install pureqml-controls

yarn add pureqml-controls

pnpm add pureqml-controls

Imports

Canvas
wrong
```
import Canvas
```
correct
```
import "canvas.qml"
```
QML imports use relative file paths, not package names.
YouTube
wrong
```
import YouTube from 'pureqml-controls'
```
correct
```
import "youtube.qml"
```
Import via QML file path, not ES module syntax.

GoogleCharts

wrong

var GoogleCharts = require('pureqml-controls')

correct

import "googlecharts.qml"

PureQML uses QML import semantics; no CommonJS.

Quickstart

Shows how to use the Canvas component in a QML file with PureQML.

import QtQuick 2.0
import "canvas.qml" as Canvas

Rectangle {
    width: 300; height: 200
    color: "white"
    Canvas.Canvas {
        anchors.fill: parent
        onPaint: {
            var ctx = getContext("2d");
            ctx.fillStyle = "red";
            ctx.fillRect(10, 10, 100, 100);
        }
    }
}