COMPARE

Element Editor vs GeomanElement Editor vs Geoman

Geoman is a great fit for plain-JavaScript Leaflet, MapLibre and Mapbox apps that don't need typed data. Element adds React, a schema layer, and a data table on top of a similar drawing and editing foundation.

TL;DR — who each one is forTL;DR — who each one is for

Geoman is the right choice if you're shipping a Leaflet, MapLibre or Mapbox GL JS application without React, your team writes vanilla JavaScript or TypeScript, and the data your features carry is simple enough that untyped properties works. Geoman has years of production mileage, and its free packages are MIT-licensed.

Element is the right choice if you're building with React, or you need typed property schemas, a built-in data table, or a two-way GeoJSON editor. Everything Element ships today is MIT-licensed.

Both produce standard RFC 7946 GeoJSON. Migration between them is feasible.

Feature comparisonFeature comparison

What Element has that Geoman doesn'tWhat Element has that Geoman doesn't

A React drop-in. @element-editor/react is a single component that owns the map, the toolbar, and all editor state. Geoman's approach is to provide the Leaflet/MapLibre/Mapbox plugin and let React users wrap it themselves.

A typed schema layer. Define schemas with typed fields (text, number, url, date, select, and more) and validation rules. The editing form is generated automatically. Schemas travel with the GeoJSON as a foreign member.

A built-in data table. Spreadsheet view of every feature, inline editing, sync with map selection. Press T to open it. Nothing equivalent in Geoman.

A two-way GeoJSON editor. See the raw FeatureCollection live as you work, edit it, and watch the map update. Press I to open it. Geoman doesn't ship an inspector.

Boolean and processing operations in the box. Union, intersect, subtract, cut hole, slice, plus buffer, simplify, smooth, break apart, and merge — all in the MIT package. In Geoman, cut is free; split, union, difference and line simplification are Pro. Polygon booleans, cut hole, slice and the buffer/simplify/smooth previews run in a Web Worker so the main thread stays responsive.

What Geoman has that Element doesn'tWhat Geoman has that Element doesn't

Years of production mileage. Leaflet-Geoman has been on npm since 2016 (first as Leaflet.pm) and still ships regular releases. Element is new and hasn't reached 1.0 yet. If production-proven maturity is your primary evaluation criterion, Geoman is ahead today.

No framework required. Geoman runs in plain JavaScript on Leaflet, MapLibre, or Mapbox GL JS. Element is built on React and needs React 19.2 or later, so a codebase without React adds it to use Element.

More specialised drawing aids. Geoman offers text markers, circle markers and, on MapLibre, ellipses; Geoman Pro adds auto-tracing along existing edges, snap guides, and geofencing. Element doesn't have these yet.

Migrating from GeomanMigrating from Geoman

// Before — Leaflet-Geoman
map.pm.addControls({
  position: 'topleft',
  drawCircle: false,
})

map.on('pm:create', (e) => {
  const geojson = e.layer.toGeoJSON()
  saveToBackend(geojson)
})

// After — Element's @element-editor/adapter-leaflet
import { MapContainer, TileLayer } from 'react-leaflet'
import {
  ElementEditorUIProvider, GeoStoreProvider, ElementEditorControls,
  FloatingToolbar, EditingToolbar, ActiveDrawingToolbar,
} from '@element-editor/adapter-leaflet'
import '@element-editor/adapter-leaflet/style.css'

<ElementEditorUIProvider>
  <GeoStoreProvider>
    <div data-elm-theme="light" style={{ position: 'relative', height: 600 }}>
      <MapContainer center={[48.86, 2.35]} zoom={12} style={{ height: '100%' }}>
        <TileLayer url="..." />
        <ElementEditorControls
          tools={['polygon', 'line', 'point', 'rectangle']}
          onFeatureAdd={(feature) => saveToBackend(feature)}
        />
      </MapContainer>
      <FloatingToolbar />
      <EditingToolbar />
      <ActiveDrawingToolbar />
    </div>
  </GeoStoreProvider>
</ElementEditorUIProvider>

Migration is worth it if you're moving to React or adding typed data. It's not urgent for a stable pure-Leaflet integration.

Frequently askedFrequently asked

Is Element a drop-in replacement for Geoman? Not quite. Feature sets overlap, but Element's API is declarative (React component with props) where Geoman's is imperative (map.pm.* methods). Migration is straightforward if you're using React; more involved for pure-Leaflet codebases.

What does Element cost? Everything Element ships today is MIT-licensed and free for any use, including commercial. A Pro tier with collaboration, advanced visualisation, charts, and analytics is in the works — see the pricing page for the current state.

Does Element work with MapLibre and Mapbox GL JS like Geoman does? Yes. @element-editor/adapter-maplibre supports MapLibre GL JS, MapTiler SDK, and Mapbox GL JS (they share API lineage; with Mapbox GL JS, TypeScript needs one cast on the map instance), with the same API as the Leaflet adapter.

What's the licensing difference? Element is MIT, full stop — every feature documented on this page is in the open-source package. Geoman ships MIT-licensed free packages alongside a commercial Geoman Pro licence, which adds splitting, scaling, union and difference, measurement, auto-tracing, and more.

I'm already using Geoman in production. Should I switch? Only if you need React as a first-class target, typed schemas, a data table, or a GeoJSON editor. For a stable pure-Leaflet deployment, the switch isn't urgent. For a new React project, Element's drop-in is a clear simplification over building on top of Geoman.

Ready to try Element?Ready to try Element?

Read the quickstart →

Open the playground · See pricing · Compare with Leaflet.Draw →