# ly525/luban-h5

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/ly525-luban-h5).**

6,239 stars · 1,280 forks · JavaScript · GPL-3.0

## Links

- GitHub: https://github.com/ly525/luban-h5
- Homepage: https://h5.luban.website/
- awesome-repositories: https://awesome-repositories.com/repository/ly525-luban-h5.md

## Description

luban-h5 is a low-code web framework and visual mobile page builder used to design interactive mobile web pages. It functions as a JSON-based page renderer that converts design configurations into live pages for end-user delivery and includes a visual form builder for creating interactive input fields and tracking submission statistics.

The project features a PSD to HTML converter that parses Photoshop files into functional HTML pages to automate the design-to-code workflow. It distinguishes itself through a plugin-based system that allows for the development of custom UI components and specialized page plugins.

The platform covers a broad capability surface, including drag-and-drop visual design, animation management, and media asset embedding. It provides tools for backend content management, dynamic data binding, and the publishing of pages to public URLs with live device previews via QR codes.

## Tags

### Development Tools & Productivity

- [Low-Code Development Platforms](https://awesome-repositories.com/f/development-tools-productivity/low-code-development-platforms.md) — Provides a visual development environment for building interactive mobile pages by connecting components to backend APIs.

### User Interface & Experience

- [Drag-and-Drop Page Editors](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-page-editors.md) — Features a visual drag-and-drop editor for arranging elements and defining mobile page layouts.
- [Custom UI Components](https://awesome-repositories.com/f/user-interface-experience/custom-ui-components.md) — Provides a plugin-based system for developing specialized functional UI components to extend the page builder.
- [Data-to-UI Bindings](https://awesome-repositories.com/f/user-interface-experience/data-to-ui-bindings.md) — Synchronizes visual components with external API data to display real-time content on mobile pages.
- [Form Building Tools](https://awesome-repositories.com/f/user-interface-experience/dynamic-input-forms/form-building-tools.md) — Includes a visual builder for creating structured user input forms with various field types. ([source](https://ly525.github.io/luban-h5))
- [Visual Page Builders](https://awesome-repositories.com/f/user-interface-experience/visual-page-builders.md) — Provides a drag-and-drop editor for designing interactive mobile web pages that render from JSON data.
- [Animation Configurations](https://awesome-repositories.com/f/user-interface-experience/component-utilities/animation-engines/animation-configurations.md) — Provides controls for animation timing, easing, and behavioral parameters applied to the rendered UI.
- [Custom Component Extensions](https://awesome-repositories.com/f/user-interface-experience/custom-component-extensions.md) — Provides a scaffolding system and tools for integrating specialized frontend elements into the component library. ([source](https://github.com/ly525/luban-h5#readme))
- [UI and Feature Plugins](https://awesome-repositories.com/f/user-interface-experience/custom-component-extensions/editor-extension-creations/ui-and-feature-plugins.md) — Allows the addition of custom UI elements and editor features through JavaScript-based plugin modules. ([source](https://github.com/ly525/luban-h5/blob/master/README.en.md))
- [Live Design Previews](https://awesome-repositories.com/f/user-interface-experience/document-previewers/document-preview-and-export-utilities/live-design-previews.md) — Renders a live browser-like preview of the designed mobile page to verify appearance and behavior before publishing. ([source](https://github.com/ly525/luban-h5/tree/master/front-end/h5))
- [Web Project Previews](https://awesome-repositories.com/f/user-interface-experience/file-previewers/html-previews/web-project-previews.md) — Generates online previews and QR codes to test mobile page layouts on actual devices. ([source](https://ly525.github.io/luban-h5/en/getting-started/introduction.html))
- [Composite Interactive Components](https://awesome-repositories.com/f/user-interface-experience/interactive-ui-components/component-interaction-management/composite-interactive-components.md) — Supports combining forms, charts, maps, and tables to add complex functionality and user interactions. ([source](https://github.com/ly525/luban-h5/blob/master/CHANGELOG.md))
- [Mobile Form Implementations](https://awesome-repositories.com/f/user-interface-experience/mobile-form-implementations.md) — Includes a visual form builder for creating interactive input fields and collecting user information on mobile devices.
- [Page Layout Templates](https://awesome-repositories.com/f/user-interface-experience/page-layout-templates.md) — Provides a collection of pre-made page layout templates to serve as starting points for new designs. ([source](https://github.com/ly525/luban-h5/tree/master/front-end/h5))
- [UI Animation Controls](https://awesome-repositories.com/f/user-interface-experience/ui-animation-controls.md) — Provides visual controls to manage animation duration, delay, and iterations for mobile page elements. ([source](https://github.com/ly525/luban-h5/blob/master/CHANGELOG.md))
- [Custom Form Builders](https://awesome-repositories.com/f/user-interface-experience/visual-form-designers/custom-form-builders.md) — Provides a tool for visually constructing custom forms with interactive input fields.

### Part of an Awesome List

- [Low-Code Frameworks](https://awesome-repositories.com/f/awesome-lists/devtools/low-code-frameworks.md) — Acts as a low-code framework for building mobile sites by connecting visual components to backend APIs.
- [Low-Code and Visual Builders](https://awesome-repositories.com/f/awesome-lists/devtools/low-code-and-visual-builders.md) — Platform for rapidly creating H5 pages via drag-and-drop.
- [Low-Code Platforms](https://awesome-repositories.com/f/awesome-lists/devtools/low-code-platforms.md) — Visual H5 site building system.
- [Visual Page Builders](https://awesome-repositories.com/f/awesome-lists/devtools/visual-page-builders.md) — Visual editor for creating H5 marketing pages and activities.

### Content Management & Publishing

- [Page Publishing Tools](https://awesome-repositories.com/f/content-management-publishing/page-publishing-tools.md) — Renders live previews and deploys final designs to public URLs. ([source](https://github.com/ly525/luban-h5/blob/master/CHANGELOG.md))
- [Dynamic Page Renderings](https://awesome-repositories.com/f/content-management-publishing/static-page-rendering/dynamic-page-renderings.md) — Converts JSON design data and API responses into live mobile web pages for end-user delivery.
- [Content Administration Interfaces](https://awesome-repositories.com/f/content-management-publishing/content-administration-interfaces.md) — Provides a web-based administrative dashboard for defining data schemas, user registration, and API permissions. ([source](https://ly525.github.io/luban-h5/zh/getting-started/quick-start.html))

### Web Development

- [Backend Service Integrations](https://awesome-repositories.com/f/web-development/backend-service-integrations.md) — Implements architectural patterns to connect the visual page builder to backend services for saving work and collecting form data. ([source](https://github.com/ly525/luban-h5/blob/master/README.md))
- [External API Integrations](https://awesome-repositories.com/f/web-development/external-api-integrations.md) — Provides capabilities for connecting mobile pages to external REST and GraphQL services for dynamic content delivery. ([source](https://ly525.github.io/luban-h5/zh/))
- [JSON to Page Rendering](https://awesome-repositories.com/f/web-development/json-apis/json-based-page-schemas/json-to-page-rendering.md) — Processes structured JSON design configurations into a functional visual tree of web components for end-user delivery.
- [PSD to HTML Conversions](https://awesome-repositories.com/f/web-development/psd-to-html-conversions.md) — Transforms Photoshop PSD files into functional HTML and mobile web pages to automate the design-to-code workflow. ([source](https://ly525.github.io/luban-h5/zh/))

### Graphics & Multimedia

- [Visual-to-HTML Parsing](https://awesome-repositories.com/f/graphics-multimedia/visual-to-html-parsing.md) — Automates the conversion of Photoshop PSD design files into structured, functional HTML code.

### Software Engineering & Architecture

- [Project State Persistence](https://awesome-repositories.com/f/software-engineering-architecture/file-based-project-storage/project-state-persistence.md) — Saves and retrieves design project configurations and versioning data through a centralized backend service.
- [Plugin-Based Extensibility](https://awesome-repositories.com/f/software-engineering-architecture/plugin-based-extensibility.md) — Implements a modular architecture allowing the addition of custom UI elements and page components via plugins.