WYSIWYG: A Drag-and-Drop Website Builder

Abstract

This project presents the design and implementation of a web-based WYSIWYG (What You See Is What You Get) website builder that allows users to visually create, edit, and export responsive web pages without writing code. The system integrates a React-based frontend using GrapesJS for drag-and-drop functionality, styled with TailwindCSS, and a backend developed with Node.js and Express. MongoDB is used for persistent storage of projects, pages, and user-generated content. Key features include a modular block system for constructing layouts, asset management with image upload capability, real-time page preview, and the ability to export fully styled HTML and CSS code. The backend also compiles TailwindCSS dynamically based on the content created by the user. The system is designed with scalability in mind and provides a foundation for future enhancements such as authentication, user collaboration, and advanced export options. The project demonstrates the integration of frontend and backend technologies to support a complete page-building workflow and offers a practical solution for streamlining the process of website prototyping and development.