DocsJS EditorOne Bridge For Mainstream Editors

Why docsjs-editor? ​

• Mainstream Coverage: Built-in adapters cover mainstream editors first, with extensible hooks for Lexical, Slate, and ProseMirror stacks.
• Switchboard Runtime: Switch editor providers at runtime while preserving content and avoiding integration rewrites.
• docsjs Native Bridge: Connect docsjs snapshots directly into target editors so import and editing stay in one technical path.
• Ecosystem Pairing: Pair with docsjs as a canonical source and keep one content stream consistent across multiple editor providers.
• Demo and Matrix Ready: Use demos and capability matrix to choose editor stacks faster and reduce migration risk.

Framework Quick Start ​

• React: Runtime switch demo with one docsjs content source and two editor providers. Open React demo
• Vue: Vue state-driven provider switching with consistent content behavior. Open Vue demo
• Vanilla / CDN: 5-editor panel to benchmark integration effort before committing a stack. Open 5-editor demo

Complete Case ​

import { EditorSwitchboard } from "@coding01/docsjs-editor";

const switchboard = new EditorSwitchboard();
switchboard.connect("tiptap", tiptapEditor);
switchboard.connect("quill", quillEditor);
switchboard.connect("ckeditor5", ckEditor);

const canonicalHtml = docsjsElement.getSnapshot();

await switchboard.switchTo("tiptap");
await switchboard.setHtml(canonicalHtml);

await switchboard.switchTo("quill");
await switchboard.setHtml(canonicalHtml);

await switchboard.switchTo("ckeditor5");
await switchboard.setHtml(canonicalHtml);

Left: docsjs HTML snapshot

<h1>Quarter Plan</h1>
<p>One source content rendered across multiple editor engines.</p>
<ul>
  <li>DOCX fidelity import</li>
  <li>Editor runtime switch</li>
  <li>Content parity checks</li>
</ul>

Right: same content after adapter switch

{
  "activeEditor": "quill",
  "source": "docsjs snapshot",
  "sameHeading": true,
  "sameListCount": 3,
  "parityCheck": "pass",
  "preview": "Quarter Plan | DOCX fidelity import | Editor runtime switch | Content parity checks"
}

API Reference ​

• Switchboard: connect() / switchTo() / setHtml() / getHtml()
• docsjs Bridge: bindDocsjsChangeToEditor() / importDocxToEditor()
• Adapters: createBuiltinAdapter() with mainstream editor types

Engineering Trust Signals ​

• CI: Push to main: run verify quality gate.
• npm: Push tag v*.*.*: publish npm package.
• Pages: Update docs/** on main: deploy landing page.

Recommended Ecosystem Path ​

Use docsjs for fidelity import, docsjs-editor for runtime editor switching, and docsjs-markdown for final markdown delivery.

@coding01/docsjs → @coding01/docsjs-editor → @coding01/docsjs-markdown

Open demos · Try 5-editor demo · React demo · Vue demo · Open capability matrix

Quick Start ​

npm install @coding01/docsjs-editor

yarn add @coding01/docsjs-editor

pnpm add @coding01/docsjs-editor

Connect an Editor ​

import { EditorSwitchboard } from "@coding01/docsjs-editor";

const switchboard = new EditorSwitchboard();
const adapter = switchboard.connect("tiptap", tiptapEditor);

// Inject DocsJS HTML snapshot
await switchboard.setHtml("<h1>Hello</h1><p>World</p>");

Runtime Switch ​

// Switch to Quill at runtime
await switchboard.switchTo("quill", quillEditor);

Ecosystem ​

Sponsors ​