Integrate

Embed On-Codemerge with @codemerge/integrate (+ peer on-codemerge).

npm install on-codemerge @codemerge/integrate

UI guides show framework state → value / onChange only. Packs, upload, and document IO live in shared pages below.

CSS loads with UI entries (/react, /element, /mount, …). Root import is host API only. Explicit: import '@codemerge/integrate/styles'. Not pulled by /protocol.

Aliases (same runtime as the target): /preact /angular /solid /qwik /backbone → /mount; /lit /astro → /element; /remix → /react; /vanilla → root.

Start here

Guide	When
React / Vue 3	pass value + watch changes
Host config	plugins pack, upload, locale, collab
Persistence	document load/save (bindPersistence)
Server + Vite	Laravel / Slim / Express / … + WC
Meta SSR	Next / Nuxt / SvelteKit / … (client only)
Native bridge	iframe / Flutter / Tauri postMessage
Chrome & host	chrome, portals, raw Editor

Per-stack pages are short deltas — they link back to the family guides above.

Quick React example

import { useState } from 'react';
import { CodeMergeEditor } from '@codemerge/integrate/react';

export function App() {
  const [html, setHtml] = useState('<p></p>');
  return <CodeMergeEditor value={html} onChange={setHtml} />;
}

Advanced

Raw new Editor + createCorePlugins() — Chrome & host, Editor API.