README

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

dudelisius / livewire-tiptap

Maintainers

Details