
web-builder
基于TailwindCss,通过拖拽可视化配置和DeepSeek快速构建现代化响应式UI、可自定义、多主题、多语言的网站应用,包含美观的后台管理主题,拥有完整的前端解决方案的低代码平台。 Easily build responsive web apps with TailwindCSS and DeepSeek AI, featuring diverse themes, multilingual support, and drag-and-drop functionality, a low code platform with a complete front-end solution.
Stars: 381

Web Builder is a low-code front-end framework based on Material for Angular, offering a rich component library for excellent digital innovation experience. It allows rapid construction of modern responsive UI, multi-theme, multi-language web pages through drag-and-drop visual configuration. The framework includes a beautiful admin theme, complete front-end solutions, and AI integration in the Pro version for optimizing copy, creating components, and generating pages with a single sentence.
README:
信使 Web builder 是基于 Material 的 Angular 低代码前端框架,丰富的组件库可提供优秀的数字创新体验,
通过拖拽可视化配置快速构建现代化响应式UI、多主题、多语言的 Web 页面,包含美观的后台管理主题,拥有完整的前端解决方案,Pro 版本已接入AI,可优化文案,创建组件和一句话生成页面。
Web Builder
·
信使小程序
·
UI Storybook
·
知乎
·
English
观看演示视频
奥陌陌是已知的第一颗经过太阳系的星际天体,意为"远方信使"。
功能点 | 说明 |
---|---|
AI (Pro版) | 基于DeepSeek,基础对话、优化文案、生成图表、创建组件和一句话生成页面 |
Layout builder | 动态 layout,基于 TailwindCss 的动态组件,支持静态数据和 API 数据来源 |
组件编辑 | 删除、复制 JSON、编辑组件数据、拖动上下排列 |
媒体库 | 可在前台批量上传、查看、更新媒体库 |
小程序数据维护 | 通过 builder 管理小程序的页面和组件 |
页面历史版本 | 当提交、清空、加载示例等覆盖操作时新增历史版本 |
草稿检测 | 当前内容有最新时,提醒是否拉取最新 |
丰富的模板库、示例库 | 基于模板库选择模板,快速生成页面 |
复制整个页面的 JSON | 可直接复制 json,部署到后台发布 |
动画 | 支持通用的AOS页面滚动动画和高细粒度的GSAP动画 |
切换全宽 | 方便大屏编辑,减少干扰 |
快速生成页面 | 根据一定的规则从组件库中生成页面 |
多主题切换预览 | 预览在多主题下的组件显示情况 |
暗黑风格 | 支持切换浅色风格和暗黑风格,专注内容创作 |
页面预览 | 调转到新窗口查看真实的页面 |
响应式预览 | 可切换不同设备尺寸查看页面响应式排版 |
基于 DeepSeek AI 生成UI组件、图表、文案已经开发测试当中,敬请期待。
信使小程序是基于 Taro+NutUI 的小程序,Vue3拥有更好的编辑开发体验,
在Web builder中通过拖拽可视化配置,小程序可动态构建页面。
Github 开源地址
- AI 创建自定义组件,优化文案,一句话生成整个页面
- 构建Drupal CMS 预览版宣传着陆页
- 支持AOS通用页面滚动动画
- Layout 嵌套
- API 数据来源 | 静态数据来源 TailwindCss 自定义组件
- 复制功能快速构建组件
- 多语言发布及媒体库管理
- 自定义示例和模板库
微信扫码查看更多视频
Web builder | Angular | Node | TS |
---|---|---|---|
v9 | v18 | v18+ | v5.4 |
v8 | v17 | v18+ | v5.2 |
v7 | v16 | v16+ | v4.9.3 |
v6 | v14 | v14.15.0 | v4.6 |
v5 | v12 | v14 | v4 |
<=v4 | v11 | v14 | v4 |
项目非常适合初学者学习或者进阶,它涵盖了绝大部分 Angular 技术知识点,但并不仅限于以下内容。
- TailwindCss
- 服务端渲染(SSR)
- 懒加载,Inject 依赖注入
- 路由守卫
- 请求拦截缓存
- 动态组件
- 动态表单
- 动态表格
- 多主题
- 自定义指令
- 自定义管道 pipe
- 自定义 icon
- 数据图表
- Rxjs
- Storybook
- Typescript
- Provider
- 地图应用
- 分析:谷歌分析、微软 Clarity
- 信使 UI 在 Drupal 前后端分离中的应用
- 前端:Angular + Material + TailwindCss
- 动态表单:ngx-formly
- web 动画:aos 页面滚动动画,gsap 细粒度定制化动画
- 图表:Echarts
- 视频:Video.js
- 文件生成:jspdf 生成 pdf,html2canvas 生成图像,file-saver 下载文件,jszip 压缩文件
- 编辑器:quill, ang-jsoneditor, vs monaco-editor
- 幻灯片:swiper
- 字体图标:material design icons + 自定义 svg icon
- 加密:crypto-js
- 工具函数:lodash-es
- 测试预览:storybook
- web 服务:Nginx
- 后端:Drupal(推荐),通过 Drupal 的 views 视图可灵活配置动态组件、动态 api;
- 代码下载或者 clone 项目到本地:
git clone [email protected]:biaogebusy/web-builder.git
- 请使用 npm install 安装,严格安装 package-lock.json 锁版本安装,依赖较多,请多等待,使用 yarn 或者 pnpm 会有报错;
npm start
// src/environments/environment.ts
export const environment: IEnvironment = {
apiUrl: "http://localhost:4200",
production: false,
port: 4200,
cache: false,
drupalProxy: false,
multiLang: true,
langs: [
{
label: "中文",
langCode: "zh-hans",
prefix: "/",
default: true,
},
{
label: "EN",
langCode: "en",
prefix: "/en",
},
],
};
- apiUrl: 是整个应用的 Base api 参数;
- production: 为 false 时,页面的内容 api 将调用本地 json 文件,true 时将会调用线上接口;
- port: 自定义 Node 端口;
- cache: 是否开启 api 请求缓存;
- drupalProxy: 对应后端为 drupal,统一使用 Drupal 来登录登出;
- multiLang: 应用是否是多语言;
默认会读取 /api/v1/config
的全局配置信息,这里主要是查看该站点是否是开放还是需要登录的,文件路径src/app/core/guards/auth.guard.ts
,本地开发时可注释掉大概 35 行reture true;
;
为了体验一致,本地默认配置体验站的API代理,配置文件config/proxy.config.js
,根据实际情况进行配置;
const PROXY_CONFIG = [
{
context: ['/api', '/user', '/sites'],
target: 'https://builder.design',
secure: false,
changeOrigin: true,
},
];
module.exports = PROXY_CONFIG;
页面在浏览器打开访问时,应用会订阅 url 的变化,根据url
进行接口的数据读取,根据接口返回的数据渲染页面组件:
export function pageContentFactory(activateRoute: ActivatedRoute, contentService: ContentService, contentState: ContentState): Observable<IPage | object | boolean> {
const $pageContent = (new BehaviorSubject() < IPage) | object | (boolean > false);
activateRoute.url.subscribe(async (url) => {
const page = await contentService.loadPageContent().toPromise();
$pageContent.next(page);
contentState.pageConfig$.next(page.config);
});
return $pageContent;
}
loadPageContent(pageUrl = this.pageUrl): Observable<IPage> {
const { lang, path } = this.getUrlPath(pageUrl);
if (environment.production) {
const landingPath = '/api/v3/landingPage?content=';
const pageUrlParams = `${this.apiUrl}${lang}${landingPath}${path}`;
return this.http.get<any>(pageUrlParams).pipe(
tap((page) => {
this.updatePage(page);
this.logContent(pageUrl);
}),
catchError(() => {
return this.http.get<any>(`${this.apiUrl}${landingPath}/404`);
}),
);
} else {
return this.http
.get<any>(`${this.apiUrl}/assets/app${lang}${pageUrl}.json`)
.pipe(
tap((page) => {
this.updatePage(page);
}),
catchError(() => {
return this.http.get<any>(`${this.apiUrl}/assets/app/404.json`);
}),
);
}
}
Base 的基础配置可查阅信使 storybook 全局配置
npm run build
npm run storybook
更多开发移步开发指南
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
- QQ 交流群:1176468251
- 如果觉得这个项目对您有所助益,请帮忙点个 star
For Tasks:
Click tags to check more tools for each tasksFor Jobs:
Alternative AI tools for web-builder
Similar Open Source Tools

web-builder
Web Builder is a low-code front-end framework based on Material for Angular, offering a rich component library for excellent digital innovation experience. It allows rapid construction of modern responsive UI, multi-theme, multi-language web pages through drag-and-drop visual configuration. The framework includes a beautiful admin theme, complete front-end solutions, and AI integration in the Pro version for optimizing copy, creating components, and generating pages with a single sentence.

dora
Dataflow-oriented robotic application (dora-rs) is a framework that makes creation of robotic applications fast and simple. Building a robotic application can be summed up as bringing together hardwares, algorithms, and AI models, and make them communicate with each others. At dora-rs, we try to: make integration of hardware and software easy by supporting Python, C, C++, and also ROS2. make communication low latency by using zero-copy Arrow messages. dora-rs is still experimental and you might experience bugs, but we're working very hard to make it stable as possible.

chatluna
Chatluna is a machine learning model plugin that provides chat services with large language models. It is highly extensible, supports multiple output formats, and offers features like custom conversation presets, rate limiting, and context awareness. Users can deploy Chatluna under Koishi without additional configuration. The plugin supports various models/platforms like OpenAI, Azure OpenAI, Google Gemini, and more. It also provides preset customization using YAML files and allows for easy forking and development within Koishi projects. However, the project lacks web UI, HTTP server, and project documentation, inviting contributions from the community.

agentica
Agentica is a human-centric framework for building large language model agents. It provides functionalities for planning, memory management, tool usage, and supports features like reflection, planning and execution, RAG, multi-agent, multi-role, and workflow. The tool allows users to quickly code and orchestrate agents, customize prompts, and make API calls to various services. It supports API calls to OpenAI, Azure, Deepseek, Moonshot, Claude, Ollama, and Together. Agentica aims to simplify the process of building AI agents by providing a user-friendly interface and a range of functionalities for agent development.

video-subtitle-remover
Video-subtitle-remover (VSR) is a software based on AI technology that removes hard subtitles from videos. It achieves the following functions: - Lossless resolution: Remove hard subtitles from videos, generate files with subtitles removed - Fill the region of removed subtitles using a powerful AI algorithm model (non-adjacent pixel filling and mosaic removal) - Support custom subtitle positions, only remove subtitles in defined positions (input position) - Support automatic removal of all text in the entire video (no input position required) - Support batch removal of watermark text from multiple images.

MEGREZ
MEGREZ is a modern and elegant open-source high-performance computing platform that efficiently manages GPU resources. It allows for easy container instance creation, supports multiple nodes/multiple GPUs, modern UI environment isolation, customizable performance configurations, and user data isolation. The platform also comes with pre-installed deep learning environments, supports multiple users, features a VSCode web version, resource performance monitoring dashboard, and Jupyter Notebook support.

build_MiniLLM_from_scratch
This repository aims to build a low-parameter LLM model through pretraining, fine-tuning, model rewarding, and reinforcement learning stages to create a chat model capable of simple conversation tasks. It features using the bert4torch training framework, seamless integration with transformers package for inference, optimized file reading during training to reduce memory usage, providing complete training logs for reproducibility, and the ability to customize robot attributes. The chat model supports multi-turn conversations. The trained model currently only supports basic chat functionality due to limitations in corpus size, model scale, SFT corpus size, and quality.

wenda
Wenda is a platform for large-scale language model invocation designed to efficiently generate content for specific environments, considering the limitations of personal and small business computing resources, as well as knowledge security and privacy issues. The platform integrates capabilities such as knowledge base integration, multiple large language models for offline deployment, auto scripts for additional functionality, and other practical capabilities like conversation history management and multi-user simultaneous usage.

JiwuChat
JiwuChat is a lightweight multi-platform chat application built on Tauri2 and Nuxt3, with various real-time messaging features, AI group chat bots (such as 'iFlytek Spark', 'KimiAI' etc.), WebRTC audio-video calling, screen sharing, and AI shopping functions. It supports seamless cross-device communication, covering text, images, files, and voice messages, also supporting group chats and customizable settings. It provides light/dark mode for efficient social networking.

gpupixel
GPUPixel is a real-time, high-performance image and video filter library written in C++11 and based on OpenGL/ES. It incorporates a built-in beauty face filter that achieves commercial-grade beauty effects. The library is extremely easy to compile and integrate with a small size, supporting platforms including iOS, Android, Mac, Windows, and Linux. GPUPixel provides various filters like skin smoothing, whitening, face slimming, big eyes, lipstick, and blush. It supports input formats like YUV420P, RGBA, JPEG, PNG, and output formats like RGBA and YUV420P. The library's performance on devices like iPhone and Android is optimized, with low CPU usage and fast processing times. GPUPixel's lib size is compact, making it suitable for mobile and desktop applications.

jiwu-mall-chat-tauri
Jiwu Chat Tauri APP is a desktop chat application based on Nuxt3 + Tauri + Element Plus framework. It provides a beautiful user interface with integrated chat and social functions. It also supports AI shopping chat and global dark mode. Users can engage in real-time chat, share updates, and interact with AI customer service through this application.

ipex-llm
IPEX-LLM is a PyTorch library for running Large Language Models (LLMs) on Intel CPUs and GPUs with very low latency. It provides seamless integration with various LLM frameworks and tools, including llama.cpp, ollama, Text-Generation-WebUI, HuggingFace transformers, and more. IPEX-LLM has been optimized and verified on over 50 LLM models, including LLaMA, Mistral, Mixtral, Gemma, LLaVA, Whisper, ChatGLM, Baichuan, Qwen, and RWKV. It supports a range of low-bit inference formats, including INT4, FP8, FP4, INT8, INT2, FP16, and BF16, as well as finetuning capabilities for LoRA, QLoRA, DPO, QA-LoRA, and ReLoRA. IPEX-LLM is actively maintained and updated with new features and optimizations, making it a valuable tool for researchers, developers, and anyone interested in exploring and utilizing LLMs.
For similar tasks

web-builder
Web Builder is a low-code front-end framework based on Material for Angular, offering a rich component library for excellent digital innovation experience. It allows rapid construction of modern responsive UI, multi-theme, multi-language web pages through drag-and-drop visual configuration. The framework includes a beautiful admin theme, complete front-end solutions, and AI integration in the Pro version for optimizing copy, creating components, and generating pages with a single sentence.
For similar jobs

air-light
Air-light is a minimalist WordPress starter theme designed to be an ultra minimal starting point for a WordPress project. It is built to be very straightforward, backwards compatible, front-end developer friendly and modular by its structure. Air-light is free of weird "app-like" folder structures or odd syntaxes that nobody else uses. It loves WordPress as it was and as it is.

AirPower4T
AirPower4T is a development base library based on Vue3 TypeScript Element Plus Vite, using decorators, object-oriented, Hook and other front-end development methods. It provides many common components and some feedback components commonly used in background management systems, and provides a lot of enums and decorators.

Juggle
Juggle is a low-code tool for interface orchestration, which can quickly orchestrate simple APIs into a complex interface. The orchestrated interface can be directly used by the front end, greatly improving development efficiency and reducing development costs.

enterprise-commerce
Enterprise Commerce is a Next.js commerce starter that helps you launch your high-performance Shopify storefront in minutes, not weeks. It leverages the power of Vector Search and AI to deliver a superior online shopping experience without the development headaches.

ai2html
ai2html is an open-source script for Adobe Illustrator that converts your Illustrator documents into html and css.

nlux
nlux is an open-source Javascript and React JS library that makes it super simple to integrate powerful large language models (LLMs) like ChatGPT into your web app or website. With just a few lines of code, you can add conversational AI capabilities and interact with your favourite LLM.

ui
Leafer UI is a colorful UI drawing framework developed based on Leafer, which can be used to combine AI drawing and generate interfaces. It provides commonly used UI drawing components and out-of-the-box functions, which is convenient for data exchange with products such as Figma and Sketch, and provides unified and rich interactive events for cross-platform development, such as drag, rotate, and zoom gestures. 1.0.0-rc.21 has been released 🎉🎉🎉, check the changelog. At present, the product has gradually stabilized, and the official version is coming soon. Thanks to all the friends who participated~ If you want to start using it right away, please check the quick installation. If you have any questions or suggestions, you can submit them here or join the technical exchange group. If you only need drawing functions, the lighter leafer-draw (46KB min+gzip) is recommended. 🌟 Remember to go to GitHub / Gitee to light up your little stars ✨ ✨ ✨