PHPackages                             joelwmale/livewire-quill - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. joelwmale/livewire-quill

ActiveLibrary[Utility & Helpers](/categories/utility)

joelwmale/livewire-quill
========================

Easily add QuillJS with image support to any Laravel Livewire component.

5.4.0(1mo ago)1519.7k↓56.2%5[3 PRs](https://github.com/joelwmale/livewire-quill/pulls)MITJavaScriptPHP ^8.1|^8.2|^8.3|^8.4|^8.5CI passing

Since Jun 13Pushed 1mo ago2 watchersCompare

[ Source](https://github.com/joelwmale/livewire-quill)[ Packagist](https://packagist.org/packages/joelwmale/livewire-quill)[ Docs](https://github.com/joelwmale/livewire-quill)[ RSS](/packages/joelwmale-livewire-quill/feed)WikiDiscussions master Synced 3d ago

READMEChangelog (10)Dependencies (21)Versions (24)Used By (0)

Livewire Quill
==============

[](#livewire-quill)

[![Latest Version on Packagist](https://camo.githubusercontent.com/9ec75366bd24c9f655ee38e456fb4bc94461ba3a4a7dfc4fac0bcf19eedbed2a/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6a6f656c776d616c652f6c697665776972652d7175696c6c2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/joelwmale/livewire-quill)[![GitHub Tests Action Status](https://camo.githubusercontent.com/ea53321c94260e571dce5320f706ebfd1ca584575d986641ba1c63a20f465a27/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f6a6f656c776d616c652f6c697665776972652d7175696c6c2f74657374732e796d6c3f6272616e63683d6d6173746572266c6162656c3d5465737473)](https://github.com/joelwmale/livewire-quill/actions?query=workflow%3ATests+branch%3Amaster)[![Total Downloads](https://camo.githubusercontent.com/1d784a3103961060a68eb16ecacf1b627120cb16b97bcb570735e631db405774/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6a6f656c776d616c652f6c697665776972652d7175696c6c2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/joelwmale/livewire-quill)[![License](https://camo.githubusercontent.com/67a0b1eb7cd28fab775c8921b4efe8313fb31469e622e54c45481eff9e31777d/68747470733a2f2f706f7365722e707567782e6f72672f6a6f656c776d616c652f6c697665776972652d7175696c6c2f6c6963656e73652e737667)](https://packagist.org/packages/joelwmale/livewire-quill)

---

This package adds an easy to use Livewire component to your application, which will create and largely manage a Quill editor for you.

It supports image uploads out of the box with zero work from you.

Updating from v4.x to v5.x
--------------------------

[](#updating-from-v4x-to-v5x)

If you're updating from v4.x to v5.x, please note you'll need to force publish the assets again:

```
php artisan vendor:publish --tag=livewire-quill:assets --force
```

This is due to the fact that the underlying Quill library has been updated to v2.x, and without force, the assets will not be updated.

Livewire v2.x Support
---------------------

[](#livewire-v2x-support)

v2.0 of this package only supports Livewire v3.x. If you're still using Livewire 2.x, please use [v1.0](https://github.com/joelwmale/livewire-quill/tree/v1.0.0) of this package.

Installation
------------

[](#installation)

You can install the package via composer:

```
composer require joelwmale/livewire-quill
```

Once installed, publish the assets:

```
php artisan vendor:publish --tag=livewire-quill:assets
```

### Config (optional)

[](#config-optional)

After you've installed the package, you can optionally publish the config to change any defaults:

```
php artisan vendor:publish --tag=livewire-quill:config
```

This is the contents of the published config file:

```
return [
    /*
     * The base folder to store the images in
     */
    'storage_folder' => env('LIVEWIRE_QUILL_STORAGE_FOLDER', 'images'),

    /*
     * Should the images be stored publically or not
     */
    'store_publically' => env('LIVEWIRE_QUILL_STORE_PUBLICALLY', true),

    /*
     * Should the images be deleted from the server once deleted in the editor
     * or retained for future use (note: the package will never re-use the same image)
     */
    'clean_up_deleted_images' => env('LIVEWIRE_QUILL_CLEAN_UP_DELETED_IMAGES', true),

    /*
     * The base classes to use for all instances of the editor
     */
    'editor_classes' => env('LIVEWIRE_QUILL_EDITOR_CLASSES', 'bg-white'),

    /**
     * The toolbar options to use for all instances of the editor
     */
    'editor_toolbar' => env('LIVEWIRE_QUILL_EDITOR_TOOLBAR', [
        [
            [
                'header' => [1, 2, 3, 4, 5, 6, false],
            ],
        ],
        ['bold', 'italic', 'underline'],
        [
            [
                'list' => 'ordered',
            ],
            [
                'list' => 'bullet',
            ],
        ],
        ['link'],
        ['image'],
    ]),
];
```

Usage
-----

[](#usage)

Use it in any Livewire component like so:

```
@livewire('livewire-quill', [
    'quillId' => 'customQuillId',
    'data' => $content,
    'placeholder' => 'Type something...',
    'classes' => 'bg-white text-primary', // optional classes that can be added to the editor, that are added for this instance only
    'toolbar' => [
        [
            [
                'header' => [1, 2, 3, 4, 5, 6, false],
            ],
        ],
        ['bold', 'italic', 'underline'],
        [
            [
                'list' => 'ordered',
            ],
            [
                'list' => 'bullet',
            ],
        ],
        ['link'],
        ['image'],
    ],
    'mergeToolbar' => true, // optional, if you want to merge the toolbar with the default toolbar configuration
    'lazy' => false, // optional, if true the editor will only sync content to the server on blur instead of every keystroke
])
```

On your Livewire component, add the following:

```
use Joelwmale\LivewireQuill\Traits\HasQuillEditor;

class SomeLivewireComponent extends Component
{
    use HasQuillEditor;

    public function contentChanged($editorId, $content)
    {
        // $editorId is the id use when you initiated the livewire component
        // $content is the raw text editor content

        // save to the local variable...
        $this->content = $content;
    }
}
```

Configuration
-------------

[](#configuration)

### QuillId

[](#quillid)

A div is created with this id, this allows for easy use of multiple quill instances on the same page.

### Data

[](#data)

This is the initial value of the text editor (i.e: a previous saved version of the text editor)

### Placeholder

[](#placeholder)

The placeholder text for the editor

### Classes

[](#classes)

Any custom classes you wish to add to the base editor class.

Note: for any customisation, we recommend using CSS to make changes. You can always edit a specific Quill instance by referring to the #quillId variable.

### Toolbar

[](#toolbar)

An array of arrays to manage and create a toolbar for Quill to use

### MergeToolbar

[](#mergetoolbar)

If you want to merge the toolbar with the default toolbar configuration (i.e the one set in the config file) then set this to true.

If you set this to false, the toolbar will be replaced with the one you provide.

### Lazy

[](#lazy)

By default, the editor syncs content to the server on every keystroke (debounced at 500ms). If you'd prefer to only sync when the user finishes editing and leaves the editor, set `lazy` to `true`:

```
@livewire('livewire-quill', [
    'quillId' => 'myEditor',
    'lazy' => true,
])
```

This is useful when you don't want the overhead of frequent server round-trips, such as in forms where the content only needs to be available on submit.

Initialising Livewire Quill Manually
------------------------------------

[](#initialising-livewire-quill-manually)

If you wish to initialise Livewire Quill manually (i.e after you show a modal) you can dispatch an event to the window:

### Javascript:

[](#javascript)

```
dispatchEvent('livewire-quill:init')
```

### Livewire:

[](#livewire)

```
$this->dispatchBrowserEvent('livewire-quill:init');
```

Testing
-------

[](#testing)

```
composer test
```

Credits
-------

[](#credits)

- [joelwmale](https://github.com/joelwmale)
- [All Contributors](../../contributors)

Licence
-------

[](#licence)

Copyright © Joel Male

Livewire Quill is open-sourced software licensed under the [MIT license](LICENSE.md).

###  Health Score

58

—

FairBetter than 98% of packages

Maintenance94

Actively maintained with recent releases

Popularity37

Limited adoption so far

Community15

Small or concentrated contributor base

Maturity72

Established project with proven stability

 Bus Factor1

Top contributor holds 79.2% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~64 days

Recently: every ~27 days

Total

18

Last Release

31d ago

Major Versions

1.0.2 → 2.0.02023-11-23

2.0.0 → 3.0.02024-09-03

3.0.1 → 4.0.02025-01-31

4.1.0 → 5.0.02025-04-19

PHP version history (4 changes)1.0.0PHP ^7.3|^8.0|^8.1|8.2

2.0.0PHP ^8.1|8.2

3.0.0PHP ^8.1|^8.2|^8.3|^8.4

5.2.0PHP ^8.1|^8.2|^8.3|^8.4|^8.5

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/3906839?v=4)[Joel Male](/maintainers/joelwmale)[@joelwmale](https://github.com/joelwmale)

---

Top Contributors

[![joelwmale](https://avatars.githubusercontent.com/u/3906839?v=4)](https://github.com/joelwmale "joelwmale (61 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (8 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (5 commits)")[![sinatx](https://avatars.githubusercontent.com/u/76904071?v=4)](https://github.com/sinatx "sinatx (3 commits)")

---

Tags

laraveljoelwmalelivewire-quill

###  Code Quality

TestsPest

Code StyleLaravel Pint

### Embed Badge

![Health badge](/badges/joelwmale-livewire-quill/health.svg)

```
[![Health](https://phpackages.com/badges/joelwmale-livewire-quill/health.svg)](https://phpackages.com/packages/joelwmale-livewire-quill)
```

###  Alternatives

[psalm/plugin-laravel

Psalm plugin for Laravel

3355.3M346](/packages/psalm-plugin-laravel)[tallstackui/tallstackui

TallStackUI is a powerful suite of Blade components that elevate your workflow of Livewire applications.

725173.2k14](/packages/tallstackui-tallstackui)[laravel/pulse

Laravel Pulse is a real-time application performance monitoring tool and dashboard for your Laravel application.

1.7k15.1M132](/packages/laravel-pulse)[laravel/ai

The official AI SDK for Laravel.

1.0k3.2M201](/packages/laravel-ai)[moonshine/moonshine

Laravel administration panel

1.3k253.1k81](/packages/moonshine-moonshine)[tomshaw/electricgrid

A feature-rich Livewire package designed for projects that require dynamic, interactive data tables.

119.4k](/packages/tomshaw-electricgrid)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)