@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.2.10 — Depends on @richhtmleditor/core ^1.2.10.

Repository: github.com/rajkishorsahu89/richhtmleditor

Demo: richhtmleditor.stackkitlabs.com — demo · guide · API. Doc Preview joint demo: stackkitlabs.com/products/doc-preview

What's in 1.2.10

• 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

New in 1.2.10

| Feature | Vanilla JS usage | | --- | --- | | Callout blocks — info / warning / success / error styled blocks | editor.commands.insertCallout("info") or toolbar Callout dropdown | | Embed blocks — YouTube, Loom, Figma auto-embed | Paste URL to auto-embed; or editor.commands.insertEmbed(url) | | Word goal + progress bar | editor.commands.setWordGoal(500) — progress bar appears in status bar | | Reading time | Displayed automatically: status bar shows ~N min read | | Dark mode toggle | dark: true option or editor.commands.toggleDarkMode() at runtime | | Markdown shortcuts | Always on — ## → H2, **bold**, _italic_, `code` | | Markdown import | editor.commands.importMarkdown() — opens .md file picker | | Case change | editor.commands.caseChange("upper" \| "lower" \| "title" \| "sentence") | | Smart typography | Auto-converts straight quotes, -- → em dash, ... → ellipsis | | Autolink | URLs auto-link on paste and after typing a space | | Task lists | features: { taskList: true } — checkbox bullet lists | | XLSX / CSV paste | Paste from Excel or Google Sheets → inserts a table automatically | | Table sort | Click any <th> to sort column; click again to reverse | | Undo history panel | editor.commands.undoHistoryPanel() — sidebar with full undo stack | | TOC navigation | Click a TOC entry in the outline panel → scrolls to that heading | | Preview modal | editor.commands.previewModal() — read-only rendered preview overlay | | Autoresize | features: { autoresize: true } — editor grows with content | | Mobile touch | Touch-optimised toolbar; 40 px tap targets on pointer: coarse devices |

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