Issue #1970✓ SolvedOpened April 21, 2019by rodenp33 reactions

Integrating React components

Quick answerby rodenp12

Fantastic work @beepsoft Integrating React properly into the core would be a great step and could make way for the support of other frameworks. This will raise the bar for grapesjs to another level.

Read full answer below ↓

Question

Firstly what a great tool you have here. I'm sorry if i ask questions that have been asked before. I have tried to read through the documentation and googled posts but am still a bit stuck. I am like a few people trying to integrate React components into grapesjs. https://github.com/artf/grapesjs/issues/170 mentions custom render logic. How would i implement custom render logic? and i found this -> https://www.npmjs.com/package/grapesjs-react which does not contain any actual draggable components that i could see. Are there any examples that actually have a sample react component that can be...

Answers (3)

👍 Most helpfulrodenpNovember 11, 2019

Fantastic work @beepsoft Integrating React properly into the core would be a great step and could make way for the support of other frameworks. This will raise the bar for grapesjs to another level.

artfOctober 19, 2019

Really cool @beepsoft especially all the explanation of the processCould you please add a public API to be able to provide a custom HTML parser the same way as it is possible to provide a custom CSS parser? I'll see if I'll be able to add something quickly without too much refactoring but from what...

beepsoftOctober 18, 2019

Hi, I created a poof of concept implementation/example of the integration of a React component as a GrapesJS block/component here: https://github.com/beepsoft/grapesjs-react-component-example Although "integrating with React" could mean many things here's the use case I tried to solve:Have a Grapes...

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Related tutorials

In-depth guides on the same topic.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.