FEATURE · DATA

See your GeoJSON live. Edit it when you need to.

A syntax-highlighted, two-way GeoJSON editor in every package. Press I to open.

The GeoJSON window showing the raw FeatureCollection with syntax highlighting, next to the polygons it describes.
Read and edit the raw FeatureCollection. Syntax highlighting via CodeMirror 6.

Try it

  1. 1Press I to open the GeoJSON
  2. 2Click the market: its feature lights up
  3. 3⌘-drag the entrance pin: its coordinates follow

Open in full playground →

What GeoJSON users actually need

Developers need to see the raw output, verify it's clean, copy it, paste it into other tools. Teams using a map editor in production need to fix bad imports, tweak property values across features, and debug integration errors — without clicking through a UI for every edit.

The GeoJSON editor answers both. Press I, see exactly what's in your FeatureCollection, copy it, download it, or paste in something new and commit.

What you get

Two-way editing. Open the editor, paste a new FeatureCollection, tweak property values, delete a feature by removing its entry. Valid edits apply to the map as you type, after a short pause.

JSON validation. Invalid JSON is underlined where it breaks, and a status line says where (click it to jump there). Nothing from the text applies until it's fixed.

Schema-aware validation. Property values that break a feature's schema (required field missing, number outside its range) are applied and flagged on the feature, the same as an edit anywhere else.

Syntax-highlighted view. CodeMirror 6 under the hood — the same editor VS Code for the Web uses.

Copy and download. One click to copy the entire FeatureCollection. Download as a .geojson file with proper extension and MIME type.

Shortcut and position

Press I to toggle. The editor is a movable, resizable window — drag to reposition, drag the corner to resize — or dock it beside the layers panel. Its size and docked state persist in localStorage.

How it works with onChange

The editor renders the live FeatureCollection — the same object that onChange delivers. What you see is what you get.

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

export default function App() {
  return (
    <ElementEditor
      onChange={(data) => {
        // `data` is exactly what the editor shows
        saveToBackend(data)
      }}
    />
  )
}

This matters when you're building an integration: you can verify the shape and values before writing any server code. No guessing, no "does the callback strip this field?" questions. The editor is your contract.

Things to know before you ship

  • Free under MIT. Two-way editing ships in every package. No license check, no feature gate.
  • Large files have a reasonable ceiling. The editor renders up to ~1 MB of GeoJSON comfortably. For multi-megabyte datasets, use a dedicated file viewer or paginated export.
  • Invalid JSON never applies. While the text isn't valid JSON (or a feature has no valid type or geometry), nothing from it applies, not even valid edits in other features. Close the editor and the unapplied text is kept as a draft for next time. Schema problems don't block an edit; they're flagged on the feature.

Works with

  • Schemas — the editor shows metadata.schemas and per-feature schemaId on the wire, exactly as they export.
  • Data table — the table's edits and the editor's edits affect the same FeatureCollection. Use whichever surface fits the task.
  • Import and export — paste into the editor, or use the import tools for larger files.

Ready to try it?

Open in playground →

Read the docs · See pricing