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 storage/app/public/ when selected. Images are inserted as ![filename](https://raw.githubusercontent.com/mckenziearts/livewire-markdown-editor/HEAD/url) and other files as [filename](https://github.com/mckenziearts/livewire-markdown-editor/blob/HEAD/url).

Make sure your storage is properly configured:

php artisan storage:link

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.