v0.5 · WebGIS-ready · MIT

Beautiful UI for your web map.

A lightweight CSS framework for Leaflet-based web maps. Works great with qgis2web exports — and with any WebGIS or mapping project.

See real example Browse components

terminal · install copy

# 1. Install
npm install q2w

# 2. Drop into your qgis2web export's index.html
<link rel="stylesheet" href="q2w/dist/q2w.css">

# 3. Add a header — that's it
<div class="q2w-header"> ... </div>

03 · WHY q2w

qgis2web is great. Its UI isn't.

qgis2web ships a working Leaflet map in seconds — but the layer control, popup, and chrome haven't really changed in years. Most teams end up rewriting them from scratch on every project.

q2w fixes that once. Pre-styled components, a coherent token system, dark mode, and themes — all in a CSS file you drop in alongside the export.

q2w works on any Leaflet-based web map, not just qgis2web exports.

Inspired by mapcn, but focused on Leaflet (because qgis2web exports there) and on the thematic-map use cases QGIS users actually build.

Vanilla qgis2web

Layer 1

Layer 2

With q2w

✓Land value90%

✓Roads100%

Popup

name: Mekarjaya
value: 720000

Popup

Beautiful UI for your web map.

Built for thematic maps.

qgis2web is great. Its UI isn't.