grapesjs Image manager

Usage no npm install needed!

<script type="module">
  import 107vGrapesjsImageManager from 'https://cdn.skypack.dev/@107v/grapesjs-image-manager';


GrapesJS image manager

NPM Version NPM Downloads


  • url Server url, default: null,
  • credentials Always send user credentials (cookies, basic http auth, etc..), default: 'include',
  • beforeSend Processing url before sending, default: null,
  • beforeSetSrc Processing src before displaying image, default: (src) => src,
  • afterChoosingRunOpenAssets Open asset manager, default: false,
  • headers To add headers, default: {},
  • params Query parameters, default: {},
  • queryKey Query parameter key, default: 'path',
  • modalTitle Label modal title, default: 'File Explorer',
  • btnText Label button text, default: 'Explorer images',
  • textEmptyFolder Label text empty folder, default: 'Empty folder',
  • imgLoader image src loader, default: 'data:image/svg+xml,...',
  • imgFolder image src folder, default: 'data:image/svg+xml,...',
  • imgHome image src breadcrum home, default: 'data:image/svg+xml,...',
  • imgReply image src breadcrum reply, default: 'data:image/svg+xml,...',
  • imgChevronRight image src breadcrum previous, default: 'data:image/svg+xml,...',


  • npm i @107v/grapesjs-image-manager


<link href="path/to/grapes.min.css" rel="stylesheet"/>
<script src="path/to/grapes.min.js"></script>
<script src="path/to/grapesjs-image-manager.min.js"></script>

<div id="gjs"></div>

<script type="text/javascript">
  var editor = grapesjs.init({
      container : '#gjs',
      plugins: ['grapesjs-image-manager'],
      pluginsOpts: {
        'grapesjs-image-manager': {/* ...options */}


Clone the repository

$ git clone https://github.com/4746/grapesjs-image-manager.git
$ cd grapesjs-image-manager

Install it

$ npm i

The plugin relies on GrapesJS via peerDependencies so you have to install it manually (without adding it to package.json)

$ npm i grapesjs --no-save

Start the dev server

$ npm serve

MIT License