Nocturnal Parakeet Monitor


    1.0.4 • Public • Published

    Editor.js summary Tool

    npm Version of EditorJS that the plugin is compatible with

    Provides Summary blocks for the Editor.js.


    • 8 different summary block styes
    • Convert from other blocks into an Summary block
    • Convert an Summary block into other blocks

    How does it look like?

    Watch this tool in action in the following short GIF movie.

    Summary sneak peek GIF!

    Try it out yourself on the demo page.


    Install via NPM

    Get the package

    npm i --save editorjs-summary

    Include module at your application

    const Summary = require('editorjs-summary');
    // OR
    import Summary from 'editorjs-summary';

    Download to your project's source dir

    Copy dist/bundle.js file to your page.

    Load from CDN

    You can load specific version of package from jsDelivr CDN.

    <script src=""></script>


    Add a new Tool summary to the tools property of the Editor.js initial config.

    var editor = EditorJS({
      // ...
      tools: {
        // ...
        summary: Summary,
      // ...

    Or initialize Summary tool with additional optional settings

    var editor = EditorJS({
      tools: {
        summary: {
          class: Summary,
          inlineToolbar: true,
          shortcut: 'CMD+SHIFT+A',
          config: {
            defaultType: 'primary',
            messagePlaceholder: 'Enter something',

    Config Params

    All properties are optional.

    Field Type Default Value Description
    defaultType string info default Summary type (should be either of primary, secondary, info, success, warning, danger, light or dark)
    messagePlaceholder string Type here... placeholder to show in Summary`s message input

    Output data

    Field Type Description
    message string Summary message
    type string Summary type among one of primary, secondary, info, success, warning, danger, light or dark
      "type": "summary",
      "data": {
        "type": "danger",
        "text": "<strong>Holy smokes!</strong><br>Something seriously <em>bad</em> happened."

    Local Development

    • Run yarn install.
    • Run yarn dev to continuously watch for the changes made in ./src/index.js and updates a development bundle under ./dist folder.
    • Open ./examples/development.html in the browser to verify the tool's functionality.


    This project is licensed under the MIT License.


    npm i mofeiyu-editorjs-summary

    DownloadsWeekly Downloads






    Unpacked Size

    58.2 kB

    Total Files


    Last publish


    • nimysan