How can I work with grapesjs components using JS methods?

Working with grapesjs components (jd-dotlogics/laravel-grapesjs 3 plugin) in
laravel 8 app I want to make all components closed by default.

For that I made custom js plugin in which I try to toggle all elements with “gjs-block-category” class:

window.grapesjs.plugins.add('gjs-custom-plugin', function(editor, opts){
    let COMMAND_ID = 'custom-comand';


  function addClass(ele,cls) {
    if (!hasClass(ele,cls)) ele.className += " "+cls;

  function removeClass(ele,cls) {
    if (hasClass(ele,cls)) {
      var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
      ele.className=ele.className.replace(reg,' ');

  setTimeout(() => {
    console.log("Delayed for 2 second document");

    var els = document.getElementsByClassName('gjs-block-category');
    console.log(els.length)    // But I see 0 value here - so no element toggled

    for (var i = 0; i < els.length; i++) {
      removeClass(els[i], 'gjs-open')

  }, 2000)

What I see in browser :
and js tab of the browser’s console :

That is code from browser’s Elements tab:

<div class="gjs-block-category gjs-open">
      <div class="gjs-title">
        <i class="gjs-caret-icon fa fa-caret-down"></i>
      <div class="gjs-blocks-c"><div class="gjs-fonts gjs-f-b1 gjs-block gjs-one-bg gjs-four-color-h" title="1 Column" draggable="true">

      <div class="gjs-block-label">1 Column</div>
    </div><div class="gjs-fonts gjs-f-b2 gjs-block gjs-one-bg gjs-four-color-h" title="2 Columns" draggable="true">

      <div class="gjs-block-label">2 Columns</div>
    </div><div class="gjs-fonts gjs-f-b3 gjs-block gjs-one-bg gjs-four-color-h" title="3 Columns" draggable="true">

      <div class="gjs-block-label">3 Columns</div>
    </div><div class="gjs-fonts gjs-f-b37 gjs-block gjs-one-bg gjs-four-color-h" title="2 Columns 3/7" draggable="true">

      <div class="gjs-block-label">2 Columns 3/7</div>
    </div><div class="gjs-fonts gjs-f-text gjs-block gjs-one-bg gjs-four-color-h" title="Text" draggable="true">

      <div class="gjs-block-label">Text</div>
    </div><div class="fa fa-link gjs-block gjs-one-bg gjs-four-color-h" title="Link" draggable="true">

      <div class="gjs-block-label">Link</div>
    </div><div class="gjs-fonts gjs-f-image gjs-block gjs-one-bg gjs-four-color-h" title="Image" draggable="true">

      <div class="gjs-block-label">Image</div>
    </div><div class="fa fa-youtube-play gjs-block gjs-one-bg gjs-four-color-h" title="Video" draggable="true">

      <div class="gjs-block-label">Video</div>
    </div><div class="fa fa-map-o gjs-block gjs-one-bg gjs-four-color-h" title="Map" draggable="true">

      <div class="gjs-block-label">Map</div>
    </div><div class="fa fa-file gjs-block gjs-one-bg gjs-four-color-h" title="iframe" draggable="true">

      <div class="gjs-block-label">iframe</div>

I suspect as grapesjs library creates elements “on fly” these elements are not in DOM and I can not work with them in JS.

Is it so? Are there some decision to get access to these elements ?


Well, you can do, but only when they exist. Are you sure that the elements exist 2 seconds after the page loads? (Your console log of the document says they don’t.) Does it need to wait longer? Is there a trigger you can use that isn’t time based?

1 Like

I tried to set delay in 10 seconds - but result was the same els var has 0 length. Any other odeas ?

You can use an


to check the DOM at different positions in javascript. So you can check when the grapes elements are added.

Could you please to detalize in which place if the code I have to write


and which info this alert message can give ?

Nothing but javascript stops execution at that point and you can then check the developer tools if the elements are added to the DOM. o maybe you can find the point/time when its added. Its a try and error but I also have no better idea

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.