My search for open source drag-and-drop website builders based on React
Tags: webdev, javascript, react, css
Published: 2023-10-08 15:58:49

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](https://github.com/artf/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](https://dev.to/opensourcee/explain-like-im-five-licenses-for-open-source-projects-16ob)).

### 2. [Craft.js](https://github.com/prevwong/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](https://github.com/STRML/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](https://github.com/react-dnd/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](https://github.com/clauderic/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](https://github.com/webcrumbs-community/webcrumbs), which aims to be WordPress for React. Your support helps us a lot!

Happy coding!

{% embed https://github.com/webcrumbs-community/webcrumbs %}