One library.
Every editing style.

BRE, BREM, and BREW — three editor modes, one API. Zero framework dependencies. Drop it into any project and start editing in minutes.

Try the Demo → Get Started

⬛

BRE

Block-based editor. Notion-style slash menu, drag-and-drop, columns, floating inline toolbar, and all 14 block types.

✍️

BREM

Markdown-first. Write in plain Markdown and see it rendered instantly — no toolbar needed.

📝

BREW

WYSIWYG. Familiar word-processor feel with inline formatting, tables, and rich embeds.

Why bestricheditor?

✓ Zero framework dependencies — works with any stack
✓ 14 block types including formula, table, video, and columns
✓ Fully serializable via getJSON / setJSON / getHTML / setHTML
✓ Floating inline formatting toolbar in BRE mode
✓ Safe by default — HTML sanitized with DOMPurify
✓ Switch modes per editor instance, mix them on the same page
✓ Embeds protected by a configurable allowlist
✓ Inherits host application fonts and list styles automatically

14 Block Types

Type	Description
paragraph	Plain text paragraph
heading	H1 – H6 headings
bulleted_list	Unordered list item
numbered_list	Ordered list item
todo	Checkbox / to-do item
quote	Block quotation
code	Fenced code block with language
formula	LaTeX math via KaTeX
image	Image with caption
video	YouTube / Vimeo embed
table	Grid table
divider	Horizontal rule
columns	Multi-column layout (BRE)
callout	Highlighted callout box

API Reference

Method	Description
createEditor(el, options)	Mount an editor on a DOM element. Returns an editor instance.
editor.getJSON()	Return the current document as a serializable JSON object.
editor.setJSON(doc)	Hydrate the editor with a previously serialized document.
editor.getHTML()	Return sanitized HTML representing the current document.
editor.setHTML(html)	Load the editor from an HTML string (parsed into blocks).
editor.destroy()	Unmount the editor and clean up all event listeners.

Options

Option	Type	Default	Description
mode	"BRE" \| "BREM" \| "BREW"	"BRE"	Editor variant to mount.
onChange	(doc) => void	undefined	Called whenever the document changes.
embedAllowlist	string[]	[]	Allowed embed URL origins for video blocks.
virtualize	boolean	false	Enable virtual rendering for very large documents.

Installation

npm install bestricheditor

import { createEditor } from 'bestricheditor';
import 'bestricheditor/dist/bre.css';

const editor = createEditor(document.getElementById('editor'), {
  mode: 'BRE',         // 'BRE' | 'BREM' | 'BREW'
  onChange: (doc) => console.log(doc),
});

// Later:
const json = editor.getJSON();   // serialize
editor.setJSON(json);            // restore from JSON
const html = editor.getHTML();   // sanitized HTML string
editor.setHTML(html);            // restore from HTML string
editor.destroy();                // clean up

My Documents

One library.Every editing style.

BRE