@myissue/vue-website-page-builder 3.2.28 → 3.2.31

package/README.md

@@ -2,14 +2,6 @@
 <img width="200" style="max-width: 100%;" src="./public/logo/logo.svg" alt="Vue Website Page Builder Logo" />
 </p>
 
-## **DEVELOPMENT VERSION - NOT READY FOR PRODUCTION**
-
-🚀 **Official Launch Date: June 16, 2025**  
-We're working hard to bring you a production-ready page builder. Stay tuned for updates!
-
-You are welcome to test the builder and report any bugs or feedback before the official launch date.  
-Your input will help us deliver a more stable and feature-rich release!
-
 # Free Click & Drop Page Builder
 
 ## Overview
@@ -368,6 +360,37 @@ const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 
 // Initializing with essential configuration
 pageBuilderClass.setConfigPageBuilder(configPageBuilder)
+
+// Recommended HTML wrapper for optimal layout and responsiveness:
+// Wrap your components using the following structure to ensure proper spacing and alignment:
+//
+// <section>
+//   <div class="relative py-4">
+//     <div class="mx-auto max-w-7xl lg:px-4 px-2">
+//       <div class="break-words">
+//         <!-- Your HTML layout goes here -->
+//       </div>
+//     </div>
+//   </div>
+// </section>
+
+
+const existingResourceFromBackend = [
+  {
+    html_code:
+      '<section><div class="relative py-4"><div class="mx-auto max-w-7xl lg:px-4 px-2"><div class="break-words"><h2>Component Example One</h2></div></div></div></section>',
+    id: null,
+    title: 'Header H2',
+  },
+  {
+    html_code:
+      '<section><div class="relative py-4"><div class="mx-auto max-w-7xl lg:px-4 px-2"><div class="break-words" selected=""><h3>Component Example Two</h3></div></div></div></section>',
+    id: null,
+    title: 'Header H3',
+  },
+]
+
+
 // Populating page builder with existing resource content from backend
 pageBuilderClass.loadExistingContent(existingResourceFromBackend)
 </script>
@@ -384,6 +407,23 @@ The example below shows the structure as it would appear when loaded from local
 - Example JSON string (from localStorage or backend)
 - For existing resources, id will always be present and set by the page builder.
 
+Example `existingResourceFromBackend`:
+
+```json
+[
+  {
+    "html_code": "<section><div class=\"relative py-4\"><div class=\"mx-auto max-w-7xl lg:px-4 px-2\"><div class=\"break-words\"><h2>Component Example One</h2></div></div></div></section>",
+    "id": null,
+    "title": "Header H2"
+  },
+  {
+    "html_code": "<section><div class=\"relative py-4\"><div class=\"mx-auto max-w-7xl lg:px-4 px-2\"><div class=\"break-words\" selected=\"\"><h3>Component Example Two</h3></div></div></div></section>",
+    "id": null,
+    "title": "Header H3"
+  }
+]
+```
+
 ### Customization
 
 Customizing the page builder is made simple since all the logic resides in the PageBuilder Class.