PageBuilder

lightweight page builder library designed for creating static web pages with a drag-and-drop interface. This component library generates HTML output and supports customization options. Built with TypeScript and vanilla JavaScript for performance, it includes modular components, responsive previews, and data handling for layout storage and retrieval.

Live Demo

Click the button below to open the project on StackBlitz.

Screenshot

Screenshot of the Page builder

Features
Installation
Getting Started with npm
Contributing
License

Features

Component Structure: Drag-and-drop components (text, images, buttons, headers, containers, etc.) to create a layout.
Responsive Preview: Preview page layouts in different device modes (Desktop, Tablet, Mobile).
Configuration Sidebar: Customize component properties like text, color, padding, and margin via a configuration sidebar.
Data Storage: Save layout configurations in JSON format for easy retrieval and editing.
Layers: Enabling users to manage component hierarchy visually.
Output HTML: Export the final HTML layout for use in static web pages or other applications.

Installation

To install the @mindfiredigital/page-builder-web-component npm package in your project, use the following command:

npm install @mindfiredigital/page-builder-web-component

Getting Started with npm

Initialization: Initialize the PageBuilder in your project.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Page Builder Demo</title>
  </head>
  <body>
    <page-builder></page-builder>
    <script type="module" defer>
      import '@mindfiredigital/page-builder-web-component';
    </script>
  </body>
</html>

Contributing

We welcome contributions from the community. If you'd like to contribute to the Pagebuilder npm package, please follow our Contributing Guidelines.

License

Licensed under the MIT license.

JSPM

@mindfiredigital/page-builder-web-component

Package Exports

Readme