JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 193
  • Score
    100M100P100Q64923F
  • License MIT

A lightweight, fully-typed React rich text editor with a configurable toolbar. Outputs HTML. Works with React 17+.

Package Exports

  • rte-react

Readme

rte-react

A lightweight, fully-typed React rich text editor with a configurable toolbar. Supports HTML, Markdown, and JSON output formats. Works with React 17 and higher.

Install

npm install rte-react

Usage

import { RichEditor } from 'rte-react';
import 'rte-react/styles';

function App() {
  const [content, setContent] = useState('<p>Hello world</p>');

  return (
    <RichEditor
      value={content}
      onChange={setContent}
      placeholder="Start typing..."
    />
  );
}

Output Formats

The outputFormat prop controls the format of the value prop and the value passed to onChange. Defaults to 'html'.

HTML (default)

const [html, setHtml] = useState('<p>Hello world</p>');

<RichEditor
  outputFormat="html"
  value={html}
  onChange={(v) => setHtml(v as string)}
/>

onChange receives a string like <p>Hello <strong>world</strong></p>.

Markdown

const [md, setMd] = useState('Hello **world**');

<RichEditor
  outputFormat="md"
  value={md}
  onChange={(v) => setMd(v as string)}
/>

onChange receives a Markdown string like Hello **world**. The value prop is parsed from Markdown before being loaded into the editor.

JSON

import type { JSONContent } from 'rte-react';

const [nodes, setNodes] = useState<JSONContent[]>([]);

<RichEditor
  outputFormat="json"
  value={nodes}
  onChange={(v) => setNodes(v as JSONContent[])}
/>

onChange receives a JSONContent[] array — the raw ProseMirror content nodes from Tiptap's editor.getJSON().content.

Font Picker

Add 'fontFamily' to the toolbar prop to show the font family picker. It renders as a dropdown where each option is displayed in its own font for a live preview.

<RichEditor
  value={content}
  onChange={setContent}
  toolbar={['fontFamily', 'fontSize', 'divider', 'bold', 'italic', 'underline']}
/>

Selecting text and choosing a font wraps it in a <span style="font-family: ...">. Choosing Default removes the inline style cleanly. The dropdown always reflects the font at the current cursor position.

Default fonts

Label CSS value
Default (removes font mark)
Arial Arial, sans-serif
Georgia Georgia, serif
Helvetica Helvetica, Arial, sans-serif
Times New Roman 'Times New Roman', Times, serif
Trebuchet MS 'Trebuchet MS', sans-serif
Verdana Verdana, sans-serif
Courier New 'Courier New', Courier, monospace

Custom font list

Pass a fontFamilies prop to replace the default list with your own fonts. Each entry is a { label, value } object where value is any valid CSS font-family string.

import { RichEditor, DEFAULT_FONT_FAMILIES } from 'rte-react';
import type { FontFamilyOption } from 'rte-react';

// Completely custom list
const myFonts: FontFamilyOption[] = [
  { label: 'Default',    value: '' },
  { label: 'Inter',      value: 'Inter, sans-serif' },
  { label: 'Roboto',     value: 'Roboto, sans-serif' },
  { label: 'Fira Code',  value: "'Fira Code', monospace" },
];

<RichEditor
  toolbar={['fontFamily', 'divider', 'bold', 'italic']}
  fontFamilies={myFonts}
  value={content}
  onChange={setContent}
/>

To extend the built-in list rather than replace it, spread DEFAULT_FONT_FAMILIES:

import { DEFAULT_FONT_FAMILIES } from 'rte-react';

const extendedFonts = [
  ...DEFAULT_FONT_FAMILIES,
  { label: 'Inter',     value: 'Inter, sans-serif' },
  { label: 'Fira Code', value: "'Fira Code', monospace" },
];

<RichEditor fontFamilies={extendedFonts} ... />

Note: the editor only renders the font — it does not load any font files. Make sure any custom web fonts (e.g. from Google Fonts) are loaded in your app before using them here.

fontFamily and fontSize are independent marks and can be combined freely — selecting both tools applies both font-family and font-size on the same span.

Custom Toolbar

Pass a toolbar prop to control which tools are shown and in what order:

<RichEditor
  value={content}
  onChange={setContent}
  toolbar={['bold', 'italic', 'underline', 'divider', 'bulletList', 'orderedList', 'divider', 'link']}
/>

Available Tools

Tool Description
bold Bold text
italic Italic text
underline Underline text
strikethrough Strikethrough text
heading1 – heading6 Headings H1–H6
bulletList Bullet list
orderedList Numbered list
blockquote Blockquote
codeBlock Fenced code block
link Insert or edit a hyperlink
image Upload and insert an image (max 10 MB)
table Insert a table (configurable rows × cols)
fontSize Font size dropdown (12–48 px)
fontFamily Font family picker (Arial, Georgia, Helvetica, Times New Roman, Trebuchet MS, Verdana, Courier New)
undo Undo
redo Redo
divider Visual separator in the toolbar

Props

Prop Type Default Description
value string | JSONContent[] '' Initial content. Format must match outputFormat.
onChange (value: string | JSONContent[]) => void — Called on every content change. Receives a value in the format set by outputFormat.
outputFormat 'html' | 'md' | 'json' 'html' Format used for both value input and onChange output.
toolbar ToolbarTool[] All tools Tools to show in the toolbar.
fontFamilies FontFamilyOption[] Built-in list Custom font list for the fontFamily picker. Replaces the default 8 fonts entirely.
placeholder string 'Start typing...' Placeholder text shown when the editor is empty.
editable boolean true Set to false to render a read-only view (toolbar is hidden).
className string — Class added to the outer wrapper element.
toolbarClassName string — Class added to the toolbar element.
contentClassName string — Class added to the content area element.
style CSSProperties — Inline style for the outer wrapper element.

Exported Types

import { DEFAULT_FONT_FAMILIES } from 'rte-react';
import type { RichEditorProps, ToolbarTool, OutputFormat, JSONContent, FontFamilyOption } from 'rte-react';
Export Kind Description
RichEditorProps type Full props interface for <RichEditor>
ToolbarTool type Union of all valid toolbar tool names
OutputFormat type 'html' | 'md' | 'json'
JSONContent type ProseMirror node shape used for JSON format (re-exported from @tiptap/core)
FontFamilyOption type { label: string; value: string } — shape of a font picker entry
DEFAULT_FONT_FAMILIES value The built-in font list used when no fontFamilies prop is passed

License

MIT