DEV Community

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

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 React websites and applications with a no-code interface and powerful plugins, enriched by the community. 🌟 Star to support our work!

Catch the Latest Innovations: Get Your Monthly Dose of WebCrumbs Insights

WebCrumbs open graph

WebCrumbs logo

The next evolution in React-based web development

License GitHub Discussions Open Issues GitHub contributors Open for contribution

Wiki Architecture Manifesto Motivation Thoughts Uniqueness FAQ Comparison


WebCrumbs at X   WebCrumbs at Discord

WebCrumbs concept

WebCrumbs open graph

Quick actions:


WebCrumbs aspires to be an industry-standard solution for React applications, positioned as the "WordPress for React." Whether you're a developer or not, you'll find it effortless to create, manage, and scale your React-based websites using our intuitive admin panel.

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.

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.
  • Fully Customizable

Top comments (0)