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

Поделиться
HTML-код
  • Опубликовано: 28 дек 2024

Комментарии • 20

  • @ibrahimaboelsoud7881
    @ibrahimaboelsoud7881 17 дней назад +2

    COOL intro 🌟

  • @sebikostudio
    @sebikostudio  4 месяца назад +4

    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 3 месяца назад

      congratulations on completing your 100 likes 🎊

  • @TigreXspalterLP
    @TigreXspalterLP 4 месяца назад +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 4 месяца назад +5

    Wow lots of possibilities

  • @adir191
    @adir191 Месяц назад +1

    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
      @sebikostudio  Месяц назад

      Here you can see another video explaining how to add more complex and customisable blocks to GrapesJS: ruclips.net/video/RtmT763yWKI/видео.html Let me know if you have any questions.

  • @marcin_roadrunner5510
    @marcin_roadrunner5510 4 месяца назад

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

  • @thebackbencher3008
    @thebackbencher3008 10 дней назад

    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.

  • @tikkyfoxyt6831
    @tikkyfoxyt6831 4 месяца назад

    Great ❤

  • @jamilahmad9526
    @jamilahmad9526 4 месяца назад +1

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

    • @sebikostudio
      @sebikostudio  4 месяца назад

      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.

  • @sebikostudio
    @sebikostudio  4 месяца назад +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!

  • @shibinraghtp1629
    @shibinraghtp1629 4 месяца назад

    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  4 месяца назад +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  4 месяца назад +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.

  • @eshwargetenv1
    @eshwargetenv1 3 месяца назад

    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  3 месяца назад

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

  • @sebikostudio
    @sebikostudio  3 месяца назад

    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.

  • @ICOReviewtoken
    @ICOReviewtoken 18 дней назад

    Please add repo github bro