syntaxic-react-editor

The ultimate rich-text editing framework for modern applications. Highly extensible, beautifully designed.

Demo

Check out the live demo: https://syntaxic.cloud/products/syntaxic-react-editor

Features

• Rich Text Editing: Bold, italic, underline, strike-through, and more.
• Advanced Tables: Insert and manage tables with ease.
• Pro Features: Access advanced plugins and features via syntaxic.cloud.
• Responsive Design: Works great on various screen sizes.
• Zero-Config CSS: Automatically injects styling into your project.

Installation

npm install syntaxic-react-editor

Usage

import { WordEditor } from "syntaxic-react-editor";

// CSS is handled automatically. No manual import needed!

function App() {
  return <WordEditor />;
}

Props

| Prop | Type | Default | Description | | ---------------- | ------------------------ | ------------------------------- | ------------------------------------------------------ | | initialHTML | string | '<p>Start typing here...</p>' | Initial content of the editor. | | onChange | (html: string) => void | undefined | Callback fired on every content change. | | onSave | (html: string) => void | undefined | Callback fired when manual save is triggered. | | height | string | '100vh' | Height of the editor container. | | className | string | '' | Additional CSS class for the container. | | toolbarOptions | ToolbarOptions | All enabled | Configuration to show/hide toolbar groups and buttons. | | plugins | WordEditorPlugin[] | [] | Array of plugins to extend editor functionality. |

ToolbarOptions Defaults

By default, all toolbar features are enabled (true). You can selectively disable them:

<WordEditor
  toolbarOptions={{
    font: { family: true, size: true, bold: true },
    table: false, // Hide table insertion
    media: true,
  }}
/>

License

MIT © Syntaxic Labs