Beyond Code: Proof-of-Concept Website Builder

Quick Links: [Project Page] [Abstract] [Paper] [Dr NTU] [Experiment]

This project extends on GrapesJS, an open-source website builder, and additionally implements features that helps tackle the lack of extendsibility and documentation issues in website builders.

Features

• Frontend UI Generation: Upload an image or sketch, and the AI generates a complete website.
• Plugins-of-plugins System: Allow extensions on the existing plugins.
• Automated Documentation Generation: A feature brought by FastAPI.
• HTML Import / Export: A feature brought by GrapesJS.

Project Structure

.
├── fe/                  # Frontend code
│   ├── index.html       # Landing page for uploading images
│   ├── edit.html        # Editor page for customizing generated websites
│   ├── js/              # JavaScript files
│   ├── styles.css       # Main stylesheet
│   └── stylesheets/     # Additional stylesheets
├── service/             # Backend code
│   ├── main.py          # Main backend server
│   ├── src/             # Source code for backend services
│   ├── static/          # Static files served by the backend
│   └── requirements.txt # Python dependencies
├── docs/                # Documentation and diagrams
│   ├── diagrams/        # UML and other diagrams
│   └── license/         # License files
└── README.md            # Project documentation

Getting Started

Prerequisites

• Frontend: A modern web browser.
• Backend: Python 3.10+ and Node.js.

Installation

1. Clone the repository:

   git clone https://github.com/BoonHianLim/beyond-code-website-builder.git
   cd beyond-code-website-builder

2. Install backend dependencies:

   cd ./service
   python -m venv venv # create a virtual environment for Python
   source venv/bin/activate
   pip install -r requirements.txt

3. Install frontend dependencies:

   cd ./fe
   yarn

Running the Project

1. Start the backend server:

   cd ./service
   ./dev.sh

2. Start the frontend:

   cd ./fe
   yarn start

3. Open your browser and navigate to http://localhost:3000.

Usage

1. Full frontend UI Generation

full-generation.mp4

2. Partial frontend UI Generation

partial-generation.mp4

3. Plugins-of-plugins System: Import new extension

plugins-of-plugins.mp4

4. HTML Import / Export (Native feature of GrapesJS)

html-import.mp4

html-export.mp4

Technologies Used

• Frontend: HTML, CSS, JavaScript, GrapesJS
• Backend: Python, FastAPI
• AI Models: Gemini

License

The GrapesJS files (grapesjs.min.js, grapesjs.min.js.app, the stylesheets and image under fe directory) are licensed under GRAPESJS-LICENSE.

The icons used in the GrapesJS editor are licensed under MIT License. See docs/license for more information.

The rest of this project is licensed under the MIT License. See the LICENSE file for details.

Contributing

Contributions are welcome! Please open an issue or submit a pull request for any improvements or bug fixes.

Acknowledgments

GrapesJS for the website editor.

FastAPI for the backend server.

If you find this project useful, please consider citing us!

@misc{
	10356_184126,
	author = {Boon Hian Lim},
	title = {Beyond code: a comprehensive study on website builders, their limitations, and opportunities for innovation},
	year = {2025},
}