Create a Drag and Drop Editor in React using GrapesJS | Save & Restore Content

[@ibrahimaboelsoud7881]

COOL intro 🌟

[@sebikostudio]

Now you can support me by donating 1$ at Ko-fi page: ko-fi.com/sebikostudio Thank you!

[@sebikostudio]

Hey everyone! Thank you for your comments and private messages! When the video hits 100likes I will share the public GitHub repo with GrapesJS React code - hopefully will help you kickstart your project faster!

[@devanshdubey6366]

congratulations on completing your 100 likes 🎊

[@TigreXspalterLP]

Thanks for this video! I currently use Scrivito at work, and I just found out that they use GrapesJS. I was always wondering how they worked react support into it, but your video explained it pretty well! :D

[@OccamsRacecar]

Wow lots of possibilities

[@sebikostudio]

Here you can find a GrapesJS + React Demo page with Grapes JS Blocks export to React Mark Up code for static page generation, Custom Blocks Toolbars and Blocks Traits: gjs.blocksin.com/ Enjoy!

[@thebackbencher3008]

Well done!🎉 I am also trying to integrate GrapesJS for my form builder. Currently I have created a custom form builder from scratch. But looking at this great library, I am really excited to work with this. I need your help before I get into this. Please let me know how can we connect.

[@sebikostudio]

100 likes goal achieved. Sharing the GrapesJs React Integration code here: github.com/sebastiangrochocki/grapesjs-react-demo Make sure to check the readme. 1000 likes goal: I will deploy fully function Class / Style Editor as an independent App.

[@adir191]

Hey, thanks for the video! Where can I watch the full video with all the functionalities, like in your GitHub demo? For example, markdown, adding custom components, etc.?

[@sebikostudio]

Here you can see another video explaining how to add more complex and customisable blocks to GrapesJS: kzbin.info/www/bejne/iKXQhWpsaN6Kgas Let me know if you have any questions.

[@marcin_roadrunner5510]

great video. very helpful. greetings from Mr. Bocian ;)

[@jamilahmad9526]

Great work! Can you please tell me how to make website builder like wix

[@sebikostudio]

You can expand the editor by adding custom fields, or re-using the default style settings. You could also try playing with GrapesJS Studio - studio.grapesjs.com/ its basically a wix.

[@tikkyfoxyt6831]

Great ❤

[@eshwargetenv1]

great video. I am not able to hide the complete panel UI though. I passed panels: { defaults: []} but its only hiding the buttons. But the topnav and the right sidebar is still visible. How can I remove that as well? Couldnt find anything online. Please suggest.

[@sebikostudio]

Hey. Have you specified id: "panel-devices", and el: ".panel__devices"? This will remove the default HTML element: .gjs-pn-panels

[@shibinraghtp1629]

Thank you, it seems very good. I am experimenting with this editor. Now I can drag and drop reactjs-block-components into it, and these components can interact with each other by clicking. So far, it's working fine. Could you please reply? Can I export or build a ReactJS site instead of just HTML, CSS, and JS static site from the editor?? or any possibility of building or exporting a ReactJS site?

[@sebikostudio]

Yes you can build a react js site. At the end of the video I showcase how to save grapes js content to json format and render in client side page with react components.

[@sebikostudio]

If you want to directly render react page from grapes js editor, you would have to create a js template that reads the json content directly from the editor, basically skipping the step where you save and store content.

[@ICOReviewtoken]

Please add repo github bro