Group 2

Drag & drop editor for your Livewire powered blocks

Create your own blocks and make them editable with Livewire components. DropBlockEditor is made for Laravel and with Livewire, Alpine.JS and Tailwind CSS.

  • Easily create custom blocks
  • Save the output as JSON and HTML
  • Keeps history (so cmd + z works)
  • Add your own topbar buttons
  • Apply your own colors and logo in the editor
  • Supports MJML and HTML
View documentation

Create your own blocks

The editor is just the interface. The real power is that you can create your own blocks and make them editable through your own Livewire components. 
class Article extends Block
{
    public $title = 'Article';

    public $data = [
        'content' => 'This is just an example block.'
    ];

    public $blockEditComponent = 'article';

    public function render()
    {
        return <<<'blade'
            <div>{{ $content }}</div>
        blade;
    }
}

Output in JSON and HTML

Store the output of the editor as JSON and/or HTML. Using JSON, you'll be able to rebuild the editor with existing content. 
[
    {
        "data": {
            "title": "Hi!",
            "content": "This is just a very basic example of an article block. Imagine you have all the freedom that Livewire gives you. Now start making your own blocks!"
        },
        "class": "App\\DropBlockEditor\\Blocks\\Article"
    }
]

Made for newsletters

This editor was made with newsletters in mind. That's why you can use MJML and integrate with Mailcoach! 
<mjml>
<mj-body>
    <mj-section>
        <mj-column>
            <mj-image width="100px" src="/assets/img/logo-small.png"></mj-image>
            <mj-divider border-color="#F45E43"></mj-divider>
            <mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello World</mj-text>
        </mj-column>
    </mj-section>
</mj-body>
</mjml>

Hi there, DropBlockEditor is still in pre-release. If you want to keep up-to-date on development and be notified when it's production ready, follow me on X or sign up for my newsletter.

Follow on