PHPackages                             abbeymichael/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. abbeymichael/livewire-markdown-editor

ActiveLibrary[Parsing & Serialization](/categories/parsing)

abbeymichael/livewire-markdown-editor
=====================================

GitHub-style markdown editor for Laravel with Livewire and Alpine.js, with public file upload support

v1.0.1(1mo ago)11↓87.5%MITPHPPHP ^8.3

Since Jun 6Pushed 1mo agoCompare

[ Source](https://github.com/abbeymichael/livewire-markdown-editor)[ Packagist](https://packagist.org/packages/abbeymichael/livewire-markdown-editor)[ RSS](/packages/abbeymichael-livewire-markdown-editor/feed)WikiDiscussions main Synced 1w ago

READMEChangelog (1)Dependencies (13)Versions (3)Used By (0)

Laravel Markdown Editor
=======================

[](#laravel-markdown-editor)

 [![Markdown Livewire Banner](art/banner.png)](art/banner.png)

 [![Build Status](https://github.com/abbeymichael/livewire-markdown-editor/actions/workflows/ci.yml/badge.svg)](https://github.com/abbeymichael/livewire-markdown-editor/actions) [![Total Downloads](https://camo.githubusercontent.com/8464147afb5b2890c68fe5b03402cd30ec5129d672e01b8bfd8793619a942542/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f61626265796d69636861656c2f6c697665776972652d6d61726b646f776e2d656469746f72)](https://packagist.org/packages/abbeymichael/livewire-markdown-editor) [![Latest Stable Version](https://camo.githubusercontent.com/cbb943a9ac493120575f0e6bfa809533e3b9dc3a6364b9b5429d2dda80070d02/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f61626265796d69636861656c2f6c697665776972652d6d61726b646f776e2d656469746f72)](https://packagist.org/packages/abbeymichael/livewire-markdown-editor) [![License](https://camo.githubusercontent.com/4b32a0913ffe7e34a636aae7defd1b22cfa88ad9128f78c4aaff091ec52d734b/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f61626265796d69636861656c2f6c697665776972652d6d61726b646f776e2d656469746f72)](https://packagist.org/packages/abbeymichael/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)

Install via Composer:

```
composer require abbeymichael/livewire-markdown-editor
```

Install the required JS dependencies:

```
npm install --save @github/markdown-toolbar-element @github/text-expander-element
```

### 2. Load assets

[](#2-load-assets)

Add the module's JavaScript to your `resources/js/app.js`:

```
import '../../vendor/abbeymichael/livewire-markdown-editor/resources/js/markdown-editor.js';
```

And the CSS to your `resources/css/app.css`:

```
@import "../../vendor/abbeymichael/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 buttonConfiguration
-------------

[](#configuration)

You can configure the editor without publishing the config file by setting environment variables in your `.env`:

```
# Storage disk to use (must be defined in config/filesystems.php)
MARKDOWN_EDITOR_FILESYSTEM_DISK=public

# Shiki syntax highlighting theme
# Options: github-dark, github-light, monokai, nord, one-dark-pro, dracula
# Full list: https://github.com/shikijs/textmate-grammars-themes/tree/main/packages/tm-themes
MARKDOWN_EDITOR_THEME=github-light

# File upload visibility: 'public' or 'private'
# Set to 'public' so uploaded images are accessible via URL in rendered markdown.
# Set to 'private' if you want to restrict access and serve signed/temporary URLs yourself.
MARKDOWN_EDITOR_UPLOAD_VISIBILITY=public
```

If you need deeper customization, publish the full config file:

```
php artisan vendor:publish --tag=livewire-markdown-editor-config
```

This creates `config/livewire-markdown-editor.php`:

```
return [
    'disk'  => env('MARKDOWN_EDITOR_FILESYSTEM_DISK', 'local'),
    'theme' => env('MARKDOWN_EDITOR_THEME', 'github-light'),

    'upload' => [
        'max_size'           => 4096, // kilobytes
        'allowed_extensions' => ['jpg', 'jpeg', 'png', 'gif', 'webp', 'avif'],
        'images_only'        => true,
        'visibility'         => env('MARKDOWN_EDITOR_UPLOAD_VISIBILITY', 'public'),
    ],
];
```

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 symlink is set up:

```
php artisan storage:link
```

### Visibility

[](#visibility)

By default uploaded files are stored as `public` so they are accessible via URL in rendered markdown. You can switch to `private` storage via your `.env` if you want to restrict access and generate signed or temporary URLs yourself:

```
MARKDOWN_EDITOR_UPLOAD_VISIBILITY=private
```

### 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 allow non-image files by updating your config:

```
'upload' => [
    'max_size'           => 4096,
    'allowed_extensions' => ['jpg', 'jpeg', 'png', 'gif', 'webp', 'avif', 'pdf', 'zip'],
    'images_only'        => false,
    'visibility'         => env('MARKDOWN_EDITOR_UPLOAD_VISIBILITY', 'public'),
],
```

> When using a public cloud disk (S3, Spaces, R2, Scaleway), review your bucket policy to ensure non-whitelisted Content-Types cannot be served inline.

To disable file uploads entirely:

```

```

Toolbar 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

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/`.

License
-------

[](#license)

Distributed under the MIT license. See LICENSE for details.

###  Health Score

40

—

FairBetter than 86% of packages

Maintenance90

Actively maintained with recent releases

Popularity3

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity50

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 60% 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 ~0 days

Total

2

Last Release

48d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/a5a97d1d14d3a1b8d38ece13cd995b8afd478df3870ac7274ef18791235bc995?d=identicon)[abbeymichael](/maintainers/abbeymichael)

---

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)")[![abbeymichael](https://avatars.githubusercontent.com/u/26471152?v=4)](https://github.com/abbeymichael "abbeymichael (1 commits)")

---

Tags

laravelmarkdownlivewireeditorfile-upload

###  Code Quality

TestsPest

Static AnalysisPHPStan, Rector

Code StyleLaravel Pint

Type Coverage Yes

### Embed Badge

![Health badge](/badges/abbeymichael-livewire-markdown-editor/health.svg)

```
[![Health](https://phpackages.com/badges/abbeymichael-livewire-markdown-editor/health.svg)](https://phpackages.com/packages/abbeymichael-livewire-markdown-editor)
```

###  Alternatives

[tallstackui/tallstackui

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

728176.2k14](/packages/tallstackui-tallstackui)[psalm/plugin-laravel

Psalm plugin for Laravel

3345.3M347](/packages/psalm-plugin-laravel)[laravel/ai

The official AI SDK for Laravel.

1.0k3.2M246](/packages/laravel-ai)[illuminate/mail

The Illuminate Mail package.

5910.6M528](/packages/illuminate-mail)[tomshaw/electricgrid

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

119.4k](/packages/tomshaw-electricgrid)[api-platform/laravel

API Platform support for Laravel

58174.6k17](/packages/api-platform-laravel)

PHPackages © 2026

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