Laravel 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

• Laravel 11+
• Livewire 3.6+
• Tailwind CSS 4.1
• League CommonMark
• GitHub Markdown Toolbar Element
• GitHub Text Expander Element

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

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

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

The service provider is auto-discovered via Laravel's package discovery.

Usage

Basic Usage

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

With Custom Configuration

<livewire:markdown-editor
    wire:model="comment"
    placeholder="Write your comment..."
    :rows="15"
    :show-toolbar="true"
    :show-upload="true"
/>

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');
    }
}

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

    <button wire:click="save">Save</button>
</div>

Component Properties

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

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

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:

<livewire:markdown-editor
    wire:model="content"
    :show-upload="false"
/>

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 is fully supported and automatically follows your Tailwind CSS dark mode configuration.

Customization

Publishing Views

php artisan vendor:publish --tag=livewire-markdown-editor-views

Views will be published to resources/views/vendor/livewire-markdown-editor/.

Publishing Assets

php artisan vendor:publish --tag=livewire-markdown-editor-assets

License

Distributed under the MIT license. See LICENSE for details.