DEV Community

Tane Piper
Tane Piper

Posted on

ngx-editorjs - An Angular module for EditorJS

Today I have published my first full Angular module - @tinynodes/ngx-editorjs on NPM.

The module is a set of features for Angular (7+) to create and control EditorJS instances.

A demo application is available to see the editor in action, and the source is also available in the @tinynodes monorepo.

Included Features

The library exports several features once the NgxEditorJSModule has been included in your project.


This is the main directive which can be used on any element with the [ngxEditorJS] selector and and id attribute.

<div id="my-editor" ngxEditorJS></div>
Enter fullscreen mode Exit fullscreen mode

This will handle creating the editor instance via the NgxEditorJSService


This component can be used in any Angular component using the <ngx-editorjs> tag. Again this component can take a set of blocks, it also provides a holder input for overriding the ID.

<ngx-editorjs [holder]="holderProperty"></ngx-editorjs>
Enter fullscreen mode Exit fullscreen mode


This service provides handling the life-cycle of the EditorJS instances, and exposes the underlying EditorJS API - in future releases more of the API will be exposed via service methods to make controlling the container easier.

The module is configurable and allows EditorJS plugins to be injected into the library - (see on how to do this in a AOT-friendly way.

Next Steps

Before release I had to resolve an issue with AOT compiling and injecting EditorJS plugins - this means version 1.1.0 has already been released - now this is resolved I want support additional feature in the editor, as well as provide unit test coverage and better documentation and demo.

If you find any issues or have feature requests these can be left on the GitHub Issues page.

Top comments (1)

hall500 profile image

Hi, is it possible to make the editorjs toolbar fixed static and visible on the left pane of a window.