@editkit/react

v1.0.9

Published

15 days ago

React and Next.js rich text editor with tables, color picker, bubble menu, and no third-party editor engine. A TypeScript alternative to TipTap, Quill, Lexical, and Slate.

EditKit React Rich Text Editor — `@editkit/react`

@editkit/react is the official React and Next.js integration for EditKit Text Editor, with native tables, a color picker, floating menus, and modular toolbars.

⚡ Why @editkit/react?

🚀 No Third-Party Editor Engine: Built in TypeScript without ProseMirror, Lexical, Slate, or Quill.
⚛️ Universal React Support: Works seamlessly in React 16.8+, React 18, React 19, Next.js (App & Pages Router), Remix, and Laravel Inertia React.
📊 First-Class Interactive Tables: 6×6 visual hover grid, one-click row/column add & delete, cell background coloring, and contextual table menu.
🎨 2D HSV Custom Color Picker: Text and background highlight color with 21 palette swatches + 2D saturation/brightness spectrum and hue slider.
🫧 Contextual Floating Menus: Smart text selection bubble toolbar, floating table actions, and image resize bar.
🎛️ Granular Feature Props: Turn any toolbar item on or off with simple boolean props.
🌗 CSS Variable Theming: Beautiful dark & light modes out of the box. Fully customizable with plain CSS.

📦 Installation

# Using npm
npm install @editkit/react @editkit/ui

# Using pnpm (recommended)
pnpm add @editkit/react @editkit/ui

# Using yarn
yarn add @editkit/react @editkit/ui

All-in-one alternative: npm install editkit-text-editor react react-dom, then import from editkit-text-editor/react and editkit-text-editor/styles.

🚀 Quick Start

1. Ready-to-Use Component (`<EditKitEditor />`)

'use client';

import React, { useState } from 'react';
import { EditKitEditor } from '@editkit/react';
import '@editkit/ui/styles';

export default function App() {
  const [content, setContent] = useState('<h1>Hello EditKit</h1><p>Start writing...</p>');

  return (
    <div className="max-w-4xl mx-auto p-4">
      <EditKitEditor
        value={content}
        onChange={setContent}
        theme="dark" // 'dark' | 'light' | 'system'
        placeholder="Type something amazing..."
        // Granularly toggle any feature on or off:
        features={{
          math: false,           // Hide LaTeX Math formula modal
          chart: false,          // Hide Chart widget
          panel: false,          // Hide callout / panel menu
          insertElements: false, // Hide Insert Elements menu
        }}
        bubbleMenu={true}        // Floating selection bubble menu
        tableMenu={true}         // Contextual floating table actions
        imageMenu={true}         // Floating image resize bar
      />
    </div>
  );
}

2. Custom Headless Hook (`useEditKitEditor`)

If you want to build custom toolbars or programmatic workflows:

import React from 'react';
import { useEditKitEditor } from '@editkit/react';
import '@editkit/ui/styles';

export function CustomEditor() {
  const { editor, containerRef } = useEditKitEditor({
    content: '<p>Custom headless editor</p>',
    theme: 'dark',
    features: {
      chart: false,
    },
  });

  return (
    <div>
      <div className="custom-toolbar flex gap-2 mb-2">
        <button onClick={() => editor?.commands.bold()}>Bold</button>
        <button onClick={() => editor?.commands.italic()}>Italic</button>
        <button onClick={() => editor?.commands.heading(2)}>H2</button>
        <button onClick={() => editor?.commands.insertTable({ rows: 3, cols: 3 })}>Table</button>
      </div>
      <div ref={containerRef} className="editor-container" />
    </div>
  );
}

🎛️ Complete Component Props Reference

Core Editor Props (`<EditKitEditor />`)

| Prop Name | Type | Default | Description | | :--- | :--- | :--- | :--- | | value | string | undefined | Controlled HTML content of the editor | | defaultValue | string | undefined | Initial uncontrolled HTML content | | onChange | (html: string) => void | - | Callback triggered whenever content changes | | onFocus | (editor: EditKitEditor) => void | - | Callback when editor gains focus | | onBlur | (editor: EditKitEditor) => void | - | Callback when editor loses focus | | theme | 'light' \| 'dark' \| 'system' | 'dark' | Visual theme mode | | placeholder | string | 'Write something...' | Placeholder text when empty | | editable | boolean | true | Read-only mode toggle (false makes it non-editable) | | showToolbar | boolean | true | Show or hide the top formatting toolbar | | bubbleMenu | boolean | true | Enable floating selection bubble toolbar | | tableMenu | boolean | true | Enable contextual table action floating menu | | imageMenu | boolean | true | Enable floating image resizer menu | | className | string | '' | Custom CSS class name on root container | | features | ToolbarFeaturesConfig | {} | Granular toolbar button toggles (see table below) |

Toolbar Feature Flags (`features` prop)

You can pass features={{ [key]: boolean }} to customize every single button on the toolbar:

🎨 CSS Variable Theming

[data-editkit],
[data-editkit-theme="dark"] {
  --editkit-bg: #0c0d10;
  --editkit-card-bg: #141519;
  --editkit-toolbar-bg: #18191e;
  --editkit-border: #23252f;
  --editkit-border-focus: #7c3aed;
  --editkit-primary: #7c3aed;
  --editkit-font: 'DM Sans', sans-serif;
}

value, defaultValue, and content are trusted-HTML inputs. Sanitize content from users or external systems before passing it to EditKit and before rendering saved HTML.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

EditKit React Rich Text Editor — @editkit/react

⚡ Why @editkit/react?

📦 Installation

🚀 Quick Start

1. Ready-to-Use Component (<EditKitEditor />)

2. Custom Headless Hook (useEditKitEditor)