Scrible ✍️

A powerful, customizable rich text editor for React - Built with Slate.js, outputs clean HTML, and offers Notion-like editing experience.

✨ Features

• 🎨 Fully Customizable - Choose which features to include
• 📝 Rich Text Formatting - Bold, italic, underline, strikethrough
• 🎨 Color Customization - Text and background color pickers with 24 preset colors
• 📑 Multiple Heading Levels - H1, H2, H3 with semantic markup
• 📋 Lists - Bulleted and numbered lists
• 📊 Tables - Full table support with easy insertion
• 🖼️ Images - Upload and resize images with drag handles
• 🔗 Links - Automatic link detection and manual insertion
• ↔️ Text Alignment - Left, center, right, justify
• 📏 Font Sizes - Multiple size options
• 💾 Clean HTML Output - Semantic HTML like Quill.js
• ⌨️ Keyboard Shortcuts - Standard shortcuts (Ctrl+B, Ctrl+I, etc.)
• 📱 Responsive - Works great on desktop and mobile
• 🎯 TypeScript Ready - Full type support

📦 Installation

npm install scrible slate slate-react slate-history

or

yarn add scrible slate slate-react slate-history

🚀 Quick Start

import React, { useState } from 'react';
import ScribleEditor from 'scrible';
import 'scrible/dist/scrible.css';

function App() {
  const [content, setContent] = useState('');

  const handleChange = (htmlContent, slateValue) => {
    setContent(htmlContent);
  };

  return (
    <ScribleEditor
      onChange={handleChange}
      placeholder="Start writing..."
    />
  );
}

Important: Don't forget to import the CSS file!

🎛️ Customizable Toolbar

Choose which features to include in your editor:

import ScribleEditor from 'scrible';
import 'scrible/dist/scrible.css';

function CustomEditor() {
  const [content, setContent] = useState('');

  // Only include the features you need
  const features = [
    'bold',
    'italic',
    'underline',
    'headings',
    'lists',
    'link',
    'image'
  ];

  return (
    <ScribleEditor
      features={features}
      onChange={(html) => setContent(html)}
      placeholder="Minimal editor..."
    />
  );
}

Available Features

Feature	Description
bold	Bold text formatting
italic	Italic text formatting
underline	Underline text formatting
strikethrough	Strikethrough text formatting
headings	H1, H2, H3, blockquote
lists	Bulleted and numbered lists
alignment	Text alignment (left, center, right, justify)
fontSize	Font size options
textColor	Text color picker with presets and custom colors
backgroundColor	Background/highlight color picker
link	Insert and edit links
image	Upload and resize images
table	Insert and manage tables
clear	Clear all content button

📖 Props

Prop	Type	Default	Description
value	Node[]	null	Controlled Slate.js value
onChange	(html: string, value: Node[]) => void	undefined	Called when content changes
placeholder	string	"Enter some text..."	Placeholder text
readOnly	boolean	false	Make editor read-only
className	string	""	Additional CSS class
initialValue	string | Node[]	null	Initial content (HTML string or Slate value)
features	string[]	All features	Array of features to include

💡 Examples

Basic Editor

<ScribleEditor
  onChange={(html) => console.log(html)}
  placeholder="Start typing..."
/>

Minimal Editor (Only Basic Formatting)

<ScribleEditor
  features={['bold', 'italic', 'underline', 'clear']}
  onChange={(html) => console.log(html)}
  placeholder="Simple editor..."
/>

Blog Editor (No Tables)

<ScribleEditor
  features={[
    'bold', 'italic', 'underline', 'strikethrough',
    'headings', 'lists', 'alignment',
    'textColor', 'backgroundColor',
    'link', 'image', 'clear'
  ]}
  onChange={(html) => console.log(html)}
  placeholder="Write your blog post..."
/>

Editor with Color Highlighting

<ScribleEditor
  features={[
    'bold', 'italic', 'underline',
    'textColor', 'backgroundColor',
    'clear'
  ]}
  onChange={(html) => console.log(html)}
  placeholder="Highlight important text..."
/>

With Initial Content

const initialContent = `
  <h1>Welcome to Scrible</h1>
  <p>This is a <strong>powerful</strong> editor!</p>
`;

<ScribleEditor
  initialValue={initialContent}
  onChange={(html) => console.log(html)}
/>

Read-Only Mode

<ScribleEditor
  initialValue={articleContent}
  readOnly={true}
/>

Check if Empty

function MyEditor() {
  const [editorValue, setEditorValue] = useState([]);

  const handleChange = (html, slateValue) => {
    setEditorValue(slateValue);
  };

  const isEmpty = editorValue.length === 0;

  return (
    <div>
      <ScribleEditor onChange={handleChange} />
      {isEmpty && <p>Editor is empty!</p>}
    </div>
  );
}

🎨 Custom Styling

Scrible comes with default styles, but you can customize the appearance:

/* Customize the editor container */
.scrible-editor {
  border: 2px solid #3b82f6;
  border-radius: 12px;
}

/* Customize the toolbar */
.toolbar {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Customize the editing area */
.editor-content {
  min-height: 300px;
  font-family: 'Georgia', serif;
  font-size: 16px;
}

⌨️ Keyboard Shortcuts

• Ctrl+B - Bold
• Ctrl+I - Italic
• Ctrl+U - Underline
• Ctrl+Z - Undo
• Ctrl+Shift+Z - Redo

🔧 HTML Output

Scrible outputs clean, semantic HTML:

<h1>Heading</h1>
<p>This is a <strong>bold</strong> paragraph with <em>italic</em> text.</p>
<ul>
  <li>List item 1</li>
  <li>List item 2</li>
</ul>
<table border="1">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

📄 License

MIT © Ayush Singhal