Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/qmlweb/qmlweb
A QML engine in a web browser. Current state: fixing things…
https://github.com/qmlweb/qmlweb
declarative declarative-ui html html5 javascript qml qmlweb
Last synced: 1 day ago
JSON representation
A QML engine in a web browser. Current state: fixing things…
- Host: GitHub
- URL: https://github.com/qmlweb/qmlweb
- Owner: qmlweb
- License: other
- Created: 2016-02-14T06:06:03.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2022-04-11T15:07:47.000Z (over 2 years ago)
- Last Synced: 2024-12-22T13:02:41.120Z (9 days ago)
- Topics: declarative, declarative-ui, html, html5, javascript, qml, qmlweb
- Language: JavaScript
- Homepage: https://qmlweb.github.io/
- Size: 5.31 MB
- Stars: 780
- Watchers: 74
- Forks: 100
- Open Issues: 80
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# JavaScript powered QML Engine
[](https://gitter.im/qmlweb/qmlweb)
[](https://travis-ci.org/qmlweb/qmlweb)
[](https://codecov.io/gh/qmlweb/qmlweb)
[](https://www.npmjs.com/package/qmlweb)
[](http://bower.io/search/?q=qmlweb)
[](https://github.com/qmlweb/qmlweb/releases)
This project aims at bringing the power of QML to the web browser.
Here's a sample of how QML looks like:
```QML
import QtQuick 2.0
Rectangle {
width: 500; height: 200
color: "lightgray"
Text {
id: helloText
text: "Hello world!"
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
font.pointSize: 24; font.bold: true
}
}
```
## How to use
### Add the library to your web page
Using one of the methods below, install the qmlweb JavaScript library:
* [npm](https://www.npmjs.com/package/qmlweb) — `npm install qmlweb`
* GitHub [releases](https://github.com/qmlweb/qmlweb/releases) —
`tar -xaf v0.2.0.tar.gz`
* Manually (recommended if you cloned from git) — `npm install && npm run build`
Next, simply add `lib/qmlweb.js` to the list of other JavaScript files in your
app's HTML file:
```HTML
```
See the [examples](examples) directory for more details and complete usage
examples.
### Testing from a local folder
Note that due to security restrictions (which are there to protect you!)
browsers do not allow loading arbitrary local files, which includes `*.qml`.
Because of that, to test the goodness of QmlWeb on your own machine, you
have to spin up a local http server, e.g. by running `npx http-server`.
Or try out [qmlweb-viewer](https://github.com/qmlweb/qmlweb-viewer).
### API
You can use DOM elements as the base for QML components:
```js
var div = document.getElementById('embed'); // this is your DOM element
var engine = new QmlWeb.QMLEngine(div);
engine.loadFile('qml/main.qml');
engine.start();
```
See also
[`engine.loadQML`](docs/QMLEngine.md#engineloadqmlsrc-parentcomponent--file-)
for constructing a QML element from a source string.
### Auto-load
You can modify the `` element to specify what QML file to load when
the page is opened. The loaded QML element will fill the whole page.
```HTML
QML Auto-load Example
```
### Web Components
You can register QML files as
[Custom Elements](https://www.w3.org/TR/custom-elements/).
Note: browser support for Custom Elements v1 is limited, and QmlWeb does not
include a polyfill. You might want to load a
[polyfill](https://github.com/webcomponents/custom-elements) manually.
Registering the element:
```js
QmlWeb.registerElement('qml-main', 'qml/main.qml');
```
Using the element:
```html
```
Top-level properties get exported as HTML attributes and are binded to them,
real-time updates are possible.
## Supported modules and elements
Approximate modules support status for the git version could be viewed on the
[Projects](https://github.com/qmlweb/qmlweb/projects/1) page.
You can click on the module cards for per-class details.
## How to use with Gulp
See [gulp-qmlweb](https://github.com/qmlweb/gulp-qmlweb) package.
## How to extend
See [Extending](docs/Extending.md).
## Related efforts
### [Qt Quick WebGL streaming](http://blog.qt.io/blog/2017/02/22/qt-quick-webgl-streaming/)
That will allow users to run the main Qt process on the server and render on
HTML clients through WebGL. Qt WebGL streaming requires one application process
on server per each client — only the painting is delegated to the client.
The usecase differs significantly from QmlWeb, as QmlWeb runs all code on the
clients, attempting to reuse browser APIs as much as possible to provide
better integration. No server-side code is needed, server provides static files.
### [PureQml framework](https://github.com/pureqml/qmlcore)
PureQml aims to implement a language close to original QML, but it does not
target 100% compatibility with Qt QML, unlike QmlWeb.
They also provide a framework based on their language and target support for a
great variety of platforms.
### [Qt/QML + Emscripten](https://dragly.org/2016/04/27/experimental-qt-and-qml-in-the-browser/)
Transplitting all the required Qt/QML libraries to JS/WebAssembley and rendering
everything to Canvas provides the best possible compatibility with upstream Qt.
That comes at a price, though — the runtime is pretty big, and that approach
does not allow to reuse many existing browser APIs and components.
### [Qt for WebAssembly port](https://github.com/msorvig/qt-webassembly-examples/)
Similar as the above «Qt/QML + Emscripten», but more up to date.
Upstream issue: [QTBUG-63917](https://bugreports.qt.io/browse/QTBUG-63917).
Examples at .