Skip to content
QGIS SDK

Add a web UI

Use a web UI when a QGIS plugin needs a page hosted in QWebEngineView. The Python plugin still owns its actions; the page calls them over the bridge. Install the developer kit and a JavaScript package manager first.

Scaffold a web project

Section titled “Scaffold a web project”
Terminal window
qgis-sdk new field_tools --web vanilla --placement dock --package-manager bun --no-input
cd field_tools

The scaffold writes a Python plugin and a web/ page with a generated bridge schema. Install its JavaScript dependencies before running the page’s scripts. The project scaffold reference describes other framework, placement and package-manager options.

Test the two sides

Section titled “Test the two sides”
Terminal window
qgis-sdk check
qgis-sdk test
cd web
bun install
bun run test
cd ..

Python tests exercise the plugin on fakes. Page tests use a scripted bridge, not a live QGIS host; see testing against a scripted host.

Connect the page

Section titled “Connect the page”

The generated page creates a QgisSdk from bridge.schema.ts and invokes methods declared by the plugin. After changing declarations, regenerate the schema with qgis-sdk bridge generate; see the schema module and QgisSdk and the host-side bridge.

Run on QGIS Desktop

Section titled “Run on QGIS Desktop”
Terminal window
qgis-sdk dev

A supported QGIS Desktop and display are required. The developer command runs the plugin and its web dev server; edits reload during development. See developing against QGIS and supported targets.