rich-html-editor





!
TypeScript
!
Framework Agnostic
!
Bundle Size
>
Edit HTML templates safely โ without breaking layout or CSS.
rich-html-editor is a
lightweight, framework-agnostic HTML editor designed for
non-technical users to edit
existing HTML templates inside an iframe.
It enables
controlled, template-driven editing, not free-form WYSIWYG chaos.
---
๐ฅ Demo & Playground
$3
๐
https://akshaypatil1.github.io/rich-html-editor/
Use the playground to:
- Edit real HTML inside an iframe
- Apply formatting safely
- Export clean HTML instantly
> No install. No build. Runs directly in the browser.
---
$3
Below is a short demo showing how
rich-html-editor allows inline editing of an HTML template using a toolbar embedded inside an iframe.
!
rich-html-editor demo
> The user edits text, formatting, and styles directly inside the iframe while preserving the original template structure.
---
โจ Why rich-html-editor?
Most rich text editors allow users to edit _anything_ โ which often leads to broken layouts, styles, or invalid HTML.
rich-html-editor is different:
- ๐งฉ Built for
template-driven HTML
- ๐ Runs inside an
iframe (style & DOM isolation)
- ๐ ๏ธ Focused on
safe, controlled editing
- ๐ฉโ๐ผ Ideal for
non-technical users
- โ๏ธ Framework-agnostic (React, Angular, Vue, Vanilla JS)
---
Documentation
Explore guides, concepts, API reference, and examples:
๐
https://akshaypatil1.github.io/rich-html-editor/docs/
---
๐ Features
$3
- Bold
- Italic
- Underline
- Strikethrough
- Font family
- Font size
- Headings (H1โH6)
- Ordered & unordered lists
- Links
- Clear formatting (๐งน) โ removes editor-applied styles within the current session
$3
- Text color
- Text highlighter
- Alignment
$3
- Click-to-edit images: click an image inside the editor to open a modal that lets the user upload a local image (image/\*, โค 1 MB) which will be embedded as a base64 data URL, or provide an
http(s) image URL to apply. Image changes are recorded in the editor undo/redo history.
$3
- Undo / Redo
- Format state tracking
- History stack (configurable)
- Clean HTML extraction
$3
- Iframe-based isolation
- Injectable toolbar
- Event-driven updates
- Framework-agnostic core
- TypeScript-first API
---
๐ฆ Installation
``
bash
npm install rich-html-editor
or
yarn add rich-html-editor
`
---
Quick Start (Browser / iframe)
The editor initializes on an HTMLIFrameElement
.
> โ ๏ธ The iframe must be same-origin. Use srcdoc
for safety.
`
html
`
---
๐ฆ Module Usage
$3
`
js
import { initRichEditor, getCleanHTML } from "rich-html-editor";
`
$3
`
js
const { initRichEditor, getCleanHTML } = require("rich-html-editor");
`
---
๐งฉ Framework Integrations
$3
`
jsx
import React, { useRef, useEffect } from "react";
import { initRichEditor, editorEventEmitter } from "rich-html-editor";
export default function RichEditor() {
const iframeRef = useRef(null);
useEffect(() => {
const iframe = iframeRef.current;
iframe.srcdoc =
"Edit me
";
initRichEditor(iframe);
const off = editorEventEmitter.on("contentChanged", () => {});
return () => off();
}, []);
return ;
}
`
---
$3
`
ts
import {
Component,
ElementRef,
AfterViewInit,
OnDestroy,
ViewChild,
} from "@angular/core";
import { initRichEditor, editorEventEmitter } from "rich-html-editor";
@Component({
selector: "app-rich-editor",
template: ,
})
export class RichEditorComponent implements AfterViewInit, OnDestroy {
@ViewChild("editorIframe", { static: true })
iframeRef!: ElementRef;
private off?: () => void;
ngAfterViewInit() {
const iframe = this.iframeRef.nativeElement;
iframe.srcdoc =
"Edit me
";
initRichEditor(iframe);
this.off = editorEventEmitter.on("contentChanged", () => {
/ react to changes /
});
}
ngOnDestroy() {
this.off?.();
}
}
`
---
$3
`
vue
``
---
๐ง Public API
$3
Initializes the editor inside the provided iframe.
$3
Returns sanitized HTML:
- Toolbar removed
- Editor-specific attributes stripped
- Safe for storage or approval workflows
---
๐ฃ๏ธ Roadmap
- Background color / image
- Table editor
- Video embedding (โค 1MB)
- Superscript / subscript
- Editable-region locking
---
๐ค Contributing
Contributions are welcome!
๐ https://github.com/akshaypatil1/rich-html-editor
---
๐ License
MIT
---
โญ If this helps you, consider starring the repo