web-builder is an open-source, AI-assisted low-code platform for visually building and publishing responsive web pages and mini-program screens, intended for front-end and full-stack teams that run a headless Drupal backend and want drag-and-drop layout work instead of hand-written Tailwind markup.
What it is
web-builder is an AGPL-3.0 licensed TypeScript project whose front end is built on Angular and TailwindCSS, with Drupal used as the headless content backend. The README describes it as the first open-source low-code platform built on Drupal as a headless system for the Chinese market. It provides drag-and-drop visual creation of modern responsive UIs, dynamic custom components, multi-theme and multi-language sites, and it also drives AI generation of UI and tool applications. The repository lists 584 stars, 98 forks and 3 open issues, with the latest push on 12 September 2026. The matching version table pairs web builder v12 with Angular v20, Node v22+ and TypeScript v5.8+, and the published homepage is builder.design.
The concrete problem it solves is the manual labour of composing Drupal page blocks and Tailwind components by hand. The builder produces page JSON that is published into the Drupal backend, where page bodies are stored in the block_content__body table and can be extracted with a drush sql:connect query, as the README's production-content example shows. That means page assembly, component data editing, media handling and multi-language copy stop being code edits and become visual operations, and the same builder maintains the pages and components of a companion mini program.
Key capabilities
- Layout builder produces dynamic layouts from TailwindCSS-based dynamic components, with either static data or API data sources, and supports nested layouts.
- Component editing covers deletion, copying a component's JSON, editing component data, and dragging components to reorder them.
- AI generation through Builder Pro creates UI, pages and tool applications from large models; the recorded demos show DeepSeek generating a custom component and an entire page from one prompt.
- Web Builder Skills is a Claude Code skill pack with three skills: ui-builder for creating and optimizing UI components in Storybook along with stories and AI prompt documents, translate-json for translating visible copy in page or component JSON and adding language prefixes to internal links, and web-image-prompt for generating Chinese image prompts aimed at gpt-image-2.
- A media library supports batch upload, browsing and updating from the front end, and a page history version is created whenever a commit, clear or load-sample operation overwrites content, with draft detection prompting whether to pull the newest content.
- A template and sample library generates pages quickly, including rule-based generation from the component library, and a whole page's JSON can be copied for deployment and publication to the backend.
- Animation and preview support includes general AOS page-scroll animation and fine-grained GSAP animation, multi-theme switching previews, a dark style, page preview in a new window, and responsive preview at different device sizes.
Who uses it and how
- Angular front-end teams on the v12 stack of Angular v20, Node v22+ and TypeScript v5.8+ build responsive, multi-theme sites without hand-authoring every Tailwind block.
- Drupal headless operators let the builder manage pages and components while content stays in Drupal, and they export production content with drush sql:connect queries against block_content__body.
- Publishers maintaining multi-language and multi-theme variants preview how components render under each theme before release.
- Mini-program teams run 信使小程序, a Taro and NutUI mini program on Vue3, and configure its pages and components by drag and drop in web builder.
- AI-first workflows use the Claude Code skill pack for component, translation and image-prompt work, and Builder Pro for prompt-driven page generation.
Getting started
The README lists a Docker 部署 route for deployment, and the project homepage at builder.design serves as the entry point for the hosted Builder CMS and Web Builder Skills material.
How it compares
No list of paid products this project replaces is provided in the facts, and no comparable low-code builder is named either. What the facts do show is placement: web builder sits on Angular and TailwindCSS, uses Drupal as a headless backend rather than replacing it, and reaches into Storybook through the ui-builder skill. On that evidence it stands alone in this registry.
When to use it — and when not to
A self-hoster must operate a Node v22+ and Angular v20 build for v12 together with a Drupal headless backend, its database for drush access, a media store and a publication target, so teams unwilling to run Drupal should not pick it. The AGPL-3.0 licence also matters if the work is redistributed inside a closed product. The honest weaknesses in the facts are that the README and demo material are largely in Chinese with help spread across external documentation and Bilibili videos, and that the most visible AI generation path points at the hosted Builder Pro rather than the open repository alone.
