Installation: Better Rich Text docs

Better Rich Text isn't on a public package registry. After you buy a licence, download the zip from your Lemon Squeezy receipt or order page. It holds every package as an npm tarball, a setup helper, your licence and the changelog.

Add it to a project

From your project's root, run the helper and name the packages you want. core is the editor; add an adapter if you use a framework:

Shell

node path/to/better-rich-text-1.0.0/setup.mjs core react
npm install

The helper:

copies the tarballs into vendor/better-rich-text/;
adds the packages you named to dependencies;
points every @better-rich-text package at its tarball, through overrides for npm, pnpm.overrides for pnpm or resolutions for Yarn, picked from your lockfile.

Commit vendor/better-rich-text/ so your team and CI install the same files. Nothing under the @better-rich-text name is fetched from a public registry.

To add another package later, run the helper again with its name, for example setup.mjs plugin-comments.

Script tag

For a page without a bundler, the zip's browser/ folder holds the editor as single files. Host one yourself and load it:

HTML

<div id="editor"></div>
<script src="/js/better-rich-text.js"></script>
<script>
  BetterRichText.createRichTextEditor('#editor', { content: '<p>Hello</p>' });
</script>

File	Holds
`better-rich-text.js`	The standard editor and the `<better-rich-text>` element, about 170 KiB gzipped
`better-rich-text-full.js`	Everything above plus the document, collaboration, email and full presets and Markdown, about 460 KiB gzipped

Each file sets window.BetterRichText, which holds the same exports as @better-rich-text/core (plus the presets in the full build). The .mjs files are the same builds as ES modules, for <script type="module">:

HTML

<script type="module">
  import { createRichTextEditor, fullPreset } from '/js/better-rich-text-full.mjs';
  createRichTextEditor('#editor', { preset: fullPreset });
</script>

For another interface language, load its file from browser/locales/ after the editor:

HTML

<script src="/js/better-rich-text.js"></script>
<script src="/js/locales/de.js"></script>
<script>
  BetterRichText.createRichTextEditor('#editor', { locale: 'de' });
</script>

The element is registered when the file loads:

HTML

<better-rich-text name="body" value="<p>Hello</p>"></better-rich-text>

Packages

Package	Use
`core`	The editor: `createRichTextEditor` and the standard preset
`presets`	Document, collaboration, email and full presets (Presets)
`locales`	Interface languages other than English (Localisation)
`react`, `vue`, `angular`, `svelte`, `aurelia`, `solid`, `web-component`, `legacy`	Framework adapters (Frameworks)
`plugin-*`	Opt-in features such as comments, suggestions, revisions, math and templates
`collab-server`	The Node collaboration server (Server)
`migrate`	TinyMCE and Froala migration (Migrating)
`format-pdf`	PDF files written in the browser or Node. `plugin-documents` loads it when someone downloads a PDF (Documents)

Updating

Download the new zip and run its setup.mjs without package names. It replaces the tarballs and updates every @better-rich-text package already in your package.json. Then run your install command. Licence covers every release within the major version you bought.

Requirements

A bundler that understands ES modules, such as Vite, webpack, Rollup or esbuild, unless you use the script-tag files.
Node 20.11 or later for the setup helper, and Node 24 or later for the collaboration server.