Velvet Writer

A premium, high-performance, and 100% custom-built rich text editor for React. Zero dependency on Slate, Quill, or Draft.js — just raw DOM performance with a stunning glassmorphism UI.

🔗 Live Demo

✨ Features

• 🎨 Dynamic Theming — Real-time accent color switching + Dark / Light / System modes
• ⌨️ Keyboard Shortcuts — Ctrl+B, Ctrl+I, Ctrl+U, Ctrl+Z, Tab indent, and more
• 📊 Table Insertion — Visual 8×8 grid picker + custom row/column input
• 💻 Code View — Built-in HTML source editor with prettify and copy tools
• 🔤 Rich Typography — 6 font families, 7 font sizes, headings H1–H4
• 🎯 Full Formatting — Bold, italic, underline, strikethrough, sub/superscript
• 📝 Block Elements — Ordered/unordered lists, blockquotes, horizontal rules
• 🔗 Media Support — Link insertion, image embedding (URL)
• 🎨 Color Tools — Text color picker, background highlight picker, custom colors
• 📐 Alignment — Left, center, right alignment with indent/outdent
• 📈 Status Bar — Real-time word/character count with mode indicator
• 📱 Responsive — Optimized for mobile, tablet, and desktop
• 🛡️ TypeScript — Full type definitions included

📦 Installation

npm install velvet-writer
# or
yarn add velvet-writer

🚀 Quick Start

import { AdvanceTextEditor } from 'velvet-writer';
import 'velvet-writer/dist/index.css';

function App() {
  const handleChange = (html: string) => {
    console.log(html);
  };

  return (
    <AdvanceTextEditor 
      accentColor="#a855f7" 
      mode="system" 
      onChange={handleChange} 
    />
  );
}

⚙️ Props

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | accentColor | string | #a855f7 | Primary theme color for highlights, selections, and UI accents | | mode | 'light' \| 'dark' \| 'system' | 'system' | Theme mode with auto-detection for system preference | | onChange | (html: string) => void | undefined | Callback triggered on every content change, returns raw HTML | | placeholder | string | 'Start typing...' | Placeholder text displayed when the editor is empty |

⌨️ Keyboard Shortcuts

| Shortcut | Action | | :--- | :--- | | Ctrl + B | Bold | | Ctrl + I | Italic | | Ctrl + U | Underline | | Ctrl + S | Strikethrough | | Ctrl + Z | Undo | | Ctrl + Y | Redo | | Tab | Indent | | Shift + Tab | Outdent |

🎨 Theming

Velvet Writer supports three theme modes out of the box:

// Auto-detect user's OS preference
<AdvanceTextEditor mode="system" />

// Force dark mode
<AdvanceTextEditor mode="dark" />

// Force light mode with custom accent
<AdvanceTextEditor mode="light" accentColor="#10b981" />