on-codemerge
What's new in 2.9

Plugin-oriented document editors

on-codemerge is a family of editors on one JSON document kernel. Toolbar, menus and popups live in the core; features come as plugins. Mount it in any framework or plain HTML.
Get startedGitHub

Try it

Every product below is the real editor from this repository. Only the active one is mounted.

What you get

  • Eight editors, one kernel
    WYSIWYG, JSON, Markdown, Code, Forms, Charts, Calendar and Tables share one JSON document model, ops and undo.
  • 40 plugins
    Tables, media, math, footnotes, comments, track changes, spell check, AI assistant — each a factory you opt into.
  • Real-time collaboration
    Authoritative WebSocket server with server-side rebase, roles, comments and offline edits replayed on reconnect.
  • Any host
    React, Vue, Svelte, Angular, <ocm-editor> web component, plus server recipes from Laravel to Axum and native shells.
  • Clean output
    HTML, Markdown and JSON in and out, sanitized; published pages hydrate with a tiny public runtime.
  • Plugin SDK
    definePlugin, a zero-dependency ViewSpec DOM runtime and core-owned toolbar, menus and popups.

Two minutes to the first editor

Install the package, import the CSS and mount an Editor with the default plugin set.
Editor APIMigrate from v1
pnpm add on-codemerge

import 'on-codemerge/index.css';
import 'on-codemerge/public.css';
import { Editor, createDefaultPlugins } from 'on-codemerge';

const editor = new Editor(document.getElementById('app')!, {
  plugins: createDefaultPlugins(),
});

await editor.setLocale('en');
editor.setHTML('<p>Hello</p>');