Grapesjs: How to render React components in grapesjs

[tyua07]

I saw the grapesjs-mjml project, but did not solve my problem.

[artf]

Honestly, checking the grapesjs-mjml plugin is the best advice I can give you at the moment (especially components) as basically, it's the same concept. Technically, you have to create custom Components with a custom render logic.

[tyua07]

thank you @artf

[aditya-dikonia]

@tyua07 Can you please explain here how you grapesjs component with reactjs?

[beepsoft]

Hi,

I have a small example project solving this:

https://github.com/beepsoft/grapesjs-react-component-example

Related issue: https://github.com/artf/grapesjs/issues/1970

[alatella87]

Hi @beepsoft, thanks a bunch. I have forked your project and indeed the Timer (as a React) component renders inside GrapesJS canvas. Would you be able to list the steps needed to correctly implement a new React component in its simplest form? I understand you used a Timer component for its complexity as to capture most cases, would it be also possible to list the steps for a boilerplate?