# fireyy/vue-page-designer **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/fireyy-vue-page-designer).** 908 stars · 231 forks · Vue · Apache-2.0 ## Links - GitHub: https://github.com/fireyy/vue-page-designer - Homepage: https://fireyy.github.io/vue-page-designer/ - awesome-repositories: https://awesome-repositories.com/repository/fireyy-vue-page-designer.md ## Topics `builder` `designer` `page` `vue` `widget` ## Description Vue Page Designer is a framework for building interactive, component-based visual editors within web applications. It provides a drag-and-drop interface that allows users to construct mobile-responsive web layouts by arranging pre-built components onto a canvas, enabling low-code page composition without manual coding for every layout change. The library distinguishes itself through a modular plugin architecture that allows developers to register custom interface elements, expanding the available building blocks for unique design requirements. It utilizes a recursive rendering strategy driven by hierarchical configuration objects, ensuring that the visual workspace remains synchronized with the underlying data structure. The system includes comprehensive state management utilities that capture the entire page structure as a portable, serialized data object. This allows for the persistence and restoration of complex design configurations, supporting workflows where users can save drafts and resume work across sessions. Developers can further manage the design environment through global page metadata controls, component property adjustments, and integrated file upload handling. ## Tags ### User Interface & Experience - [Drag-and-Drop Page Builders](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-page-builders.md) — Provides a visual drag-and-drop interface for constructing mobile-responsive web layouts using pre-built components. - [Component-Based UI Frameworks](https://awesome-repositories.com/f/user-interface-experience/component-based-ui-frameworks.md) — Provides a framework for building interactive design tools that allow users to configure component properties and manage page metadata. - [Visual Page Builders](https://awesome-repositories.com/f/user-interface-experience/visual-page-builders.md) — Provides a drag-and-drop canvas for constructing mobile-responsive web pages by arranging components into a visual structure. ([source](https://github.com/fireyy/vue-page-designer/search)) - [Custom Component Extensions](https://awesome-repositories.com/f/user-interface-experience/custom-component-extensions.md) — Allows developers to register custom interface elements to expand the available building blocks for page layouts. ([source](https://github.com/fireyy/vue-page-designer#readme)) - [Drag-and-Drop Event Callbacks](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/interaction-logic-hooks/interaction-handlers/drag-and-drop-event-callbacks.md) — Implements a central event bus to manage drag-and-drop coordinate tracking and element insertion logic. - [Infinite Canvas Coordinate Mapping](https://awesome-repositories.com/f/user-interface-experience/infinite-canvas-coordinate-mapping.md) — Translates mouse and touch coordinates into relative layout constraints for responsive element positioning on the canvas. - [Page Metadata Definitions](https://awesome-repositories.com/f/user-interface-experience/page-metadata-definitions.md) — Allows developers to define global page attributes including titles, dimensions, and background colors. ([source](https://fireyy.github.io/vue-page-designer/)) - [Property Configurations](https://awesome-repositories.com/f/user-interface-experience/widget-behavioral-configurations/property-configurations.md) — Enables users to adjust parameters, interaction behaviors, and animation settings for individual elements. ([source](https://fireyy.github.io/vue-page-designer/)) ### Data & Databases - [Layout Persisters](https://awesome-repositories.com/f/data-databases/state-persistence/layout-persisters.md) — Captures page structures as portable, serialized data objects for persistence and later rehydration. ### Development Tools & Productivity - [Low-code](https://awesome-repositories.com/f/development-tools-productivity/platforms-runtimes-language-services/development-platforms/low-code-visual-builders/low-code.md) — Enables users to construct functional web pages through a visual interface without manual coding. - [Editor State Management](https://awesome-repositories.com/f/development-tools-productivity/change-tracking/state-tracking-utilities/action-based-state-tracking/editor-state-management.md) — Manages the comprehensive state of the editor to support saving drafts and resuming work across sessions. ### Web Development - [JSON to Page Rendering](https://awesome-repositories.com/f/web-development/json-apis/json-based-page-schemas/json-to-page-rendering.md) — Maps hierarchical JSON configuration objects to dynamic component trees using a recursive rendering strategy. - [Integration Frameworks](https://awesome-repositories.com/f/web-development/vue-component-wrappers/vue-component-libraries/integration-frameworks.md) — Allows developers to extend the design workspace by injecting custom interface elements. - [Web Page Construction](https://awesome-repositories.com/f/web-development/web-page-construction.md) — Provides a visual interface for creating and persisting page configurations that can be integrated into web applications. ### Software Engineering & Architecture - [Reactive Configuration Systems](https://awesome-repositories.com/f/software-engineering-architecture/reactive-configuration-systems.md) — Maintains a reactive source of truth for component properties that automatically triggers UI updates. - [Plugin-Based Architectures](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/plugin-module-systems/modular-plugin-architectures/plugin-based-architectures.md) — Provides a modular plugin architecture for registering custom interface elements within the design workspace.