PHPackages                             desti/nova-editor-js - 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. [Utility & Helpers](/categories/utility)
4. /
5. desti/nova-editor-js

ActiveLibrary[Utility & Helpers](/categories/utility)

desti/nova-editor-js
====================

A Laravel Nova field bringing EditorJs magic to Nova.

v5.0(3y ago)0797MITPHPPHP ^8.2

Since Apr 2Pushed 3y agoCompare

[ Source](https://github.com/MaximeGratens/nova-editor-js)[ Packagist](https://packagist.org/packages/desti/nova-editor-js)[ RSS](/packages/desti-nova-editor-js/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (1)Dependencies (7)Versions (38)Used By (0)

Laravel Nova Editor JS Field
============================

[](#laravel-nova-editor-js-field)

[![Latest Version on Github](https://camo.githubusercontent.com/4222aacd933a45ad16bb88677a32f578598f693f2978a5e5bd0db6b4de48f91d/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f72656c656173652f6164766f6f722f6e6f76612d656469746f722d6a732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/advoor/nova-editor-js)[![Total Downloads](https://camo.githubusercontent.com/7bca1cb93d4edcb6a51030571fe707bcedc24596a55ad9c5358f4cbb363fb0e6/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6164766f6f722f6e6f76612d656469746f722d6a732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/advoor/nova-editor-js)

A Laravel Nova implementation of [Editor.js](https://github.com/codex-team/editor.js) by [@advoor](https://github.com/advoor).

Installation
------------

[](#installation)

Install via composer:

```
composer require advoor/nova-editor-js

```

Publish the config file

```
php artisan vendor:publish --provider="Advoor\NovaEditorJs\FieldServiceProvider"

```

Version Compatibility
---------------------

[](#version-compatibility)

Laravel Nova 4.x isn't backwards compatible with 3.x, so we had to make a version split. Please use the below table to find which versions are suitable for your installation.

Package versionNova VersionLaravel VersionPHP version`3.x`4.x8.x - 9.x8.1+`2.x`2.x - 3.x5.x - 8.x5.6 - 7.4Note that we really pushed the PHP version up. If you're staying on new versions of Laravel and Nova, we're expecting your PHP version to match that behaviour.

Upgrade
-------

[](#upgrade)

See [the upgrade guide](./UPGRADING.md).

Usage
-----

[](#usage)

To add EditorJS to your application, you'll need to modify your Nova resource. For ease-of-use we also recommend to update your models, but that's optional.

### Updating your Nova resource

[](#updating-your-nova-resource)

This package exposes a `NovaEditorJsField` that takes care of displaying the HTML contents and providing the user with the EditorJS field.

To use it, simply import the field,

```
use Advoor\NovaEditorJs\NovaEditorJsField;
```

use it in your fields array,

```
return [
    // …
    NovaEditorJsField::make('about'),
];
```

And boom, you've got yourself a fancy editor.

### Updating your models (optional)

[](#updating-your-models-optional)

For ease-of-use, we recommend you add the `NovaEditorJsCast` to the `$casts` on your models. This will map the value to a `NovaEditorJsData` model, which can be returned in Blade (rendering HTML), or sent via API calls (rendering JSON, unless you call `toHtml` on it or cast it to a string).

```
use Advoor\NovaEditorJs\NovaEditorJsCast;

class User extends Model {
    protected $casts = [
        'about' => NovaEditorJsCast::class,
    ];
}
```

Since the `NovaEditorJsData` model is an `Htmlable`, Blade will recognize it as safe HTML. This means you don't have to use Blade "unescaped statements".

```

    About {{ $user->name }}
    {{ $user->about }}

```

### Rendering HTML without model changes

[](#rendering-html-without-model-changes)

You can also use the `NovaEditorJs` facade to render HTML from stored data.

```
NovaEditorJs::generateHtmlOutput($user->about);
```

The return value of `generateHtmlOutput` is an `HtmlString`, which is treated as safe by Blade. This means you don't have to use Blade "unescaped statements".

```

    About {{ $user->name }}
    {{ NovaEditorJs::generateHtmlOutput($user->about) }}

```

Customizing
-----------

[](#customizing)

You can configure the editor settings and what tools the Editor should use, by updating the `editorSettings` and `toolSettings` property in the config file respectively.

From the config, you can define the following editor settings:

- `placeholder` ([docs](https://editorjs.io/configuration#placeholder)) - The placeholder to show in an empty editor
- `defaultBlock` ([docs](https://editorjs.io/configuration#change-the-default-block)) - The block that's used by default
- `autofocus` ([docs](https://editorjs.io/configuration#autofocus)) - If the editor should auto-focus, only use if you never have multiple editors on a page and after considering the [accessibility implications](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus#accessibility_considerations)
- `rtl` ([docs](https://editorjs.io/i18n#rtl-support)) - Set to true to enable right-to-left mode, for languages like Arabic and Hebrew

Furthermore, you can customize the tools the editor should use. The following tools are enabled by default:

- [Header](https://github.com/editor-js/header)
- [Image](https://github.com/editor-js/image)
- [Link](https://github.com/editor-js/link)
- [List](https://github.com/editor-js/list)
- [Code block](https://github.com/editor-js/code)
- [Inline code](https://github.com/editor-js/inline-code)
- [Checklist](https://github.com/editor-js/checklist)
- [Marker](https://github.com/editor-js/marker)
- [Embeds](https://github.com/editor-js/embed)†
- [Delimiter](https://github.com/editor-js/delimiter)
- [Table](https://github.com/editor-js/table)
- [Raw](https://github.com/editor-js/raw)

You can customize the views for each component, by changing the view in `resources/views/vendor/nova-editor-js/`.

† The *Embeds* tool is triggered by pasting URLs to embeddable content. It does not have an entry in the "Add" menu.

### Registering custom components

[](#registering-custom-components)

Please refer to the [extending Nova EditorJS](./EXTENDING.md) guide on instructions on how to register custom components.

###  Health Score

37

—

LowBetter than 83% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity13

Limited adoption so far

Community16

Small or concentrated contributor base

Maturity84

Battle-tested with a long release history

 Bus Factor1

Top contributor holds 50% 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 ~45 days

Recently: every ~9 days

Total

32

Last Release

1180d ago

Major Versions

v0.6.6 → v1.0.02020-07-03

v1.0.1 → v2.0.02020-08-03

v2.0.3 → v3.0.02022-06-29

v3.1.0 → v4.02023-01-11

v4.3 → v5.02023-02-15

PHP version history (4 changes)0.0.1PHP >=7.1.0

v3.0.0PHP ^8.0

v3.0.1PHP ^8.1

v5.0PHP ^8.2

### Community

Maintainers

![](https://www.gravatar.com/avatar/2adaa867f66d925ec48e250b7ef410f3c4ade8bf7ba711f0da30e1f6cdfc1b76?d=identicon)[MaximeGratens](/maintainers/MaximeGratens)

---

Top Contributors

[![advoor](https://avatars.githubusercontent.com/u/4472195?v=4)](https://github.com/advoor "advoor (77 commits)")[![roelofr](https://avatars.githubusercontent.com/u/1771026?v=4)](https://github.com/roelofr "roelofr (37 commits)")[![stickeerehan](https://avatars.githubusercontent.com/u/41327712?v=4)](https://github.com/stickeerehan "stickeerehan (22 commits)")[![techouse](https://avatars.githubusercontent.com/u/1174328?v=4)](https://github.com/techouse "techouse (3 commits)")[![TheDeadCode](https://avatars.githubusercontent.com/u/1714641?v=4)](https://github.com/TheDeadCode "TheDeadCode (3 commits)")[![lorado](https://avatars.githubusercontent.com/u/4480983?v=4)](https://github.com/lorado "lorado (2 commits)")[![Reflow1319](https://avatars.githubusercontent.com/u/6665500?v=4)](https://github.com/Reflow1319 "Reflow1319 (2 commits)")[![waelelsawy](https://avatars.githubusercontent.com/u/10009971?v=4)](https://github.com/waelelsawy "waelelsawy (1 commits)")[![Woeler](https://avatars.githubusercontent.com/u/18422096?v=4)](https://github.com/Woeler "Woeler (1 commits)")[![bangnokia](https://avatars.githubusercontent.com/u/5652494?v=4)](https://github.com/bangnokia "bangnokia (1 commits)")[![xamthor](https://avatars.githubusercontent.com/u/69559791?v=4)](https://github.com/xamthor "xamthor (1 commits)")[![Harrk](https://avatars.githubusercontent.com/u/2372590?v=4)](https://github.com/Harrk "Harrk (1 commits)")[![pravk](https://avatars.githubusercontent.com/u/926011?v=4)](https://github.com/pravk "pravk (1 commits)")[![anstapol](https://avatars.githubusercontent.com/u/33395021?v=4)](https://github.com/anstapol "anstapol (1 commits)")[![RogierW](https://avatars.githubusercontent.com/u/9381528?v=4)](https://github.com/RogierW "RogierW (1 commits)")

---

Tags

laraveleditorwysiwygnovaeditorjs

###  Code Quality

Code StylePHP CS Fixer

### Embed Badge

![Health badge](/badges/desti-nova-editor-js/health.svg)

```
[![Health](https://phpackages.com/badges/desti-nova-editor-js/health.svg)](https://phpackages.com/packages/desti-nova-editor-js)
```

###  Alternatives

[advoor/nova-editor-js

A Laravel Nova field bringing EditorJs magic to Nova.

92179.0k3](/packages/advoor-nova-editor-js)[unisharp/laravel-ckeditor

JavaScript WYSIWYG web text editor (for laravel).

377762.3k5](/packages/unisharp-laravel-ckeditor)[datomatic/nova-enum-field

A Laravel Nova PHP 8.1 enum field with filters

20134.2k](/packages/datomatic-nova-enum-field)[murdercode/nova4-tinymce-editor

Boost your Laravel Nova with the TinyMCE editor.

17165.2k](/packages/murdercode-nova4-tinymce-editor)[marshmallow/nova-tiptap

A Laravel Nova tiptap editor field.

19120.0k2](/packages/marshmallow-nova-tiptap)[outl1ne/nova-media-hub

A Laravel Nova tool for managing media.

4652.0k](/packages/outl1ne-nova-media-hub)

PHPackages © 2026

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