Build Websites Like a Pro with React Elementor

Hey Dev.to community!

I’m excited to share my latest project: React Elementor – a drag-and-drop website builder inspired by Elementor, but built entirely with React. It's perfect for developers and non-developers alike who want to quickly create stunning web pages.

🌟 What is React Elementor?

React Elementor is a flexible, easy-to-use page builder where users can drag and drop widgets to design web pages visually. No coding required!

🔧 Core Features:

  • Drag & Drop Interface: Effortlessly build layouts with a simple user interface.
  • Custom Widgets: Basic widgets like Heading, Image, Text Editor, Video, Button, and more.
  • Real-time Preview: See changes instantly.
  • Open Source: Free to use and customize.

🔍 Widgets Available

Here are some of the basic widgets available in React Elementor:

  • Heading 📊
  • Image 📷
  • Text Editor 📝
  • Video 🎥
  • Button 🛠️
  • Divider ➖
  • Spacer ✅
  • Icon 📸
  • HTML 👨‍💻
  • Alert ⚠️
  • Rating 🌟
  • Progress Bar 🎉
  • Icon List 🗂️

🚀 Tech Stack and Libraries

I chose some of the best libraries in the ecosystem to build this project. Here are the highlights:

  • React 19 - Core framework for UI development.
  • @craftjs/core - Provides the drag-and-drop builder foundation.
  • @hello-pangea/dnd - Lightweight drag-and-drop support.
  • @mantine/core and @mantine/hooks - UI components and hooks for seamless UI creation.
  • @reduxjs/toolkit - Efficient state management.
  • @tiptap/react - Rich text editor for the Text Editor widget.
  • react-window and react-virtualized-auto-sizer - For smooth virtualized rendering of large data.
  • tailwindcss - For clean, modern, responsive design.

💰 Get Involved

This project is open-source and I’d love to see your contributions! Feel free to fork it, submit pull requests, or suggest new widgets and features.

GitHub Repository: React Elementor - GitHub

Let me know your thoughts! If you have any questions or ideas, drop them in the comments below.

Happy coding! 🚀