PACKAGE

@element-editor/react@element-editor/react

Element Editor's self-contained map editor in one React component. Owns the map, the toolbar, and all editor state. Zero configuration to start.

InstallInstall

npm install @element-editor/react maplibre-gl

UsageUsage

import { ElementEditor } from '@element-editor/react'
import '@element-editor/react/style.css' // includes MapLibre's CSS

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

That's it. The component mounts a MapLibre map with the Streets basemap (Dark in dark mode), renders the toolbar, and is ready to draw. No provider setup, no route configuration, no map-instance lifecycle management.

Using Leaflet instead

The default <ElementEditor> runs on MapLibre. (In the unpublished 0.1 pre-release it ran on Leaflet; see Migrating to 0.2 if you built against it.) For the Leaflet version, install @element-editor/adapter-leaflet leaflet react-leaflet and import from the /leaflet entry:

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

The props and ref are the same. tileLayer and renderer exist on the Leaflet entry only; on MapLibre use basemap and basemaps.

When to pick this packageWhen to pick this package

Use @element-editor/react when:

• You don't have a map yet, or you're starting a new project with no constraint on the map library.
• You want everything assembled, including the toolbar, layers panel, data table, schema editor, and GeoJSON viewer.
• You don't need to customise the map layout. The component owns its viewport.

Use @element-editor/adapter-maplibre or @element-editor/adapter-leaflet instead when you already have a map instance you want to keep.

Key propsKey props

Full prop reference and ref API in the docs.

Imperative API via refImperative API via ref

import { useRef } from 'react'
import { ElementEditor, type ElementEditorRef } from '@element-editor/react'

export default function App() {
  const ref = useRef<ElementEditorRef>(null)

  return (
    <>
      <div style={{ height: 600 }}>
        <ElementEditor ref={ref} />
      </div>
      <button onClick={() => ref.current?.getFeatureCollection()}>
        Export
      </button>
      <button onClick={() => ref.current?.undo()}>Undo</button>
    </>
  )
}

ElementEditorRef methods include getFeatureCollection, getFeature, setFeatureCollection, importGeoJSON, exportGeoJSON, addFeature, updateFeature(s), removeFeatures, select, setTool / getTool, getMap, getBasemap / setBasemap, flyTo, fitBounds, undo / redo, canUndo / canRedo, validate and submit.

BasemapsBasemaps

Five basemaps are built in (Streets, Terrain, Light, Dark, OpenStreetMap), the vector ones served from OpenFreeMap, all with no API key, and a picker lets users switch. 'auto' follows the editor theme. Pass defaultBasemap to choose the starting one (or basemap + onBasemapChange to control it from your app), and basemaps to set what the picker offers:

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

<ElementEditor
  defaultBasemap="auto"
  basemaps={[
    'auto', 'streets', 'dark',
    {
      id: 'satellite',
      label: 'Satellite',
      url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
      attribution: 'Tiles © Esri',
    },
  ]}
/>

Pass basemaps={false} to hide the picker. Any raster tile URL or MapLibre style works. See the basemaps guide and map styles.

What's includedWhat's included

Everything from the Element Editor feature set, pre-assembled:

• Every drawing tool (including the OpenStreetMap picker)
• Vertex editing, selection & transform, snapping
• Boolean operations and geometry processing
• Measure
• Schemas — typed property fields with code-defined or in-app editing (S)
• Data table — spreadsheet view with inline editing (T)
• GeoJSON editor — two-way editing with JSON and schema validation (I)
• Import and export
• Keyboard shortcuts (every tool remappable)
• Theming (light, dark, auto, brand colour via accentColor or --elm-accent, design tokens for fonts, radii, surfaces and more)

Versions and dependenciesVersions and dependencies

• React and React DOM ^19.2 — React 18 is not supported (the data table needs 19.2).
• TypeScript — types ship in the package. With the /leaflet entry, also install @types/leaflet.
• Peer deps: react, react-dom ^19.2, maplibre-gl ^5.5. For the /leaflet entry, also install @element-editor/adapter-leaflet, leaflet ^1.9 and react-leaflet ^5 (optional peers).
• Dependencies: @element-editor/core, @element-editor/ui and @element-editor/adapter-maplibre are installed alongside, not bundled. ES modules plus .cjs; the geometry worker is inlined, so no bundler configuration is needed.
• CSS: the stylesheet only styles the editor; it doesn't reset your page.

Ready to build?Ready to build?

Read the quickstart →

Open the playground · Full API reference · See the adapter-maplibre package