Livewire Tiptap Editor

Easily integrate the Tiptap rich-text editor into your Laravel Livewire projects, with full customization, dropdowns, and translation support.

📋 Prerequisites

Livewire Tiptap requires the following before installing:

• PHP ≥ 8.3
• Laravel ≥ 11.x
• Livewire ≥ 3.6

🚀 Installation

composer require dudelisius/livewire-tiptap:"0.1.0-alpha.3"

Optional; publish the assets, views, and config:

php artisan vendor:publish --tag=livewire-tiptap-config
php artisan vendor:publish --tag=livewire-tiptap-views
php artisan vendor:publish --tag=livewire-tiptap-assets

⚙️ Configuration

All settings live in config/livewire-tiptap.php. The defaults are opinionated but sensible. You can override:

• toolbar: list of tokens, separators (|), spacers (~), or dropdown groups ([...]).
• use_default_classes: turn the built-in Tailwind classes on/off.
• classes: define your own class names or target elements via fallback keys.
• icons: map tokens to Blade component aliases (Tabler, Heroicons, or your own SVG).
• buttons: configure per-button icon, label, etc.
• extensions: pass through Tiptap extension options (e.g. Link). See for example the Tiptap Link docs.

🎨 Usage

Include the styles & scripts in your layout:

@livewireTiptapStyles
@livewireStyles

<livewire-tiptap:editor wire:model="content" />

@livewireScripts
@livewireTiptapScripts

🛠 The Toolbar

The toolbar lets users style content. You can configure it in several ways:

Simple Buttons

Just add the token for each extension:

'toolbar' => 'bold italic underline strike'

Separator

Group buttons with a vertical bar:

'toolbar' => 'bold italic | underline strike'

Spacer

Push later buttons to the right:

'toolbar' => 'bold italic ~ undo redo'

Dropdown Groups

Group options in a dropdown by wrapping tokens in [...]. The dropdown shows the first icon by default, and updates to reflect the active formatting.

'toolbar' => '[paragraph heading-1 heading-2 heading-3] | bold italic'

Per-Component Override

Override the toolbar when rendering:

<livewire-tiptap:editor
    wire:model="content"
    toolbar="bold italic | link unlink | undo redo"
/>

🎨 Styling

All default classes use Tailwind and live in the config under classes. If you prefer your own CSS, either customize each key or disable defaults:

'use_default_classes' => false,

🔧 Advanced

Extension Overrides

Pass extension options at render time:

<livewire-tiptap:editor
   wire:model="content"
   :extensions="[
       'link' => ['autolink' => false],
   ]"
/>

Or edit them in your published config:

'extensions' => [
    'link' => [
        'autolink' => false,
        // …
    ],
],

Supported Extensions

• paragraph
• heading-1
• heading-2
• heading-3
• heading-4
• heading-5
• heading-6
• bold
• italic
• underline
• strike
• blockquotes
• code
• highlight
• hardBreak
• horizontalRule
• bulletList
• orderedList
• subscript
• superscript
• emojis
• link
• unlink
• undo
• red

More coming soon!

🌐 Translations

This package ships with English, Dutch, French, and Spanish translations. To add your own, submit a PR or drop a file into:

resources/lang/livewire-tiptap/{locale}.php

🤝 Contributing & Testing

PRs are very welcome! Please run the full QA suite before submitting:

composer qa

📈 Roadmap

• Additional Tiptap extensions (blockquote, image, tables, etc.)
• Image uploads & drag-drop support
• Autosave & Ctrl+S handling
• Bubble menus & tooltips
• Improved documentation & examples
• First stable (1.0) release