{"id":13467347,"url":"https://github.com/qmlweb/qmlweb","last_synced_at":"2025-05-16T07:07:34.149Z","repository":{"id":4012526,"uuid":"51682254","full_name":"qmlweb/qmlweb","owner":"qmlweb","description":"A QML engine in a web browser. Current state: fixing things…","archived":false,"fork":false,"pushed_at":"2022-04-11T15:07:47.000Z","size":5565,"stargazers_count":786,"open_issues_count":80,"forks_count":100,"subscribers_count":73,"default_branch":"master","last_synced_at":"2025-05-09T04:23:51.085Z","etag":null,"topics":["declarative","declarative-ui","html","html5","javascript","qml","qmlweb"],"latest_commit_sha":null,"homepage":"https://qmlweb.github.io/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/qmlweb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-02-14T06:06:03.000Z","updated_at":"2025-05-01T04:36:09.000Z","dependencies_parsed_at":"2022-08-06T14:30:31.293Z","dependency_job_id":null,"html_url":"https://github.com/qmlweb/qmlweb","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qmlweb%2Fqmlweb","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qmlweb%2Fqmlweb/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qmlweb%2Fqmlweb/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qmlweb%2Fqmlweb/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/qmlweb","download_url":"https://codeload.github.com/qmlweb/qmlweb/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254485065,"owners_count":22078767,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["declarative","declarative-ui","html","html5","javascript","qml","qmlweb"],"created_at":"2024-07-31T15:00:55.287Z","updated_at":"2025-05-16T07:07:33.262Z","avatar_url":"https://github.com/qmlweb.png","language":"JavaScript","readme":"# JavaScript powered QML Engine\n\n[![Join the chat at https://gitter.im/qmlweb/qmlweb](https://badges.gitter.im/qmlweb/qmlweb.svg)](https://gitter.im/qmlweb/qmlweb)\n[![Build Status](https://travis-ci.org/qmlweb/qmlweb.svg?branch=master)](https://travis-ci.org/qmlweb/qmlweb)\n[![codecov](https://codecov.io/gh/qmlweb/qmlweb/branch/master/graph/badge.svg)](https://codecov.io/gh/qmlweb/qmlweb)\n\n[![npm](https://img.shields.io/npm/v/qmlweb.svg)](https://www.npmjs.com/package/qmlweb)\n[![Bower](https://img.shields.io/bower/v/qmlweb.svg)](http://bower.io/search/?q=qmlweb)\n[![GitHub tag](https://img.shields.io/github/tag/qmlweb/qmlweb.svg)](https://github.com/qmlweb/qmlweb/releases)\n\nThis project aims at bringing the power of QML to the web browser.\nHere's a sample of how QML looks like:\n\n```QML\nimport QtQuick 2.0\n\nRectangle {\n   width: 500; height: 200\n   color: \"lightgray\"\n\n   Text {\n       id: helloText\n       text: \"Hello world!\"\n       anchors.verticalCenter: parent.verticalCenter\n       anchors.horizontalCenter: parent.horizontalCenter\n       font.pointSize: 24; font.bold: true\n   }\n}\n```\n\n## How to use\n\n### Add the library to your web page\n\nUsing one of the methods below, install the qmlweb JavaScript library:\n\n* [npm](https://www.npmjs.com/package/qmlweb) — `npm install qmlweb`\n* GitHub [releases](https://github.com/qmlweb/qmlweb/releases) —\n  `tar -xaf v0.2.0.tar.gz`\n* Manually (recommended if you cloned from git) — `npm install \u0026\u0026 npm run build`\n\nNext, simply add `lib/qmlweb.js` to the list of other JavaScript files in your\napp's HTML file:\n\n```HTML\n\u003cscript type=\"text/javascript\" src=\"/lib/qmlweb.js\"\u003e\u003c/script\u003e\n```\n\nSee the [examples](examples) directory for more details and complete usage\nexamples.\n\n### Testing from a local folder\n\nNote that due to security restrictions (which are there to protect you!)\nbrowsers do not allow loading arbitrary local files, which includes `*.qml`.\n\nBecause of that, to test the goodness of QmlWeb on your own machine, you\nhave to spin up a local http server, e.g. by running `npx http-server`.\n\nOr try out [qmlweb-viewer](https://github.com/qmlweb/qmlweb-viewer).\n\n### API\n\nYou can use DOM elements as the base for QML components:\n\n```js\nvar div = document.getElementById('embed'); // this is your DOM element\nvar engine = new QmlWeb.QMLEngine(div);\nengine.loadFile('qml/main.qml');\nengine.start();\n```\n\nSee also\n[`engine.loadQML`](docs/QMLEngine.md#engineloadqmlsrc-parentcomponent--file-)\nfor constructing a QML element from a source string.\n\n### Auto-load\n\nYou can modify the `\u003cbody\u003e` element to specify what QML file to load when\nthe page is opened. The loaded QML element will fill the whole page.\n\n```HTML\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003eQML Auto-load Example\u003c/title\u003e\n    \u003cscript type=\"text/javascript\" src=\"/lib/qmlweb.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody style=\"margin: 0\" data-qml=\"qml/main.qml\"\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Web Components\n\nYou can register QML files as\n[Custom Elements](https://www.w3.org/TR/custom-elements/).\n\nNote: browser support for Custom Elements v1 is limited, and QmlWeb does not\ninclude a polyfill. You might want to load a\n[polyfill](https://github.com/webcomponents/custom-elements) manually.\n\nRegistering the element:\n\n```js\nQmlWeb.registerElement('qml-main', 'qml/main.qml');\n```\n\nUsing the element:\n\n```html\n\u003cqml-main height=\"300\" color=\"red\" firstName=\"World\"\u003e\u003c/qml-main\u003e\n```\n\nTop-level properties get exported as HTML attributes and are binded to them,\nreal-time updates are possible.\n\n## Supported modules and elements\n\nApproximate modules support status for the git version could be viewed on the\n[Projects](https://github.com/qmlweb/qmlweb/projects/1) page.\n\nYou can click on the module cards for per-class details.\n\n## How to use with Gulp\n\nSee [gulp-qmlweb](https://github.com/qmlweb/gulp-qmlweb) package.\n\n## How to extend\n\nSee [Extending](docs/Extending.md).\n\n## Related efforts\n\n### [Qt Quick WebGL streaming](http://blog.qt.io/blog/2017/02/22/qt-quick-webgl-streaming/)\n\nThat will allow users to run the main Qt process on the server and render on\nHTML clients through WebGL. Qt WebGL streaming requires one application process\non server per each client — only the painting is delegated to the client.\n\nThe usecase differs significantly from QmlWeb, as QmlWeb runs all code on the\nclients, attempting to reuse browser APIs as much as possible to provide\nbetter integration. No server-side code is needed, server provides static files.\n\n### [PureQml framework](https://github.com/pureqml/qmlcore)\n\nPureQml aims to implement a language close to original QML, but it does not\ntarget 100% compatibility with Qt QML, unlike QmlWeb.\nThey also provide a framework based on their language and target support for a\ngreat variety of platforms.\n\n### [Qt/QML + Emscripten](https://dragly.org/2016/04/27/experimental-qt-and-qml-in-the-browser/)\n\nTransplitting all the required Qt/QML libraries to JS/WebAssembley and rendering\neverything to Canvas provides the best possible compatibility with upstream Qt.\nThat comes at a price, though — the runtime is pretty big, and that approach\ndoes not allow to reuse many existing browser APIs and components.\n\n### [Qt for WebAssembly port](https://github.com/msorvig/qt-webassembly-examples/)\n\nSimilar as the above «Qt/QML + Emscripten», but more up to date.\nUpstream issue: [QTBUG-63917](https://bugreports.qt.io/browse/QTBUG-63917).\n\nExamples at \u003chttps://msorvig.github.io/qt-webassembly-examples/\u003e.\n","funding_links":[],"categories":["JavaScript","Misc"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqmlweb%2Fqmlweb","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqmlweb%2Fqmlweb","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqmlweb%2Fqmlweb/lists"}