Weave Code
Editor.js Laravel Package
codex-team/editor.js
Editor.js is a modern block-style content editor that produces clean, structured JSON instead of raw HTML. Its extensible block and plugin system makes it easy to build flexible writing experiences and store content that’s simple to validate, transform, and render anywhere.
A block-style editor with clean JSON output
Frequently asked questions about Editor.js
- Is codex-team/editor.js a Laravel package I can install with Composer?
- No. Editor.js is a framework-agnostic, browser-side JavaScript library distributed via npm, so there is no Composer package, service provider, config file, or PHP API. You install it with npm and bundle it through Vite, then treat it as the authoring layer of your Laravel app. Laravel remains responsible for authentication, uploads, validation, persistence, and rendering.
- How do I install and mount Editor.js in a Laravel application?
- Run npm install @editorjs/editorjs plus any block tools you need, then import them in a JavaScript file that Vite bundles. Mount the editor inside a Blade view using a small Alpine or vanilla JS wrapper that instantiates Editor.js against a container element and a hidden input or form field. On submit, serialize editor.save() to JSON and POST it to a controller route. No Laravel conventions need to be abandoned for this.
- How should I store Editor.js JSON output in a Laravel database?
- Store the block array in a json or jsonb column and cast it on the Eloquent model with an array or AsArrayObject cast so reads and writes stay trivial. Consider adding plain_text and excerpt projections alongside the blocks so search and previews do not require parsing JSON. Avoid relying on deep JSON queries for core flows, since behavior differs between MySQL, Postgres, and SQLite.
- How do I render Editor.js block content in Blade?
- Editor.js only produces inert JSON, so Laravel must supply the rendering layer. A common approach is a renderer service or Blade component tree that switches on each block type and outputs escaped markup, which is better for SEO, caching, and no-JS clients. A client-side renderer is simpler to build but weaker for SEO and accessibility, so decide this before writing code.
- How do I validate Editor.js block JSON in Laravel?
- Laravel's validator has no built-in concept of block schemas, so you need a custom rule or a dedicated schema validator. At minimum, verify the blocks array shape, the allowed block types, and the presence of required fields per type before persisting. Without server-side validation, malformed or malicious JSON can land in your database and break rendering later.
- How do I handle image and file uploads with Editor.js in Laravel?
- Image and file blocks expect an upload endpoint that returns a specific JSON shape, typically success set to 1 plus a file object containing the URL. Editor.js does not provide that endpoint, so you build it as a Laravel route with authentication, size and MIME validation, and storage through the filesystem disk you prefer. Return the public URL in the expected shape and consider cleanup jobs for orphaned uploads.
- Is Editor.js output safe from XSS attacks?
- Editor.js sanitizes on the client, and client-side sanitization is not a security boundary. Any inline HTML or raw fields must be sanitized server-side on save and escaped again on render, with every unescaped Blade echo explicitly justified. JSON storage shifts injection risk from save time to render time, so define the allowed HTML subset and who owns that policy before launch.
- Which Laravel versions and build tools does Editor.js work with?
- Because Editor.js is JavaScript, it works with any Laravel version that can serve a bundled asset, including Laravel 9, 10, 11, and 12 using Vite. Older applications on Laravel Mix also work, though you will maintain the bundling configuration yourself. Your real constraints are browser support and the JavaScript dependencies of the block tools you choose.
- How do I handle Editor.js plugin maintenance and schema changes over time?
- Saved block JSON has no inherent version field, so upgrading the editor or swapping a plugin can leave old documents unrenderable. Add a schema_version key to stored documents and write a tolerant renderer that degrades gracefully on unknown block types. Pin plugin versions and vendor anything business-critical, since individual block tools are often single-maintainer projects and a supply-chain risk.
- What are the alternatives to Editor.js for a Laravel app?
- Common alternatives include TipTap and ProseMirror for structured JSON, TinyMCE or CKEditor for classic HTML output, and Trix or simple Markdown editors for lighter needs. Filament and Nova also ship rich text fields if your admin panel is built there. Choose based on whether you want JSON blocks you render yourself or HTML you sanitize aggressively.
Weaver
How can I help you explore Laravel packages today?