Introduction

An embeddable rich text editor written in TypeScript. It has its own document engine, a default interface, a headless API and adapters for the common frameworks. Everything runs in your app with no licence server, load metering or required hosted service.

Quick start

import { createRichTextEditor } from '@better-rich-text/core';

const editor = createRichTextEditor('#editor', {
  content: '<p>Hello</p>',
  placeholder: 'Start writing…',
  onChange: (instance) => save(instance.getHTML()),
});

createRichTextEditor accepts a selector, an element or a <textarea> (which it keeps in sync for form posts). Use mode: 'inline' to edit an element in place, or mode: 'bare' for the editing surface without chrome.

Presets

The default is the standard preset. @better-rich-text/presets adds ready-made ones for long documents, collaboration, email and demos, each imported from its own subpath so you only bundle the one you use:

import { documentPreset } from '@better-rich-text/presets/document';

createRichTextEditor('#editor', { preset: documentPreset });

See docs/presets.md for what each preset includes, its size, and how to trim or extend it.

Packages

Headless use

The engine has no DOM dependency, so the same commands run on a server or in a worker:

import { createEditor } from '@better-rich-text/engine';
import { marksPlugin } from '@better-rich-text/plugin-marks';

const editor = createEditor({ plugins: [marksPlugin] });
editor.execute('text.insert', { text: 'Hello' });
editor.execute('selection.selectAll');
editor.execute('format.toggleBold');

Command names and inputs are typed from the installed plugins, and the same schemas validate input at runtime.

Extending

Plugins declare nodes, marks, commands, key bindings, input rules and normalisers. Beyond events, every layer exposes filters and actions with priorities and namespaces, like WordPress hooks:

editor.hooks.addFilter('content.insertText', (text) => text.replace(/--/g, '\u2013'), { namespace: 'my-plugin' });
editor.hooks.addAction('transaction.committed', (event) => audit(event), { namespace: 'my-plugin' });

See docs/adr/0003-filters-and-actions.md.

Bundle size

Features are separate packages and the interface features are opt-in, so unused features are not bundled. pnpm size reports gzip sizes against the specification budgets: