Integrate

Integrate overview

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.

Edit this page on GitHub

AI Assistant

The AI Assistant Plugin provides AI-powered content generation capabilities for the on-CodeMerge editor, supporting multiple AI providers and models for automated content creation.

Persistence

Mount alone is not an integration. Wire your backend with bindPersistence (callbacks) or restPersistence (fetch sugar). No fixed /api/doc path and no required JSON shape.