Add a map data editor to your app.Add a map data editor to your app.

npm install @element-editor/react maplibre-gl

import { ElementEditor } from '@element-editor/react'
import '@element-editor/react/style.css'

export default function App() {
  return (
    <div style={{ width: '100%', height: '600px' }}>
      <ElementEditor onChange={(data) => console.log(data)} />
    </div>
  )
}

npm install @element-editor/adapter-leaflet @element-editor/ui leaflet react-leaflet

import { MapContainer, TileLayer } from 'react-leaflet'
import { ElementEditorUIProvider, GeoStoreProvider, ElementEditorControls } from '@element-editor/adapter-leaflet'
import '@element-editor/adapter-leaflet/style.css'

<ElementEditorUIProvider>
  <GeoStoreProvider>
    <div data-elm-theme="light" style={{ position: 'relative', width: '100%', height: '600px' }}>
      <MapContainer center={[48.86, 2.35]} zoom={5} style={{ width: '100%', height: '100%' }}>
        <TileLayer url="https://tile.openstreetmap.org/{z}/{x}/{y}.png" attribution="&copy; OpenStreetMap contributors" />
        <ElementEditorControls onChange={(data) => console.log(data)} />
      </MapContainer>
    </div>
  </GeoStoreProvider>
</ElementEditorUIProvider>

npm install @element-editor/adapter-maplibre @element-editor/ui maplibre-gl

import { ElementEditorUIProvider, GeoStoreProvider, ElementEditorControls } from '@element-editor/adapter-maplibre'
import 'maplibre-gl/dist/maplibre-gl.css'
import '@element-editor/adapter-maplibre/style.css'

// containerRef, mapRef, mapReady: create the map in a useEffect (see quickstart)
<ElementEditorUIProvider>
  <GeoStoreProvider>
    <div data-elm-theme="light" style={{ position: 'relative', width: '100%', height: '600px' }}>
      <div ref={containerRef} style={{ width: '100%', height: '100%' }} />
      {mapReady && mapRef.current && (
        <ElementEditorControls map={mapRef.current} onChange={(data) => console.log(data)} />
      )}
    </div>
  </GeoStoreProvider>
</ElementEditorUIProvider>

What you won't find in Geoman, Leaflet.Draw, or Mapbox GL Draw.What you won't find in Geoman, Leaflet.Draw, or Mapbox GL Draw.

Most map editors stop at geometry. Element ships the data side too: typed properties, a table to edit them, and the raw GeoJSON, all inside the editor, so you don't build that tooling yourself.

• Typed properties, right in the GeoJSON.

  Most map libraries draw shapes. The data side is a bag of untyped properties you have to clean up in your backend.

  Element adds a schema layer: named, typed fields — text, textarea, number, URL, select, date, boolean — with optional validation. Draw a shape, fill in a real form, get back GeoJSON with structured properties.

  Schemas export with the data and import back intact. Define them in code, or edit them in-app with the schema editor.

  Learn more→
• A real data table, in the editor.

  A spreadsheet view of every feature in the collection. Edit property values inline. Rows and map selection stay synced — click a row, the map selects and pans; select on the map, the row highlights.

  Columns are generated from the active schema. Sort, resize, paste into cells. Virtualized rows, so it scales to thousands of features.

  Learn more→
• Two-way GeoJSON editor.

  Open the GeoJSON editor and you see exactly what onChange delivers. Syntax-highlighted via CodeMirror 6. Paste in a new FeatureCollection or tweak property values, and valid edits apply to the map as you type. Invalid JSON is underlined, a status line says where, and nothing applies until it's fixed; close the editor mid-edit and your unapplied text is still there when you reopen it.

  Useful for debugging, for power users, and for anyone building an integration who wants to manipulate exactly what onChange delivers.

  Learn more→

Built for big datasets.Built for big datasets.

Pan, zoom, select and drag across 5,000 features at a median 60 fps, and reshape a single 50,000-point boundary, without the page freezing. Measured on both Leaflet and MapLibre, not estimated.

• Panning 5,000 features: 0 ms of main-thread blocking on both maps, median frame 16.7 ms (60 fps)
• Dragging one shape among 5,000: 0 ms of blocking on Leaflet, 21 ms on MapLibre
• One 50,000-point boundary: point editing opens in 0.1–0.16 s, with handles only on the points near you
• GeoJSON editor with 5,000 features: content on screen in under 0.1 s, fully loaded in about 0.3 s
• Longest single main-thread task in any interaction measured: under 200 ms

Works with your stack.Works with your stack.

Sensible basemaps out of the box, and no lock-in: swap in any tile provider. No routing opinions. No state management opinions. Element is the editing layer — bring everything else.

• React 19.2+, Next.js, Vite, or Remix
• Leaflet, MapLibre GL, MapTiler SDK, or Mapbox GL JS
• Built-in free basemaps (no API key), or any tile provider you already use

Features exit as RFC 7946 GeoJSON. Your backend, database, and analytics pipeline don't need to change.

Built on standards. No lock-in.Built on standards. No lock-in.

Everything you draw is saved as standard GeoJSON, the format map libraries, spatial databases, and GIS tools already read. Coordinates are plain longitude and latitude. A route is an ordinary line. A circle is stored as a polygon with a small extra field, so Element can reopen it as a circle while other tools simply see a polygon. Remove Element at any time and your data keeps working everywhere else.

What is GeoJSON? · The GeoJSON spec (RFC 7946) ↗

Start with the docs.Start with the docs.

• Quickstart — Install and render your first editor in five minutes. @element-editor/react · adapter-leaflet · adapter-maplibre.
• Guides — Persistence, schemas, theming, Next.js, large datasets. Task-first how-tos.
• Tools — Every drawing tool and editing mode, documented. Keys, output geometry, constraints.
• Reference — Props, types, events — the full API surface. ElementEditorProps, ElementEditorRef, Schema, FeatureCollection.
• GeoJSON guides — Format spec, geometry types, Python, Leaflet, Mapbox, PostGIS, and more. 15 practical references.

Built for developers who ship.Built for developers who ship.

Start in the playground. Finish in production.

Open the playground → · Read the quickstart · View on GitHub ↗