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.2.0(1mo ago)1314.0k↓32.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 1mo ago READMEChangelog (10)Dependencies (14)Versions (21)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 ]) ``` 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. 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 57 — FairBetter than 98% of packages Maintenance89 Actively maintained with recent releases Popularity36 Limited adoption so far Community15 Small or concentrated contributor base Maturity71 Established project with proven stability Bus Factor1 Top contributor holds 76.1% 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 ~67 days Recently: every ~9 days Total 16 Last Release 57d 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://www.gravatar.com/avatar/9bee9935aeef3432dfbdbc6356ac4a5426aa6b22d67d15747bfb341c6ad62689?d=identicon)[joelwmale](/maintainers/joelwmale) --- Top Contributors [![joelwmale](https://avatars.githubusercontent.com/u/3906839?v=4)](https://github.com/joelwmale "joelwmale (51 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 [spatie/laravel-livewire-wizard Build wizards using Livewire 4061.0M4](/packages/spatie-laravel-livewire-wizard)[leandrocfe/filament-apex-charts Apex Charts integration for Filament PHP. 4861.2M8](/packages/leandrocfe-filament-apex-charts)[bensampo/laravel-embed Painless responsive embeds for videos, slideshows and more. 142146.8k](/packages/bensampo-laravel-embed)[ralphjsmit/livewire-urls Get the previous and current url in Livewire. 82270.3k4](/packages/ralphjsmit-livewire-urls)[dragon-code/pretty-routes Pretty Routes for Laravel 10058.7k4](/packages/dragon-code-pretty-routes)[laracraft-tech/laravel-useful-additions A collection of useful Laravel additions! 58109.4k](/packages/laracraft-tech-laravel-useful-additions) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)