PHPackages mckenziearts/livewire-markdown-editor - 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. [Parsing & Serialization](/categories/parsing) 4. / 5. mckenziearts/livewire-markdown-editor ActiveLibrary[Parsing & Serialization](/categories/parsing) mckenziearts/livewire-markdown-editor ===================================== GitHub-style markdown editor for Laravel with Livewire and Alpine.js v1.3(2mo ago)79712MITPHPPHP ^8.3CI passing Since Jan 7Pushed 2mo agoCompare [ Source](https://github.com/mckenziearts/livewire-markdown-editor)[ Packagist](https://packagist.org/packages/mckenziearts/livewire-markdown-editor)[ Fund](https://www.paypal.com/paypalme/monneyarthur)[ GitHub Sponsors](https://github.com/mckenziearts)[ RSS](/packages/mckenziearts-livewire-markdown-editor/feed)WikiDiscussions main Synced 2d ago READMEChangelog (5)Dependencies (39)Versions (12)Used By (0)Security (1) Laravel Markdown Editor ======================= [](#laravel-markdown-editor) [![Markdown Livewire Banner](art/banner.png)](art/banner.png) [![Build Status](https://github.com/mckenziearts/livewire-markdown-editor/actions/workflows/ci.yml/badge.svg)](https://github.com/mckenziearts/livewire-markdown-editor/actions) [![Total Downloads](https://camo.githubusercontent.com/47f5787a6a68dda3f00e95335a5073a0f115df16c3bdb9b6f6e03070b0ab0876/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6d636b656e7a6965617274732f6c697665776972652d6d61726b646f776e2d656469746f72)](https://packagist.org/packages/mckenziearts/livewire-markdown-editor) [![Latest Stable Version](https://camo.githubusercontent.com/e41c08353bc6d6c924d6273c2e8b381dfbf997bae754b05ab6ddb199e8ec0627/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6d636b656e7a6965617274732f6c697665776972652d6d61726b646f776e2d656469746f72)](https://packagist.org/packages/mckenziearts/livewire-markdown-editor) [![License](https://camo.githubusercontent.com/5779b3cfb1cf0a02293f49de15da56a0db2ee5cc5e401e552c44d277b1de7f34/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f6d636b656e7a6965617274732f6c697665776972652d6d61726b646f776e2d656469746f72)](https://packagist.org/packages/mckenziearts/livewire-markdown-editor) GitHub-style Markdown editor for Laravel with Livewire and Alpine.js. This module provides a complete, standalone Markdown editing experience with full dark mode support. Dependencies ------------ [](#dependencies) - Laravel 11+ - Livewire 3.6+ - Tailwind CSS 4.1 - League CommonMark - GitHub Markdown Toolbar Element - GitHub Text Expander Element Features -------- [](#features) - 🎨 GitHub-style toolbar with all formatting options - 📝 Live markdown preview - 🌓 Full dark mode support - 📎 File upload with automatic Markdown insertion - ✨ GitHub Flavored Markdown (GFM) support - 🔖 Spatie Shiki Highlight code blocks - 📋 Tables, task lists, and more - 🔄 Livewire integration with two-way binding - 🎯 Multiple editor instances support Installation ------------ [](#installation) Livewire Markdown editor can be installed via composer from your project root: ``` composer require mckenziearts/livewire-markdown-editor ``` Include the Markdown formatting buttons for text inputs Editor into your project: ``` npm install --save @github/markdown-toolbar-element @github/text-expander-element ``` ### 2. Load assets [](#2-load-assets) Add the module's JavaScript to your main `resources/js/app.js`: ``` import '../../vendor/mckenziearts/livewire-markdown-editor/resources/js/markdown-editor.js'; ``` And the CSS file to your main `resources/css/app.css`: ``` @import "../../vendor/mckenziearts/livewire-markdown-editor/resources/css/markdown-editor.css"; ``` Then build: ``` npm run build ``` ### 3. Register the module [](#3-register-the-module) The service provider is auto-discovered via Laravel's package discovery. Usage ----- [](#usage) ### Basic Usage [](#basic-usage) ``` ``` ### With Custom Configuration [](#with-custom-configuration) ``` ``` ### In Livewire Components [](#in-livewire-components) ``` use Livewire\Component; class CreatePost extends Component { public string $content = ''; public function save() { $this->validate([ 'content' => 'required|min:10', ]); // $this->content contains the markdown } public function render() { return view('livewire.create-post'); } } ``` ``` Save ``` Component Properties -------------------- [](#component-properties) PropertyTypeDefaultDescription`content`string`''`The markdown content (use with `wire:model`)`placeholder`string`'Leave a comment...'`Textarea placeholder text`class`string`null`Textarea custom classes`rows`int`10`Number of textarea rows`showToolbar`bool`true`Show/hide the markdown toolbar`showUpload`bool`true`Show/hide the file upload buttonToolbar Features ---------------- [](#toolbar-features) - **Heading** - Insert heading - **Bold** - Make text bold - **Italic** - Make text italic - **Quote** - Insert blockquote - **Code** - Insert code block - **Link** - Insert link - **Unordered List** - Insert bullet list - **Ordered List** - Insert numbered list - **Task List** - Insert checklist - **File Upload** - Upload and insert files/images File Uploads ------------ [](#file-uploads) Files are automatically uploaded to the configured disk when selected. Images are inserted as `![filename](url)` and other files as `[filename](url)`. Make sure your storage is properly configured: ``` php artisan storage:link ``` ### Security [](#security) To prevent arbitrary file upload vulnerabilities (stored XSS, phishing page hosting, malware distribution), only images are accepted by default. Uploaded files are stored under a randomly generated filename with the validated extension, and the original client-provided filename is sanitized before being inserted into the markdown output. You can customize the allowed file types and max size via the `upload` config key: ``` // config/livewire-markdown-editor.php 'upload' => [ 'max_size' => 4096, // kilobytes 'allowed_extensions' => ['jpg', 'jpeg', 'png', 'gif', 'webp', 'avif'], 'images_only' => true, ], ``` If you need to allow non-image files, extend `allowed_extensions` and set `images_only` to `false`. When using a public cloud disk (S3, Spaces, R2, Scaleway), review the bucket policy to ensure non-whitelisted Content-Types cannot be served inline. If you do not use file uploads at all, disable the feature entirely: ``` ``` Markdown Support ---------------- [](#markdown-support) The editor supports full GitHub Flavored Markdown including: - Headings - Bold, italic, strikethrough - Links and images - Code blocks with syntax highlighting - Task lists - Blockquotes - Horizontal rules Dark Mode --------- [](#dark-mode) Dark mode is fully supported and automatically follows your Tailwind CSS dark mode configuration. Customization ------------- [](#customization) ### Publishing Views [](#publishing-views) ``` php artisan vendor:publish --tag=livewire-markdown-editor-views ``` Views will be published to `resources/views/vendor/livewire-markdown-editor/`. ### Publishing Assets [](#publishing-assets) ``` php artisan vendor:publish --tag=livewire-markdown-editor-assets ``` License ------- [](#license) Distributed under the MIT license. See LICENSE for details. ### Health Score 47 — FairBetter than 93% of packages Maintenance86 Actively maintained with recent releases Popularity25 Limited adoption so far Community11 Small or concentrated contributor base Maturity56 Maturing project, gaining track record Bus Factor1 Top contributor holds 63.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 ~26 days Total 5 Last Release 71d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/14105989?v=4)[Arthur Monney](/maintainers/Mckenziearts)[@mckenziearts](https://github.com/mckenziearts) --- Top Contributors [![mckenziearts](https://avatars.githubusercontent.com/u/14105989?v=4)](https://github.com/mckenziearts "mckenziearts (12 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (4 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (3 commits)") --- Tags laravelmarkdownlivewire ### Code Quality TestsPest Static AnalysisPHPStan, Rector Code StyleLaravel Pint Type Coverage Yes ### Embed Badge ![Health badge](/badges/mckenziearts-livewire-markdown-editor/health.svg) ``` [![Health](https://phpackages.com/badges/mckenziearts-livewire-markdown-editor/health.svg)](https://phpackages.com/packages/mckenziearts-livewire-markdown-editor) ``` ### Alternatives [tallstackui/tallstackui TallStackUI is a powerful suite of Blade components that elevate your workflow of Livewire applications. 725173.0k14](/packages/tallstackui-tallstackui)[laravel/pulse Laravel Pulse is a real-time application performance monitoring tool and dashboard for your Laravel application. 1.7k15.1M131](/packages/laravel-pulse)[psalm/plugin-laravel Psalm plugin for Laravel 3355.3M345](/packages/psalm-plugin-laravel)[laravel/ai The official AI SDK for Laravel. 1.0k3.2M193](/packages/laravel-ai)[moonshine/moonshine Laravel administration panel 1.3k253.1k81](/packages/moonshine-moonshine)[illuminate/mail The Illuminate Mail package. 5910.6M500](/packages/illuminate-mail) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)