React Elementor

Farhad Bagheri — Tue, 25 Mar 2025 14:48:45 +0000

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! 🚀

Install nodejs on linux

Farhad Bagheri — Fri, 07 Oct 2022 22:52:11 +0000

every javascript developer need to use nodejs and npm. if you are using debian distribution, this post can make you happy for installation node js.

i see these example on google but everytime it doesnt work for me. with this way you can install every nodejs version even it doesnt exist on ubutu package manager.

Step 1:

sudo apt update

Step 2:

sudo apt install xz-utils

Step 3:

Download your nodejs

Step 4: (Extract file from .tar.xz)

sudo tar -xvf name_of_file

Step 5: (copy extracted folder files to computer root folder)

sudo cp -r directory_name/{bin,include,lib,share} /usr/

#NOTE: Dont replace anything instead of {bin,include,...}
#NOTE: dicrectory_name is your nodejs extracted folder

Forem: Farhad Bagheri