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

แชร์
ฝัง
  • เผยแพร่เมื่อ 22 พ.ย. 2024

ความคิดเห็น • 16

  • @TigreXspalterLP
    @TigreXspalterLP 3 หลายเดือนก่อน +3

    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
    @OccamsRacecar 3 หลายเดือนก่อน +5

    Wow lots of possibilities

  • @SahebBali
    @SahebBali หลายเดือนก่อน +1

    Absolutely loved this video! The content was super helpful, and the presentation was clear and engaging. Keep up the great work! Looking forward to more videos like this. 👍👏

  • @sebikostudio
    @sebikostudio  3 หลายเดือนก่อน +3

    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
      @devanshdubey6366 2 หลายเดือนก่อน

      congratulations on completing your 100 likes 🎊

  • @sebikostudio
    @sebikostudio  3 หลายเดือนก่อน +2

    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!

  • @marcin_roadrunner5510
    @marcin_roadrunner5510 3 หลายเดือนก่อน

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

  • @jamilahmad9526
    @jamilahmad9526 3 หลายเดือนก่อน +1

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

    • @sebikostudio
      @sebikostudio  3 หลายเดือนก่อน

      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.

  • @shibinraghtp1629
    @shibinraghtp1629 3 หลายเดือนก่อน

    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
      @sebikostudio  3 หลายเดือนก่อน +1

      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
      @sebikostudio  3 หลายเดือนก่อน +1

      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.

  • @tikkyfoxyt6831
    @tikkyfoxyt6831 3 หลายเดือนก่อน

    Great ❤

  • @eshwargetenv1
    @eshwargetenv1 2 หลายเดือนก่อน

    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
      @sebikostudio  2 หลายเดือนก่อน

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

  • @sebikostudio
    @sebikostudio  2 หลายเดือนก่อน

    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.