Web Dojo

The Web Dojo is a browser-based QML playground powered by Clayground compiled to WebAssembly. No Qt installation, no build tools — just open a URL and start coding.

Quick Start

Open the Web Dojo
Pick an example from the gallery (or click + to start from scratch)
Switch to the editor view, change some code
Hit Run or enable auto-reload to see your changes live

That’s it. All of Clayground’s bundled plugins (Canvas, Canvas3D, Physics, World, GameController, SVG, Storage) are available.

Develop with Your Own Files

You can point the Web Dojo at QML files on your machine. The recommended approach is the clay-dev-server, which provides file watching with automatic live-reload via SSE:

# Install the dev server
pip install clay_dev_server

# Serve your project with live-reload
clay-dev-server ~/my-qml-project

Then open the Web Dojo’s Dev Server pane (monitor icon in the sidebar) and click Connect. Edit Main.qml in your editor and changes are pushed to the browser automatically.

clay-dev-server also includes a built-in PeerJS signaling relay, enabling browser-based P2P networking on a LAN without internet. Install the signaling extra with pip install clay_dev_server[signaling]. See the Network plugin docs for details.

Alternatively, any HTTP server works (without auto-reload):

cd ~/my-qml-project
python3 -m http.server 9000

Then load via the URL pane or directly:

https://clayground.mistergc.dev/webdojo/#clay-src=http://localhost:9000/Main.qml

Load from GitHub

Host your QML on GitHub and load it directly via raw URL:

https://clayground.mistergc.dev/webdojo/#clay-src=https://raw.githubusercontent.com/user/repo/main/Main.qml

Relative imports work — if your Main.qml references other files in the same directory, the WASM runtime resolves them from the same base URL.

Click the Share button in the Web Dojo to generate a URL with your code compressed into the hash. Anyone with the link sees your exact code and can run it instantly.

Standalone Mode

Click Standalone to generate a clean URL that shows only the running app — no editor, no header. Use this to embed Clayground demos in other sites or share playable links.

URL Parameters

Control the Web Dojo UI through URL hash parameters:

Parameter	Values	Description
`clay-src`	URL or `example:<name>`	QML source to load
`clay-ed`	`0` / `1`	Show/hide editor
`clay-con`	`0` / `1`	Show/hide console
`clay-hd`	`0` / `1`	Show/hide header
`clay-fs`	`0` / `1`	Show/hide fullscreen button
`clay-br`	`0` / `1`	Show/hide Clayground branding
`clay-version`	`dev`, `latest`, or tag	Select WebDojo WASM version

Example — clean embed with no UI chrome:

/webdojo/#clay-src=http://localhost:9000/Main.qml&clay-hd=0&clay-ed=0&clay-con=0

Limitations

The Web Dojo is great for prototyping and sharing, but has some constraints compared to the desktop Dojo:

Single-file QML — No multi-file project support (though relative imports from URL sources work)
Pre-bundled plugins only — You can’t add custom C++ plugins
Network plugin requires clay-dev-server — Browser P2P networking works via WebRTC/PeerJS but needs clay-dev-server as local signaling relay (see Network plugin)
No file system access — Storage plugin uses browser localStorage instead
Slower iteration — Desktop Dojo reloads on file save automatically; Web Dojo supports auto-reload via clay-dev-server but plain HTTP servers require manual refresh

When to Switch to Desktop Dojo

Consider installing Clayground locally when you need:

Multi-file projects with custom components
Custom C++ plugins with hot-reloading
Automatic reload on file save (no manual refresh)
Full debugger and profiler access
Network/multiplayer without clay-dev-server
The fastest possible iteration speed

Search Results