Frameworks
The editor is plain DOM with no framework of its own, so it works the same way everywhere:
- Create it once the element is on the page:
createMapper(element, { document: map, onChange }). - Hear about edits through
onChange, which gets a copy of the new map after every change. - Destroy it when the element goes:
mapper.destroy().
Each framework has its own way of doing those three things. The pages here each give a ready-made editor component, how to use it, and what to watch for in that framework's server-rendering setup.
| Framework | Page | Also covers |
|---|---|---|
| React | React | Next.js, Preact |
| Vue | Vue | Nuxt |
| Svelte 5 | Svelte | SvelteKit |
| Angular | Angular | Angular SSR |
| Solid | Solid | SolidStart |
| Astro | Astro | |
| Any, as a custom element | Web Components | Lit, and frameworks not listed here |
| None | Plain JavaScript | A CDN with no build step |
Give it a height
The editor fills its container, so the container needs a height. Without one it collapses to nothing.
The map belongs to the editor
The map you pass in is where the editor starts. After that the editor keeps its own copy, and tells you about changes through onChange. Saving what comes out of onChange is fine, but don't pass every change back in as a new map, because the editor already has it.
To load a different map, such as when someone opens another one, call setDocument(next) on the editor. Each page shows how to reach it from your component.
Server rendering
The editor needs the browser. Every component here creates it in the hook that runs once the element is on the page, and those hooks never run on the server. So server-rendered apps need no extra setup: the server sends an empty element, and the editor appears when the page loads. The pages note anything specific to each framework's server rendering.
Running maps
Running a map doesn't need the editor or a framework. createTransform from @crosswalkjs/core works the same in a component, a server route or a background job. See How a map runs.