Quickstart.

1. Install

Two workspace packages. The compiler turns .xgis source into IR + WGSL; the runtime mounts on a <canvas> and renders.

bun add @xgis/compiler @xgis/runtime
# or npm / pnpm / yarn — works the same

2. Declare a data source

A source block points at the data. Three fields — type, url, and an optional layers filter — cover GeoJSON, PMTiles, TileJSON, and raster XYZ.

source world {
  type: geojson
  url: "data/ne_110m_countries.geojson"
}

Want the full menu of source kinds? See Source types.

3. Style a layer

A layer references a source by name and stacks Tailwind-style utilities on a | line. Multiple | blocks compose; later utilities win on conflict.

layer countries {
  source: world
  | fill-stone-200 stroke-stone-400 stroke-1
}

Every utility is documented in the utility catalog; expressions and operators in Expressions.

4. Mount on a canvas

Two-line JS — new XGISMap(canvas) then map.run(source, baseUrl). The compiler runs in the browser; the runtime owns the WebGPU context.

import { XGISMap } from '@xgis/runtime'
import source from './map.xgis?raw'

const canvas = document.getElementById('map')
const map = new XGISMap(canvas)
await map.run(source, '/')

For a custom-element flavour (<x-gis-map src="…">), see the JavaScript API.

Next steps

That's the whole loop. From here:

• → Open the playground and edit the example live — the editor recompiles on save.
• → Browse the cookbook for copy-paste patterns — 3D buildings, categorical fill, zoom-fade roads.
• → Coming from Mapbox? The compatibility guide maps your existing style spec onto xgis.
• → Browse 40+ examples grouped by category — basemaps, vector tiles, animation, interaction.