INTEGRATION

Element Editor with Vite

One install, one import. Vite's defaults handle everything.

Install

npm install @element-editor/react maplibre-gl

Minimal example

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

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

No plugins, no config, no workarounds. Vite's ESM-first defaults handle the MapLibre dependency chain directly.

With TypeScript

If your Vite project is TypeScript-based (the default for npm create vite@latest), types are picked up automatically from the package:

import type { FeatureCollection, Schema } from '@element-editor/react'

With Vite's build.minify

Element ships as ES modules (with .cjs builds for CommonJS) and tree-shakes cleanly. Vite's default config works in both dev and build: the geometry worker is inlined, so you don't need a worker plugin or optimizeDeps exclusions.

Known gotchas

  • CSS. Import @element-editor/react/style.css explicitly; the JavaScript doesn't import it. It already includes MapLibre's CSS, and it doesn't reset your page's styles.
  • Env vars for routing API. If you use the route tool, config.network.routing.apiKey comes from import.meta.env.VITE_ORS_KEY or similar. Vite only exposes vars prefixed with VITE_ to client code.
  • Development proxy for tile servers. If your tile source needs CORS shim, use vite.config.ts's server.proxy — not an Element concern, but a common first-setup question.

Ready to ship?

Read the quickstart →

React integration

Tile layers guide