# Quill — Modern WYSIWYG Rich Text Editor for the Web

> A free open-source rich text editor built for compatibility and extensibility, with a modular architecture and expressive API for custom content formats.

## Install

Save in your project root:

# Quill — Modern WYSIWYG Rich Text Editor for the Web

## Quick Use
```bash
npm install quill
```
```javascript
import Quill from 'quill';
const editor = new Quill('#editor', {
  theme: 'snow',
  modules: { toolbar: true }
});
```

## Introduction
Quill is a modern WYSIWYG editor designed for compatibility and extensibility. It uses a document model called Parchment that closely mirrors the DOM, making it predictable and easy to extend with custom content types, formats, and embeds.

## What Quill Does
- Renders rich text content with consistent cross-browser output
- Provides a modular toolbar with built-in formatting controls
- Expresses content changes as operational transforms (Deltas) for reliable collaboration
- Supports custom blots to embed any content type (video, formulas, mentions)
- Offers two bundled themes: Snow (toolbar) and Bubble (tooltip-based)

## Architecture Overview
Quill is built around three layers: Parchment (the document model that maps formats to DOM nodes), Delta (a JSON-based representation of document content and changes), and Modules (pluggable components for toolbar, keyboard bindings, clipboard, and history). The Delta format makes it straightforward to implement real-time collaboration or persistent storage without parsing HTML.

## Self-Hosting & Configuration
- Install via npm, yarn, or include from a CDN
- Initialize with a container element and an options object specifying theme and modules
- Customize the toolbar by passing an array of format groups
- Extend functionality by writing custom modules that hook into editor events
- Use the `quill.getContents()` method to retrieve Delta JSON for storage

## Key Features
- Delta format provides a structured JSON representation of rich text content
- Custom Blots let developers define new inline, block, or embed formats
- Clipboard module handles paste normalization across browsers
- Full keyboard binding customization for shortcuts and hotkeys
- Active community with a wide ecosystem of plugins and integrations

## Comparison with Similar Tools
- **TinyMCE** — more features out of the box with a plugin marketplace; Quill is lighter and more developer-friendly
- **ProseMirror** — schema-based and highly customizable; Quill is simpler to get started with
- **CKEditor** — enterprise-grade with collaboration built in; Quill is fully open source and MIT-licensed
- **Slate** — React-first framework for building custom editors; Quill works as a standalone drop-in component
- **Tiptap** — built on ProseMirror with a modern API; Quill has broader legacy adoption

## FAQ
**Q: What is a Delta?**
A: A Delta is a JSON object describing document content or changes as a series of insert, delete, and retain operations.

**Q: Can Quill handle real-time collaboration?**
A: Yes. The Delta format is designed for operational transformation, making it compatible with collaboration backends like ShareDB or Yjs.

**Q: Is Quill framework-agnostic?**
A: Yes. Quill is a vanilla JavaScript library and works with React, Vue, Angular, or plain HTML.

**Q: How do I customize the toolbar?**
A: Pass a toolbar configuration array in the modules option when initializing the editor.

## Sources
- https://github.com/slab/quill
- https://quilljs.com/

---
Source: https://tokrepo.com/en/workflows/20d860cf-4361-11f1-9bc6-00163e2b0d79
Author: AI Open Source