In the past, quickly setting up a website to showcase one's work could be extremely difficult for those without technical expertise, as facing complex code could be quite frustrating.

Although there are some website building tools, they are often too complex to be user-friendly. Moving on to today's AI programming tools, you can build a website just by speaking into it.

However, once it comes to modifying the interface, you'll find that AI struggles to understand our described requirements, often making random guesses about the changes, ultimately failing to achieve the desired outcome.

Frappe Builder

Figma

Recently, I discovered an open-source low-code AI website building tool on GitHub: Frappe Builder, which allows you to design websites as easily as Figma and can be published and launched with a single click.

GitHub：

https://

github.com/frappe/build

er

GitHub: https://github.com/frappe/builder

Drag-and-drop to create web pages

The biggest highlight of Frappe Builder is providing a visual editor similar to Figma, making it easy for everyone to use.

On the left is the component list, in the middle is the workspace, and on the right is the style panel. We just need to easily drag and drop components to complete the website page setup.

For example, if we want to add a button, image, or some text to the page, we can simply drag it from the left to the middle of the page, then adjust its position and style in the right panel, and fill in the content.

Compared to back and forth with AI programming tools, this method is more intuitive and controllable, what you see is what you get, and you can change it however you want.

Not just static pages, dynamic data filling

Frappe Framework

What's even more powerful is that the content of the page you build can be dynamic, supporting connection to the Frappe Framework database to dynamically fill content based on needs.

For example, we can use it to build a personal blog, where the article list and detail pages can be automatically generated by reading from the database.

Even, the dynamic features involved in e-commerce websites, such as product data, product display, and shopping cart, can also be implemented.

We only need to add, delete, or modify relevant data on the backend content management system, and the front-end pages will be automatically updated without manually editing and maintaining each page.

One-click publishing, easy to go live.

After setting up the website, simply click the "Publish" button in the upper right corner to launch the site with one click.

There's no need to deal with tedious tasks like server configuration or domain binding, which is truly very user-friendly for beginners, allowing us to focus more on building the website's functionality.

In addition to these features, Frappe Builder has many other highlights worth mentioning, such as those listed below:

Responsive preview: The pages built are designed to adapt to different device sizes by default, allowing direct preview of display effects on phones, tablets, and computers.

Rich component management: Common components are all available, and we can also build universal templates, such as making navigation bars, footers, etc., into templates that can be directly used on other pages.

Custom scripts: If we feel the default functions of the tool are not enough, those who have some programming knowledge can extend it using JavaScript or CSS.

Performance Optimization: The generated page code is quite clean and lightweight, and it has achieved high scores in Google Lighthouse tests, which is beneficial for subsequent code maintenance.

Quick installation, easy to get started

Docker

Let's talk about the installation of Frappe Builder. The official site provides a Docker quick deployment method. Just run the following commands:

# 步骤 1：设置文件夹并下载所需文件 mkdir frappe-builder && cd frappe-builder wget -O docker-compose.yml https://raw.githubusercontent.com/frappe/builder/develop/docker/docker-compose.yml wget -O init.sh https://raw.githubusercontent.com/frappe/builder/develop/docker/init.sh 步骤 2：启动容器 docker compose up

http://

builder.localhost:8000

After completion, simply visit http://builder.localhost:8000 in your browser to use it.

However, note that it relies on the Frappe Framework at its core, so you need to set up the framework environment first. The official website provides detailed tutorials.

Overall, for those who want to quickly build a website but don't know how to code, Frappe Builder can be an option for you.

Similar to Figma, it's a visual editor where you can build pages with simple drag-and-drop actions. Plus, the content can be dynamic, making it easy to create a blog or a small online store.

Today's sharing is over, thank you for taking the time to read. See you next time, Respect!