@mindfiredigital/page-builder-web-component NPM

Live Demo

Click the button below to open the project on StackBlitz.

Screenshot

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>