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, 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
✓ Safe by default — HTML sanitized with DOMPurify
✓ Switch modes per editor instance, mix them on the same page
✓ Embeds protected by a configurable allowlist

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.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
const html = editor.getHTML();   // sanitized HTML
editor.destroy();                // clean up

My Documents

One library.Every editing style.

BRE