@richhtmleditor/js

Vanilla JavaScript API for Rich HTML Editor, built on @richhtmleditor/core. Mount a full editor in any DOM container without a framework — ideal for legacy apps, web components, and static sites.

Current release: 1.1.1 — Depends on @richhtmleditor/core ^1.1.1.

Repository: github.com/rajkishorsahu89/richhtmleditor

Demo: richhtmleditor.vercel.app — demo · guide · API. Doc Preview joint demo: doc-preview-app.vercel.app/demo/enterprise

What's in 1.1.1

• createRichHtmlEditor — creates a mount div inside your container and returns an EditorInstance
• Same options as core — content, toolbar, features, plugins, onChange, onSave, and more
• Clean teardown — destroy() removes the internal mount element
• Re-exports all public symbols from @richhtmleditor/core

Ships as ESM with TypeScript declarations. Import @richhtmleditor/themes CSS for toolbar and content chrome.

Keywords: richhtmleditor javascript vanilla-js wysiwyg rich-text-editor

Install

npm install @richhtmleditor/js @richhtmleditor/themes
# Adds @richhtmleditor/core automatically.

Usage — quick start

<div id="editor-host" style="min-height: 320px"></div>

import { createRichHtmlEditor } from "@richhtmleditor/js";
import "@richhtmleditor/themes/richhtmleditor.css";

const host = document.getElementById("editor-host")!;

const editor = createRichHtmlEditor(host, {
  content: "<p>Hello <strong>world</strong></p>",
  toolbar: { preset: "standard" },
  features: { tables: true, media: true },
  onChange: (content) => console.log(content.html)
});

// Later:
editor.commands.insertTable(3, 4);
editor.destroy();

Usage — enterprise plugins

import { createRichHtmlEditor } from "@richhtmleditor/js";
import { createAiPlugin } from "@richhtmleditor/ai";
import { createCommentsPlugin } from "@richhtmleditor/comments";
import { createWorkflowsPlugin } from "@richhtmleditor/workflows";
import { resolveEnterpriseFeatures } from "@richhtmleditor/enterprise/browser";

const gate = resolveEnterpriseFeatures({ token: "RHE-ENT-DEMO-2026-FULL" });

const editor = createRichHtmlEditor(host, {
  toolbar: { preset: "full" },
  features: gate.features,
  plugins: [
    createAiPlugin({ onGenerate: async (req) => callYourLlm(req) }),
    createCommentsPlugin({ author: "Reviewer" }),
    createWorkflowsPlugin({ actor: "Legal", role: "editor" })
  ]
});

Usage — export for preview

const preview = editor.exportForPreview({
  workflowState: "approved",
  includePrintCss: true
});

// preview.fullHtml — standalone document for iframe or @doc-preview

API

createRichHtmlEditor(container, options)

| Parameter | Type | Description | | --- | --- | --- | | container | HTMLElement | Required. Parent element; an internal .de-js-host div is appended. | | options | Omit<CreateEditorOptions, "element"> | All createEditor options except element. |

Returns RichHtmlEditorInstance (alias for EditorInstance).

RichHtmlEditorInstance

Same as EditorInstance from @richhtmleditor/core — commands, getHTML(), getJSON(), setContent(), exportForPreview(), on(), destroy(), etc.

Related packages

• @richhtmleditor/core — framework-agnostic engine (auto-installed).
• @richhtmleditor/themes — shared CSS.
• @richhtmleditor/react — React component.
• @richhtmleditor/angular — Angular component.
• @richhtmleditor/vue — Vue 3 component.
• @richhtmleditor/enterprise — licence and feature gates.
• @richhtmleditor/ai — AI authoring plugin.
• @richhtmleditor/comments — review comments plugin.
• @richhtmleditor/workflows — approval workflows plugin.
• @richhtmleditor/collab — Yjs collaboration plugin.
• @richhtmleditor/diagrams — Mermaid diagrams plugin.
• @richhtmleditor/math — LaTeX/MathML equation plugin.
• @richhtmleditor/export — DOCX/PDF/HTML export plugin.
• @richhtmleditor/spellcheck — real-time spell check plugin.
• @richhtmleditor/templates — document templates plugin.
• @richhtmleditor/mentions — @ mentions plugin.

License

MIT