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!
webcrumbs-community
/
webcrumbs
Build, re(use) and share your own JavaScript plugins that effortlessly match your website's style. š Star to support our work!
We're super excited to announce that we're working on a major overhaul of the repository.
Right now, we're not accepting contributions, but this will change soon! š
Star the repository and sign up at webcrumbs.org to be the first to know when we launch
WebCrumbs aspires to be an industry-standard solution for modern web development, creating the first open ecosystem of plugins for the JavaScript community and related frameworks (like React, Nextjs, Vue, Svelte, and others). Whether you're a developer or not, you'll find it easy to create, manage, and extend your own websites with our intuitive admin panel and a rich ecosystem of plugins developed by the community.
If you love what WebCrumbs is doing, consider starring us on GitHub. Your support is key to refining our product and growing our community. Star WebCrumbs on GitHub.
- Star the repository: If you haven't yet (yes, you!), give us aā¦
Top comments (2)
You should add this one to the list: github.com/givanz/VvvebJs
Looks pretty clean
Your post really helped me a lot!
Iām currently looking for a solution to build a layout editor for my app. The dnd kit seems to fit my needs since the app doesnāt require much component customization, even though it might need a bit more coding time.