GrapesJS Development - Build React Pages with Class/Style Editor & Automate Content with CSV!

In this video, I will show you how to enhance the GrapesJS drag-and-drop editor in React with two powerful features: a real-time style editor and CSV file integration.
Learn how to customize classes, manage content, and streamline your workflow without any coding required. Perfect for building landing pages or single-page applications quickly.
Watch now to see how you can transform GrapesJS into a mini CMS, making it easier for non-technical users to handle content changes and localization.
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 #grapesjsreact #reactjstutorial #grapesjstutorial

[@OccamsRacecar]

Great tutorial, learning grapejs right now

[@diegogonzalezcruz6952]

awesome! thanks

[@AbdulrahmanZaki-h5b]

You're a live saver. I was looking for an easy tutorial for this library since the docs is easy to learn from. ❤❤❤

[@alexdin1565]

Bro, I suggest you change your channel name to Gold Mine
because you have an amazing content
please make more tutorials about GrapesJs and FabricJs, you are the first one who makes videos about those topics + RecactJs

[@parthshady5981]

Awesome content ❤ Do you have any resources to create a custom react column component or in general react components in grapesjs. Thanks in advance

[@sebikostudio]

Just following good practices and design requirements. For example, if you plan to use Column to create Web Content only, you could implement properties based on Flexbox CSS - which will help you create layouts. Personally, I would recommend adding accessibility props like "role", and "tabindex" - in case you build interfaces for web apps - this will enable keyboard support and screen reader support. Feel free to take a look at my custom Flex component: system.blocksin.com/flex might help you to foresee different use cases.

[@parthshady5981]

@@sebikostudioThanks for the reply, looking forward to more grapesjs content

[@JoeyJurjens]

Great video's about GrapesJS tou have! Question; How would you handle blocks / components that render dynamic data from the database?
For example; A product block. The product block once dragged into the canvas lets users choose the product they want to showcase, and then data from this product will be used when rendering. When actually rendering the page, the product data should always be up to date, thus a database query would be made.

[@sebikostudio]

Thank you for the comment. I did that by using axios to fetch data like "Title", and "Description" and populate in real-time blocks in the editor. First, you fetch data into the state, then render blocks. Upon reloading/opening the page that loads content into the editor you need to add a condition to check if the content of the original block has changed, if yes - force to update the block's content. Similarly to how I handle Dynamic Icons - check the video: ruclips.net/video/ovO1kHpm4jc/видео.html

[@srayazzack2641]

Hi its awesome tutorial i like to know about the binding csv with the grapes js content could show that or any repository or resource to get reference for that

[@sebikostudio]

Thank you. It's a custom solution I came up with. Unfortunately, I don't have any resources but I might make a video explaining the process.