Basic Usage

<x-quill />

Props

• value - string (initial HTML content)
• placeholder - string
• theme - string (default: 'snow', alternative: 'bubble')
• height - string (default: '200px')
• formats - array|null (format names to enable, null = all formats enabled)

Livewire Integration

<x-quill wire:model="content" />

The component uses $wire and .live modifier for real-time synchronization with Livewire component properties.

Features

• Rich text formatting (bold, italic, underline, strikethrough)
• Headings (H1-H6)
• Lists (ordered, unordered)
• Links and images
• Text alignment
• Code blocks
• Blockquotes
• Undo/Redo support
• Dark mode support

Examples

<!-- Basic -->
<x-quill />

<!-- With placeholder -->
<x-quill placeholder="Start typing your content..." />

<!-- With initial value -->
<x-quill value="<p>Initial content</p>" />

<!-- Custom height -->
<x-quill height="400px" />

<!-- Bubble theme -->
<x-quill theme="bubble" />

<!-- Livewire -->
<x-quill wire:model="content" />

<!-- Custom formats -->
<x-quill :formats="['bold', 'italic', 'underline', 'link']" />

Available Formats

Inline formats:

• background, bold, color, font, code, italic, link, size, strike, script, underline

Block formats:

• blockquote, header, indent, list, align, direction, code-block

Embeds:

• formula, image, video

See Quill Formats Documentation for more details.