Completely bypass handling of certain tags inside GrapesJS canvas

[yoheiyakmo]

Is there a way to completely avoid certain tags like <b> or <template> to be ignored from being treated as components for grapes.js within the canvas? I know that I can do editor.DomComponent.addTypes to declare specific render methods for tags, but what I am after is to completely bypass the processing by grapes.js, than to embed the data-gjs-type definition or any other traits. Any hints would be greatly appreciated. Thank you.

[artf]

You can create a custom component for those tags and extend model.toHTML/view.render to disable them.

[yoheiyakmo]

Dear artf,

Thank you for your suggestion!
What I am trying to implement is for a certain JSX tag from alpine.js to be shown within canvas.
It has been haunting me for the last few days..

Specifically:

<div x-data="{display:true}">
  <template x-if="display">
    <p>show if display is true</p>
  </template>
</div>

While the div lines with alpine.js specific props work well within canvas render, what currently does NOT preview within canvas are the portions where JSX tags of <template> are involved. Below are some errors, which I believe is suggesting that the <template portions are not being able to find the properties for its parent x-data={...}. Also, I wasn't sure if whether the data-gjs-type related tags being added to the template tag can cause any issues for this.

In alpine.js, template are special tags which acts on its child elements but also looks in its parent elements via its x-if, x-for, etc.

I've been searching around seemingly related comments related to React or Vue and comments as to how to use model.toHTML and view.render, but I cannot seem to understand how to code this when itself does not render anything as is, but just act as a structure to process alpine-related loops or conditionals on its child element.

So I guess my question is close to, Is it possible for a single component within grapes.js canvas to encapsulate and render alpine.js included div code, previewing content as close as possible to the final HTML output?

I hope I am making sense to you..
Finally, thank you so much for your help on this..!

[artf]

Here you can find an example of React component rendered in GrapesJS one https://codesandbox.io/p/sandbox/grapesjs-react-components-n6sff?file=%2Fsrc%2Findex.js

[yoheiyakmo]

artf, thank you so much! I have succeeded in implementing Alpine.js within grapes.js following the referred codesandbox.