Documentation

QML Fiddle provides a Web-browser based environment for compiling and previewing simple QML documents.
The name is an obvious reference to the quite popular JSFiddle.

The engine is power by Qt for WebAssembly. The source code of the project is available on GitHub and is distributed under the GPLv3 license (as required by the use of Qt for WebAssembly).

Qt version

The engine runs on Qt 6.8.

Supported QML modules

The following QML modules are supported:

• QtQuick
• QtQuick.Controls
• QtQuick.Layouts

Extra modules

QMLFiddle provides some extra modules.

FileUtils

This module provides filesystem-related utilities.

Because the code runs in the Web browser, this is not the computer filesystem but rather a virtual filesystem. See the emscripten File System Overview for more information.

import FileUtils

FileUtils.exists(filePath : string) : bool

Returns whether a file exists.

FileUtils.readdir(dirPath : string) : list<string>

Returns a list of file and directory names in a directory.

QmlFiddle

This module provides functions for tweaking the engine.

import QmlFiddle

QmlFiddle.backgroundColor : color

This property can be used to get or set the background color of the QML window.

QmlFiddle.resetBackgroundColor() : void

This function resets the background color to its default value.

Built-in resources

The engine integrates some assets which are available by default. These are listed in the follwing table:

Importable resources

Because resources integrated by default must be shipped whether they are used are not, there are very few of them.

If needed, extra resources can be downloaded on the fly. To do so, a "FetchResource" pragma must be placed at the beginning of the document. For example:

pragma FetchResource: "vscode-icons"

The following table lists the available resource packs:

Importing another fiddle

It is possible to reuse existing fiddles by dynamically importing them. To do so, a ImportFiddle pragma must be placed at the beginning of the document. Example:

pragma ImportFiddle: "ExternalComponent@aef29"

The string literal used in the pragma defines both the name under which the component becomes available and the id of the fiddle (separated by the "@" character). In the above example: "aef29" is id of the fiddle; "ExternalComponent" is the name to use to refer to the component.