Download the PHP package etgohomeok/livewire-editorjs without Composer

livewire-editorjs

Editor.js component for Laravel Livewire 4, as a drop-in <livewire:editorjs> component with wire:model support. Includes a number of common blocks (including image uploads) and HTML renderers for Tailwind, Flux, and basic HTML.

Requirements

• PHP 8.2+
• Laravel 12
• Livewire 4

Installation

If you're using the Flux renderer, you also need Flux installed in your host app:

Usage

Editor component

Drop it into any Livewire component's view and bind with wire:model. The component renders no outer chrome — wrap it yourself to give it width, padding, and a background:

Without a wrapper like that, the editor sits with no padding and a transparent background. The example above assumes Tailwind + @tailwindcss/typography; style however your app prefers.

$content on the parent component will be an array shaped like ['blocks' => [...]] — the Editor.js save format.

Props

Properties can be used to customize the editor on a per-use basis:

Rendering saved JSON

Pick whichever renderer suits your frontend:

All three accept the raw array saved by the editor and return an HTML string. Use {!! $html !!} in Blade to output it — the renderers already sanitize inline markup, so double-escaping strips valid <b>, <i>, etc.

Need something different? Extend BaseRenderer and override the renderParagraph, renderHeader, etc. methods, or publish the source (see below) and own the code.

Bundled Editor.js plugins

The bundled JS (dist/editor.js) ships with these tools:

• header — @editorjs/header 2.8.8
• image — @editorjs/image 2.10.3
• delimiter — @editorjs/delimiter 1.4.2
• list — @editorjs/list 2.0.9
• quote — @editorjs/quote 2.7.6
• warning — @editorjs/warning 1.4.1
• table — @editorjs/table 2.4.5

Plus paragraph, which is Editor.js's implicit default block.

Core: @editorjs/editorjs 2.31.6.

All seven plugins are always present in the bundle; the tools prop only controls which get registered on each editor instance.

Configuration

Publish the config to change global defaults:

Per-instance props override these.

Publishable tags

Image uploads

The image tool is wired to Livewire's WithFileUploads. Uploaded files land on the configured disk under directory, and the returned URL comes from Storage::disk($disk)->url($path) — so S3, R2, local public, etc. all work as long as the disk is configured in config/filesystems.php.

If you're using the default public disk, run php artisan storage:link in your host app — without the public/storage symlink, uploaded images 403 when the browser tries to load them.

PHP upload limits

Uploads are bounded by three separate knobs, all in the host app — the package doesn't override any of them:

• upload_max_filesize and post_max_size in the web SAPI's php.ini (PHP silently rejects anything larger before Laravel sees it — ship defaults are often 2 MB).
• livewire.temporary_file_upload.rules in the host's config/livewire.php (defaults to required|file|max:12288, i.e. 12 MB).

If an upload fails, the image tool surfaces the file size in the error message — if it's above ~2 MB, the PHP limits are the usual suspect.

File cleanup

Uploaded images are not cleaned up automatically — removing an image block in the editor, deleting the parent record, or never saving the content all leave the underlying file on disk. This is intentional (eager deletion breaks shared images, undo, and edit history), but it means your directory will accumulate orphans over time. The typical pattern is a scheduled command that scans the directory and deletes files that aren't referenced by any content in the database.

"Upload by URL" fetches the remote file and re-uploads it to the same disk. There's no built-in size/type validation beyond Livewire's defaults; add a policy in your host app if you need one.