{"id":26129,"library":"pureqml-controls","title":"PureQML Controls","description":"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.","status":"active","version":"1.2.0","language":"javascript","source_language":"en","source_url":"git://github.com/pureqml/controls","tags":["javascript"],"install":[{"cmd":"npm install pureqml-controls","lang":"bash","label":"npm"},{"cmd":"yarn add pureqml-controls","lang":"bash","label":"yarn"},{"cmd":"pnpm add pureqml-controls","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"QML imports use relative file paths, not package names.","wrong":"import Canvas","symbol":"Canvas","correct":"import \"canvas.qml\""},{"note":"Import via QML file path, not ES module syntax.","wrong":"import YouTube from 'pureqml-controls'","symbol":"YouTube","correct":"import \"youtube.qml\""},{"note":"PureQML uses QML import semantics; no CommonJS.","wrong":"var GoogleCharts = require('pureqml-controls')","symbol":"GoogleCharts","correct":"import \"googlecharts.qml\""}],"quickstart":{"code":"import QtQuick 2.0\nimport \"canvas.qml\" as Canvas\n\nRectangle {\n    width: 300; height: 200\n    color: \"white\"\n    Canvas.Canvas {\n        anchors.fill: parent\n        onPaint: {\n            var ctx = getContext(\"2d\");\n            ctx.fillStyle = \"red\";\n            ctx.fillRect(10, 10, 100, 100);\n        }\n    }\n}","lang":"javascript","description":"Shows how to use the Canvas component in a QML file with PureQML."},"warnings":[{"fix":"Use 'import \"canvas.qml\"' instead of 'import Canvas'.","message":"Import paths must be relative to the current QML file, not absolute or package-based.","severity":"gotcha","affected_versions":">=1.0"},{"fix":"Verify that the desired component (e.g., YouTube) is supported on your target platform.","message":"Components may not be available in all PureQML builds; check platform support.","severity":"gotcha","affected_versions":">=1.0"},{"fix":"Use PureQML toolchain for development.","message":"The library is optimized for PureQML transpiler; may not work with standard QML runtimes.","severity":"gotcha","affected_versions":">=1.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Ensure canvas.qml is imported and the Canvas type is used correctly: import 'canvas.qml' as Canvas; then use Canvas.Canvas { ... }.","cause":"Canvas component not correctly imported or instantiated.","error":"TypeError: Cannot read property 'getContext' of null"},{"fix":"PureQML uses QML imports via relative paths; do not use require(). Import the .qml file directly.","cause":"Attempting to use Node.js require or ES import with the package.","error":"module 'pureqml-controls' not found"},{"fix":"Copy youtube.qml to the same directory as your main QML file and use import 'youtube.qml'.","cause":"youtube.qml not in the QML import path or import statement incorrect.","error":"QML import: Cannot find component: youtube"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}