@veztraa/editor

Documentation & Live Demo →

A full-featured, zero-config WYSIWYG rich-text editor as a single React component. Drop <Editor /> into any React app and your users get a modern editing experience in seconds — a Notion-style slash menu, a floating selection toolbar, Markdown shortcuts, a full emoji picker, live code-block syntax highlighting, image uploads, and clean semantic HTML out.

TypeScript-first, framework-agnostic (React 18 & 19, Next.js App Router, Vite), dark mode built in. Styles auto-inject on mount — no CSS import required.

Installation

npm install @veztraa/editor

Quick start

import { useState } from "react";
import { Editor } from "@veztraa/editor"; // styles auto-inject — no CSS import

export default function App() {
  const [html, setHtml] = useState("<p>Hello world</p>");
  return <Editor value={html} onChange={setHtml} height={400} />;
}

Modal mode

<EditorModal /> renders in a fullscreen portal and commits changes only when the user clicks Done.

import { EditorModal } from "@veztraa/editor";

{open && (
  <EditorModal
    value={content}
    onChange={(html) => { save(html); setOpen(false); }}
    onClose={() => setOpen(false)}
    title="Edit content"
  />
)}

Features

• Slash menu — type / for headings, lists, tables, images, code blocks, and more
• Bubble toolbar — a formatting bar that appears over selected text
• Markdown shortcuts — #, -, 1., >, ```, **bold**, *italic*, `code`, ~~strike~~ format as you type
• Emoji picker — the full 1,900+ Unicode set in a categorized grid, plus :shortcode: autocomplete
• Code blocks — live syntax highlighting
• Autolink — URLs become links as you type
• URL auto-embed — paste a YouTube/Vimeo link → a responsive, sandboxed embed
• Images — drag-drop, paste (incl. screenshots), or the toolbar button; inline base64 by default or upload to your server via onImageUpload
• Tables, text/background color, alignment, indent, sub/superscript, find & replace, print
• Character limit with a live counter (maxLength)
• Extensible — add your own slash commands and toolbar buttons
• Clean output — semantic HTML via onChange, plus a sanitizeHtml() helper
• Dark & light themes, one-hex accentColor, controlled or uncontrolled

Framework notes

• Vite / CRA — import and use, nothing extra.
• Next.js (App Router) — the editor renders on the client. Mark the file "use client", or import it with next/dynamic and { ssr: false }. Importing the package in a server file is safe (it touches no DOM at import time). No CSS import is needed — styles inject on first render.
• sanitizeHtml() runs in the browser — your editor value already lives client-side, so sanitize there before submitting.

Key props

EditorProps, EditorModalProps, SlashCommand, and ToolbarButton are all exported.

Recipes

Upload images to your server

<Editor
  value={html}
  onChange={setHtml}
  onImageUpload={async (file) => {
    const body = new FormData();
    body.append("file", file);
    const res = await fetch("/api/upload", { method: "POST", body });
    const { url } = await res.json();
    return url; // inserted as <img src={url}>
  }}
/>

Custom slash commands

<Editor
  value={html}
  onChange={setHtml}
  slashCommands={[
    {
      title: "Callout",
      description: "Highlighted note box",
      action: ({ insertHTML }) =>
        insertHTML("<blockquote>💡 <strong>Note:</strong> …</blockquote>"),
    },
  ]}
/>

Custom toolbar buttons

<Editor
  value={html}
  onChange={setHtml}
  toolbarButtons={[
    {
      name: "insertDate",
      tooltip: "Insert today's date",
      iconSvg: '<svg class="rte-mico" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M3 10h18"/></svg>',
      exec: ({ insertText }) => insertText(new Date().toLocaleDateString()),
    },
  ]}
/>

Sanitize before you store

import { sanitizeHtml } from "@veztraa/editor";

const clean = sanitizeHtml(dirtyHtml); // allowlist: safe tags, attrs & styles only

License

MIT © Veztraa Solutions. This package bundles a modified third-party editor engine under its own MIT license; see THIRD-PARTY-NOTICES.txt.