Create a Drag and Drop Editor in React using GrapesJS | Save & Restore Content
HTML-код
- Опубликовано: 9 сен 2024
- Learn how to integrate the GrapesJS drag-and-drop editor into your React application. This basic guide covers saving and restoring content and rendering GrapesJS blocks with React components, making it an ideal choice for a headless CMS solution. Perfect for enhancing your web design workflow!
In this video, you'll discover:
👉 Step-by-step integration of GrapesJS into a React app
👉 How to save and restore editor content
👉 Dynamically creating and managing component blocks
👉 Using custom endpoints for saving notes
Demo App: gjs.blocksin.com/
Don’t forget to like, comment, and subscribe for more design and development tips!
#grapesjs #draganddrop #webeditor #webdevelopment #webdesign #webdesigner #reactapp #website #figma #design #designsystems #headlesscms
------------------------------
🎵 Track Info:
Title: Purple LoFi Chill Beats - Reverse [lofi hip hop/chill beats] (No Copyright)(Royalty Free)
Purple LoFi Chill Beats is a French author and composer of royalty-free Lo-Fi music.
/ lofiwavemusic
---
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
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.
Wow lots of possibilities
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!
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!
congratulations on completing your 100 likes 🎊
great video. very helpful. greetings from Mr. Bocian ;)
Great work! Can you please tell me how to make website builder like wix
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.
Great ❤
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?
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.
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.