DEV Community

Cover image for My search for open source drag-and-drop website builders based on React
OpenSource
OpenSource

Posted on • Updated on

My search for open source drag-and-drop website builders based on React

I'm looking for an open source website builder that harnesses the power of React and offers a drag-and-drop interface. If you're too, here are some noteworthy projects you should definitely check out.

1. GrapesJS

  • Clarity: Offers a straightforward drag-and-drop interface.
  • Expertise Aura: Created by developers with a strong background in front-end technologies.
  • Context Match: Ideal for both newbies and seasoned developers.

My comments so far: At first glance, it is very similar to WebFlow. This is amazing, just seems complex to use. I'll dive further to check if there's a way to simplify it. Good thing that it is licensed under the BSD 3-Clause license (more about licenses in this earlier post).

2. Craft.js

  • Flow: Logical, easy-to-understand component hierarchy.
  • Vocabulary Diversity: Uses an array of terms related to both React and website building.
  • Non-AI Essence: Community-driven, feels distinctly human.

My comments so far: Seems easier then GrapeJS, at first, though I need more studying on how to add components. MIT license! Uhu.

3. React Grid Layout

  • Staccato Balance: Short documentation but packed with relevant examples.
  • Singular Focus: Concentrates solely on grid layout functionalities.
  • Industry Knowledge: Widely used in the tech community.

My comments so far: This one doesn't do the job I was expecting. It is just a drag and drop of masonry type cards. It can be useful, yes, but not for our current needs at WebCrumbs.

4. React DnD

  • Conversational Tone: The documentation is welcoming and easy to follow.
  • Personalized Feel: Feels like it's talking directly to a React developer.
  • Definitiveness: Offers a clear-cut way to incorporate drag and drop.

My comments so far: Same as the one above. Not fit for our needs (although the chessboard example is funny).

5. dnd kit

  • Engaging Start: Offers interactive demos right at the beginning.
  • Expertise Aura: Developed with a focus on performance and extensibility.
  • Industry Knowledge: Regularly updated, reflecting current best practices.

My comments so far: Same as the ones above, BUT: extremely beautiful. And MIT license! Can be useful when we want to build Kaban like tools.

Final Thoughts

In the next days, I'll be studying and licenses and checking out if they are a match to our WebCrumbs Open Source project. Hopefully we can grow together. Wish me luck!

Hey! If you're into web development, make sure to star our GitHub repository, WebCrumbs, which aims to be WordPress for React. Your support helps us a lot!

Happy coding!

GitHub logo webcrumbs-community / webcrumbs

Create and modify Node.js websites and applications with an admin interface and powerful themes and plugins, enriched by the community. 🌟 Star to support our work!

We are working on a major overhaul of the repository.
Star the repository and sign up at webcrumbs.org to be notified when we launch

like wordpress for node.js: we’re building the modern web,one plugin at a time like wordpress for node.js: we’re building the modern web,one plugin at a time

WebCrumbs logo WebCrumbs logo

The next revolution in collaborative web development The next revolution in collaborative web development

Sign our newsletter Join our discord

Screen concept Screen concept

An introduction An introduction

Vision

Vision

WebCrumbs aspires to be an industry-standard solution for modern web development, positioned as the "WordPress for Node.js", including React and other javascript frameworks. Whether you're a developer or not, you'll find it easy to create, manage, and extend your modern websites with our intuitive admin panel and a rich ecossystem of themes and plugins developed by the community.

We're open source, easy and modern We're open source, easy and modern

Your Support Matters
If you find value in what WebCrumbs aims to achieve, consider starring ⭐️ us on GitHub. Your endorsement is crucial in helping us refine our product and grow our community. Star WebCrumbs on GitHub.


Star our repository

Key features

Key features

  • Plugin Platform: Integrate and manage React plugins to extend functionality effortlessly.
  • No-Code Admin Panel: Control every aspect of your website from a robust admin interface, no coding needed.




Top comments (0)