# luban-h5 | 小小鲁班 | Knowledge Base | Instagit

[WIP]en: web design tool || mobile page builder/editor || mini webflow for mobile page. zh: 类似易企秀的H5制作、建站工具、可视化搭建系统.

GitHub Stars: 6.2k

Repository: https://github.com/ly525/luban-h5

---

## Articles

### [How the Luban H5 Publish Workflow and view_mode Preview System Works](/ly525/luban-h5/how-does-the-publish-workflow-and-view-mode-preview-work-in-luban-h5)

Understand the Luban H5 publish workflow and view_mode preview system. Learn how is_publish and view_mode=preview enforce access control on frontend and backend.

- Tags: internals
- Published: 2026-03-06

### [How to Deploy Luban H5 to Production: A Complete Guide](/ly525/luban-h5/how-to-deploy-luban-h5-to-production)

Easily deploy Luban H5 to production. Follow our guide to install Node.js PM2, clone the repo, compile Vue and Strapi, and start the service on port 1337.

- Tags: how-to-guide
- Published: 2026-03-06

### [How to Implement Component-Level Animations in Luban H5: A Complete Guide](/ly525/luban-h5/how-to-implement-component-level-animations-in-luban-h5)

Master component-level animations in Luban H5 using animationMixin. Learn to store and trigger animation sequences for dynamic web experiences. Get the complete guide now.

- Tags: how-to-guide
- Published: 2026-03-06

### [Luban H5 Work/Pages/Elements JSON Schema: Structure, Fields, and Implementation](/ly525/luban-h5/how-is-the-work-pages-elements-json-schema-structured-in-luban-h5)

Explore the Luban H5 JSON schema structure for work pages and elements. Understand the hierarchy and key fields for H5 project implementation. Learn how to define components, styles, and animations.

- Tags: api-reference
- Published: 2026-03-06

### [How to Add Custom Styles and Themes to Components in Luban H5](/ly525/luban-h5/how-to-add-custom-styles-and-themes-to-components-in-luban-h5)

Customize Luban H5 components with custom styles and themes. Learn how to use global SCSS, theme prop, and inline overrides for complete visual control.

- Tags: how-to-guide
- Published: 2026-03-06

### [How the Background Music Component Loads and Plays Audio in Luban H5](/ly525/luban-h5/how-does-the-background-music-component-load-and-play-audio-in-luban-h5)

Discover how the Luban H5 background music component loads and plays audio using a Vue plugin, HTML audio element, and reactive state for seamless playback control.

- Tags: internals
- Published: 2026-03-06

### [How to Integrate a Custom Backend (Non-Strapi) with Luban H5](/ly525/luban-h5/how-to-integrate-a-custom-backend-with-luban-h5)

Learn how to integrate a custom backend with Luban H5 by replacing the Strapi SDK with an Axios client and updating your Vuex store. Get your custom backend working seamlessly with Luban H5 today.

- Tags: how-to-guide
- Published: 2026-03-06

### [How to Add Internationalization Support to Custom Plugins in Luban H5](/ly525/luban-h5/how-to-add-internationalization-support-to-custom-plugins-in-luban-h5)

Add internationalization support to Luban H5 custom plugins. Learn to register keys, map titles, and use $t() in Vue components for global reach.

- Tags: how-to-guide
- Published: 2026-03-06

### [How to Implement Custom Editor Panels for Plugin Properties in Luban H5](/ly525/luban-h5/how-to-implement-custom-editor-panels-for-plugin-properties-in-luban-h5)

Learn to implement custom editor panels for plugin properties in Luban H5. Replace the default form with a specialized interface using lazy-loaded Vue components.

- Tags: how-to-guide
- Published: 2026-03-06

### [How Reference Lines and Snap Alignment Work in the Luban H5 Editor](/ly525/luban-h5/how-are-reference-lines-and-snap-alignment-implemented-in-luban-h5-editor)

Discover how Luban H5 editor uses drag mixins and Vuex to implement real-time reference lines and snap alignment, ensuring precise element placement on your canvas.

- Tags: internals
- Published: 2026-03-06

### [How Undo/Redo Is Implemented in the Luban H5 Editor State](/ly525/luban-h5/how-is-undo-redo-implemented-in-the-luban-h5-editor-state)

Learn how Luban H5 implements undo redo using a Vuex plugin. Discover state management techniques and store replacement for seamless history tracking.

- Tags: internals
- Published: 2026-03-06

### [How the Right Panel Editor Configuration Works for Plugins in Luban H5](/ly525/luban-h5/how-does-the-right-panel-editor-configuration-work-for-plugins-in-luban-h5)

Understand Luban H5 plugin configuration. Explore how the Vuex-driven reactive architecture synchronizes canvas and panel property changes for seamless editing.

- Tags: how-to-guide
- Published: 2026-03-06

### [How to Add a New Component Type to the Editor Sidebar in Luban H5](/ly525/luban-h5/how-to-add-a-new-component-type-to-the-editor-sidebar-in-luban-h5)

Learn how to add a new component type to the Luban H5 editor sidebar. This guide details creating Vue components, plugin definitions, and registration for seamless integration.

- Tags: how-to-guide
- Published: 2026-03-06

### [How Form Submission and Data Collection Work End-to-End in Luban H5](/ly525/luban-h5/how-does-form-submission-and-data-collection-work-end-to-end-in-luban-h5)

Explore end-to-end form submission and data collection in Luban H5. Discover how lbp-form-input and lbp-form-button plugins power your data collection process.

- Tags: how-to-guide
- Published: 2026-03-06

### [How to Implement Data Binding and DataSource API Calls in Luban H5](/ly525/luban-h5/how-to-implement-data-binding-and-datasource-api-calls-in-luban-h5)

Learn how to implement data binding and DataSource API calls in Luban H5 using its reactive Vuex store and bindData utility. Synchronize UI elements with REST endpoint data.

- Tags: how-to-guide
- Published: 2026-03-06

### [LONGPAGE and SWIPERPAGE Modes in Luban H5: A Complete Technical Guide](/ly525/luban-h5/difference-between-long-page-and-swiper-page-modes-in-luban-h5)

Explore LONGPAGE and SWIPERPAGE modes in Luban H5. Understand how LONGPAGE scrolls vertically and SWIPERPAGE uses horizontal Swiper slides for distinct pages. Get the full technical guide.

- Tags: deep-dive
- Published: 2026-03-06

### [How the Preview Engine (`engine-entry.js`) Renders Pages in Luban-H5](/ly525/luban-h5/how-does-the-preview-engine-render-pages)

Discover how the preview engine in engine-entry.js renders H5 pages by transforming JSON into interactive Vue components. Learn about its pipeline for single and multi-page navigation.

- Tags: internals
- Published: 2026-03-06

### [Understanding the Element Model and Data Structure in Luban H5](/ly525/luban-h5/understanding-the-element-model-and-element-data-structure-in-luban-h5)

Explore the Element model and data structure in Luban H5. Understand how it organizes component metadata, styles, and scripts for visual elements on your canvas.

- Tags: internals
- Published: 2026-03-06

### [How Luban H5 Plugin Registration and Loading Works: Complete Technical Guide](/ly525/luban-h5/how-does-luban-h5s-plugin-registration-and-loading-system-work)

Discover how Luban H5's plugin registration and loading system works with this technical guide. Understand component registration and global implementation.

- Tags: internals
- Published: 2026-03-06

### [How to Create a Custom Plugin Component in Luban H5: A Complete Guide](/ly525/luban-h5/how-to-create-a-custom-plugin-component-in-luban-h5)

Learn to create a custom plugin component in Luban H5 with our complete guide. Scaffold a Vue component implement logic and register your plugin effortlessly.

- Tags: how-to-guide
- Published: 2026-03-06