@myissue/vue-website-page-builder 3.2.96 → 3.3.1

package/README.md

@@ -15,10 +15,10 @@ Integration is easy, and content is safely auto stored in the browser's local st
 
 Want to include your company logo in the editor toolbar or reflect your brand's color scheme throughout the builder interface? Done. With robust configuration options, branding the builder to match your product or client identity is quick and effortless.
 
-## 🚀 Start Within Minutes
+## 🚀 Get Started in Minutes
 
 Easy setup and instant productivity.  
-**Get up and running in just a few steps—see [Quick Start](#quick-start) below!**
+Follow the [Quick Start](#quick-start) guide to begin building with just a few simple steps.
 
 ---
 
@@ -38,13 +38,11 @@ Lightweight & Minimalist Page Builder with an elegant and intuitive design, focu
 
 Build responsive pages like listings, jobs or blog posts and manage content easily using the free Click & Drop Page Builder.
 
-To star the repository, simply click on the **Star** button located at the top-right corner of the GitHub page.
-
 <img style="max-width: 100%;" src="./public/home/editor.jpg" alt="Vue Website Page Builder - the editor" />
 
 ## Demo
 
-Introducing the **The Lightweight Free Vue Click & Drop Page Builder**
+Introducing **The Lightweight Free Vue Click & Drop Page Builder**
 create and enhance digital experiences with Vue on any backend.
 
 [Play around with the Page Builder](https://www.builder-demo.myissue.dk)
@@ -119,17 +117,16 @@ bun install
 
 ### Quick Start
 
-Get up and running quickly and initializing the builder in your Vue project. The following below code example demonstrates the minimal setup required to start building pages.
+Grammar: Should be "Get up and running quickly by initializing the builder in your Vue project. The following code example demonstrates the minimal setup required to start building pages.
 
 - You must explicitly call initPageBuilder() once in your app entry (e.g. main.ts) before using any Page Builder features.
 
 - Then, use `getPageBuilder()` anywhere to access the shared builder instance.
 
-- Import the CSS file once, ideally in your `main.js`/`main.ts` or root component for proper styling and automatic icon loading..
+- Import the CSS file once, ideally in your `main.js`/`main.ts` or root component for proper styling and automatic icon loading.
 
 ```typescript
 import { createApp } from 'vue'
-import { createPinia } from 'pinia'
 import App from './App.vue'
 import { initPageBuilder } from '@myissue/vue-website-page-builder'
 import '@myissue/vue-website-page-builder/style.css'
@@ -139,7 +136,6 @@ import '@myissue/vue-website-page-builder/style.css'
 initPageBuilder()
 
 const app = createApp(App)
-app.use(createPinia())
 app.mount('#app')
 ```
 
@@ -170,7 +166,6 @@ const configPageBuilder = {
 
 // Retrieve Page Builder service instance
 const pageBuilderService = getPageBuilder()
-
 await pageBuilderService.startBuilder(configPageBuilder)
 </script>
 
@@ -240,7 +235,7 @@ import '@myissue/vue-website-page-builder/style.css'
 
 ### Rendering Only the HTML Output from the Page Builder in Other Frameworks (React, Nuxt, etc.)
 
-If you use the Page Builder to generate HTML pages and want to render them in another application (such as React, Nuxt, or any server-side app), simply install the Page Builder package in your target project and import its CSS file. This ensures that all Tailwind and builder-specific styles are applied to the rendered HTML.
+If you use the Page Builder to generate HTML pages and want to render them in another application (such as React, Nuxt, or any server-side app), simply install the Page Builder package in your target project and import its CSS file. This ensures that all prefix Tailwind and builder-specific styles are applied to the rendered HTML.
 
 ```vue
 <script setup>
@@ -272,44 +267,37 @@ Then use `v-html` to render the HTML.
 
 > **Note:** You do not need to import any Vue components if you only want to render the HTML. Just import the CSS file.
 
-### Optional: Provide Config to PageBuilder
+### Provide Config to PageBuilder
 
 Get up and running quickly by importing the PageBuilder component, setting up your configuration, and initializing the builder in your Vue project. The following example demonstrates the minimal setup required to start building pages with your own config and logo.
 
-- Use `sharedPageBuilderStore` to ensure the external PageBuilderClass and internal PageBuilder component share the same state
-- (Optional) Provide a `configPageBuilder` object to customize the builder, such as:
-  - `pageBuilderLogo` to display your company logo in the builder toolbar
-  - `resourceData` to prefill the builder with initial data
-  - `userSettings` to set user preferences such as theme, language, or autoSave
-  - `brandColor` set brand’s primary color, which will be used for key UI elements in the builder in the `settings` config
-  - To retrieve the correct content from local storage, you must pass the same resourceData (such as formType and formName) to the Page Builder that was used when the content was originally saved. If the resource data does not match, the Page Builder will look for a different local storage key and may not find the expected content.
-  - `formName` (recommended): Specify the resource type (e.g., `"article"`, `"jobPost"`, `"store"`, etc.) in the `updateOrCreate` config. This is especially useful if your platform supports multiple resource types. By providing a unique name, the Page Builder can correctly manage layouts and local storage for each resource type, allowing users to continue where they left off for different resources.
-  - Pass a `userForPageBuilder` object in your config to display or use the logged-in user's information within the builder (e.g., name and user image).
+- Provide a `configPageBuilder` object to customize the builder, such as:
+  - `formType` (required): Used to retrieve the correct content from local storage. Specify whether you are creating or updating a resource by setting this to `create` or `update` in the `updateOrCreate` config.
+  - `formName` (required): Specify the resource type (e.g., `"article"`, `"jobPost"`, `"store"`, etc.) in the `updateOrCreate` config. This is especially useful if your platform supports multiple resource types. By providing a unique name, the Page Builder can correctly manage layouts and local storage for each resource type, allowing users to continue where they left off for different resources.
+  - `resourceData` (optional): Prefill the builder with initial resource data (e.g., `"title"`, `"id"`).
+  - `userForPageBuilder` (optional): Pass an object with user information (e.g., `name` and `image`) in your config to display the logged-in user's details within the builder interface.
+  - `pageBuilderLogo` (optional): Display your company logo in the builder toolbar.
+  - `userSettings` (optional): Set user preferences such as theme, language, or autoSave.
+  - `brandColor` (optional): Set your brand’s primary color for key UI elements in the builder (inside the `settings` config).
 
 ```vue
 <script setup>
-import {
-  PageBuilder,
-  PageBuilderClass,
-  sharedPageBuilderStore,
-} from '@myissue/vue-website-page-builder'
-import '@myissue/vue-website-page-builder/style.css'
+import { getPageBuilder } from '@myissue/vue-website-page-builder'
 
 const configPageBuilder = {
   updateOrCreate: {
-    formType: 'create'
+    formType: 'create', // Set to 'create' or 'update'
     // Set the resource type for better local storage and multi-resource support
     formName: 'article',
   },
-  pageBuilderLogo: {
-    src: '/logo/logo.svg',
-  },
-  userForPageBuilder: { name: 'John Doe', image: '/jane_doe.jpg' },
   resourceData: {
     title: 'Demo Article',
-    // ID is optional for better local storage and multi-resource support
     id: 1,
   },
+  userForPageBuilder: { name: 'John Doe', image: '/jon_doe.jpg' },
+  pageBuilderLogo: {
+    src: '/logo/logo.svg',
+  },
   userSettings: {
     theme: 'light',
     language: 'en',
@@ -320,52 +308,8 @@ const configPageBuilder = {
   },
 }
 
-// Use sharedPageBuilderStore for shared state between PageBuilderClass and PageBuilder component
-const pageBuilderStateStore = sharedPageBuilderStore
-const pageBuilderService.= new PageBuilderClass(pageBuilderStateStore)
-
-
-await pageBuilderService.startBuilder(configPageBuilder)
-</script>
-
-<template>
-  <PageBuilder />
-</template>
-```
-
-### Company Logo & Logged-in User
-
-You can display your company logo in the Page Builder interface and set the currently logged-in user by passing both a logo URL and user information in your config object:
-
-- **Company Logo:** Set the logo URL in your config object and pass it to the PageBuilder using `pageBuilderService.startBuilder(configPageBuilder)`. When provided, the logo will appear at the top of the Page Builder with proper spacing in the toolbar.
-- **Logged-in User:** Pass a `userForPageBuilder` object in your config to display or use the logged-in user's information within the builder (e.g., name and user image).
-
-**Basic Usage:**
-
-- You can display your company logo in the page builder interface by setting the `src` in your config object and passing it to the PageBuilder using `pageBuilderService.startBuilder(configPageBuilder)`. When provided, the logo will appear in the top of the page builder.
-
-Basic Usage:
-
-```vue
-<script setup>
-import {
-  PageBuilder,
-  PageBuilderClass,
-  sharedPageBuilderStore,
-} from '@myissue/vue-website-page-builder'
-import '@myissue/vue-website-page-builder/style.css'
-
-const configPageBuilder = {
-  pageBuilderLogo: {
-    src: '/logo/logo.svg',
-  },
-  userForPageBuilder: { name: 'John Doe', image: '/jane_doe.jpg' },
-}
-
-// Use sharedPageBuilderStore for shared state between PageBuilderClass and PageBuilder component
-const pageBuilderStateStore = sharedPageBuilderStore
-const pageBuilderService.= new PageBuilderClass(pageBuilderStateStore)
-
+// Retrieve Page Builder service instance
+const pageBuilderService = getPageBuilder()
 await pageBuilderService.startBuilder(configPageBuilder)
 </script>
 
@@ -374,27 +318,22 @@ await pageBuilderService.startBuilder(configPageBuilder)
 </template>
 ```
 
-Configuration Options
-
-| Prop              | Type     | Default | Description                         |
-| ----------------- | -------- | ------- | ----------------------------------- |
-| `PageBuilderLogo` | `String` | `null`  | URL path to your company logo image |
+### Local Storage & Auto-Save
 
-### Local Storage
-
-The Page Builder automatically manages all changes using the browser's local storage. Every change you make—such as adding, editing, or deleting components—is saved in local storage. This ensures that your progress is not lost, even if you accidentally close the browser or navigate away.
+The Page Builder automatically manages all changes using the browser's local storage. Every change you make—such as adding, editing, or deleting components—is saved in local storage. This ensures your progress is not lost, even if you accidentally close the browser or navigate away.
 
 - **Auto-Save:** The builder periodically auto-saves your changes to local storage, so you don't have to worry about losing your work.
 - **Manual Save:** When the user clicks the Save button, the current state is also saved to local storage.
 
-### Getting HTML Content from Local Storage for Form Submission
+#### Example: Retrieving the Most Up-to-Date HTML Content for Form Submission
+
+The Page Builder uses auto-save, so the data you retrieve from local storage always reflects the latest state of the builder—what the user currently sees in the editor. This means you are getting the most up-to-date content, saved live as the user edits.
 
-To use the builder’s saved data in your form submission, you may want both the combined HTML content and the titles of each component. The PageBuilderClass provides a method to access the latest saved state from local storage. The example below demonstrates how to retrieve and parse this data, combining all component HTML into a single string and collecting all titles into an array. This is useful if you want to display or store both the rendered content and the structure or headings of your page.
+To use the builder’s saved data in your form submission, you may want both the combined HTML content and the titles of each component. The `PageBuilderClass` provides a method to access the latest saved state from local storage. The example below demonstrates how to retrieve and parse this data, combining all component HTML into a single string and collecting all titles into an array. This is useful if you want to display or store both the rendered content and the structure or headings of your page.
 
-You should call this logic when you want to submit or save the builder’s output, for example, when the user clicks a “Save” or “Publish” button. The code safely parses the local storage data, handles errors, and assigns the results to your form fields.
+**Important:**  
+To retrieve the correct content from local storage, you must pass the same `resourceData` (such as `formType` and `formName`) to the Page Builder that was used when the content was originally saved. If the resource data does not match, the Page Builder will look for a different local storage key and may not find the expected content.
 
-**Important:**
-To retrieve the correct content from local storage, you must pass the same resourceData (such as formType and formName) to the Page Builder that was used when the content was originally saved. If the resource data does not match, the Page Builder will look for a different local storage key and may not find the expected content.
 Example:
 
 ```js
@@ -406,224 +345,68 @@ const configPageBuilder = {
 }
 ```
 
-Example Getting HTML Content from Local Storage for Form Submission
+Call this logic when you want to submit or save the builder’s output, for example, when the user clicks a “Save” or “Publish” button. The code safely parses the local storage data, handles errors, and assigns the results to your form fields.
 
 ```vue
 <script setup>
-import {
-    PageBuilder,
-    PageBuilderClass,
-    sharedPageBuilderStore,
-} from "@myissue/vue-website-page-builder";
-import "@myissue/vue-website-page-builder/style.css";
-
-const pageBuilderStateStore = sharedPageBuilderStore;
-const pageBuilderService.= new PageBuilderClass(pageBuilderStateStore);
-
+import { getPageBuilder } from '@myissue/vue-website-page-builder'
 
 const configPageBuilder = {
   updateOrCreate: {
     formType: 'create',
     formName: 'article',
   },
-};
-
-await pageBuilderService.startBuilder(configPageBuilder);
+}
 
+// Retrieve Page Builder service instance
+const pageBuilderService = getPageBuilder()
+await pageBuilderService.startBuilder(configPageBuilder)
 
-let storedComponents = pageBuilderService.loadStoredComponentsFromStorage();
-let contentFromPageBuilder = "";
+let storedComponents = pageBuilderService.loadStoredComponentsFromStorage()
+let contentFromPageBuilder = ''
 
 try {
-    storedComponents = JSON.parse(storedComponents);
-    contentFromPageBuilder = storedComponents && Array.isArray(storedComponents.components)
-        ? storedComponents.components
-          .map((component) => component.html_code).join("")
-          : "";
+  storedComponents = JSON.parse(storedComponents)
+  contentFromPageBuilder =
+    storedComponents && Array.isArray(storedComponents.components)
+      ? storedComponents.components.map((component) => component.html_code).join('')
+      : ''
 } catch (e) {
-    console.error(
-        "Unable to parse storedComponents from localStorage:",
-        e
-    );
-    contentFromPageBuilder = "";
+  console.error('Unable to parse storedComponents from localStorage:', e)
+  contentFromPageBuilder = ''
 } finally {
-    yourForm.content = contentFromPageBuilder;
+  yourForm.content = contentFromPageBuilder
 }
-<script>
-```
-
-#### Resetting the Builder After Successful Resource Creation
-
-After you have successfully created a new resource (such as a post, article, or listing) using the Page Builder with formType: 'create', it is important to clear the builder’s draft state and remove the corresponding local storage entry. This ensures that old drafts do not appear the next time the builder is opened for a new resource.
-
-Always call these methods after a successful post or resource creation to ensure users start with a fresh builder the next time they create a new resource.
-
-```vue
-<script setup>
-import {
-    PageBuilder,
-    PageBuilderClass,
-    sharedPageBuilderStore,
-} from "@myissue/vue-website-page-builder";
-import "@myissue/vue-website-page-builder/style.css";
-
-const pageBuilderStateStore = sharedPageBuilderStore;
-const pageBuilderService.= new PageBuilderClass(pageBuilderStateStore);
-
-
-const configPageBuilder = {
-  updateOrCreate: {
-    formType: 'create',
-    formName: 'article',
-  },
-};
-
-await pageBuilderService.startBuilder(configPageBuilder);
-
-const createResource = async function(){
-pageBuilderService.deleteAllComponents();
-await pageBuilderService.removeItemComponentsLocalStorage();
-};
-<script>
-```
-
-#### Resetting the Builder After Successful Resource Update
-
-After you have successfully updated an existing resource (such as a post, article, or listing) using the Page Builder with formType: 'update', you should clear the builder’s state and remove the corresponding local storage entry. This prevents outdated drafts from being loaded the next time you edit the same resource.
-
-```vue
-<script setup>
-import {
-    PageBuilder,
-    PageBuilderClass,
-    sharedPageBuilderStore,
-} from "@myissue/vue-website-page-builder";
-import "@myissue/vue-website-page-builder/style.css";
-
-const pageBuilderStateStore = sharedPageBuilderStore;
-const pageBuilderService.= new PageBuilderClass(pageBuilderStateStore);
-
-
-const configPageBuilder = {
-  updateOrCreate: {
-    formType: 'update',
-    formName: 'article',
-  },
-};
-
-await pageBuilderService.startBuilder(configPageBuilder);
-
-const updateResource = async function() {
-  pageBuilderService.deleteAllComponents();
-  await pageBuilderService.removeItemComponentsLocalStorage();
-};
-
-<script>
-```
-
-#### Resource-Specific Storage Keys
-
-Each save is stored in local storage using a unique key. The key is determined by whether you are creating a new resource or updating an existing one:
-
-- **New Resource:** The key will be prefixed with `page-builder-create-resource`.
-- **Updating Resource:** The key will be prefixed with `page-builder-update-resource`.
-
-You can further customize and uniquely identify the storage key by providing a `formName` in your `configPageBuilder`:
-
-```vue
-<script setup>
-import {
-  PageBuilder,
-  PageBuilderClass,
-  sharedPageBuilderStore,
-} from '@myissue/vue-website-page-builder'
-import '@myissue/vue-website-page-builder/style.css'
-
-const configPageBuilder = {
-  updateOrCreate: {
-    // Set the resource type for better local storage and multi-resource support
-    formName: 'article',
-  },
-  // ...other config options
-}
-
-const pageBuilderService.= new PageBuilderClass(pageBuilderStateStore)
-
-await pageBuilderService.startBuilder(configPageBuilder)
-
-// Populating page builder with existing resource content
-pageBuilderService.mountComponentsToDOM(existingResourceFromBackend)
 </script>
-
-<template>
-  <PageBuilder />
-</template>
 ```
 
-This allows you to manage drafts for multiple resource types (e.g., articles, jobs, stores) independently in local storage.
-
-> **Tip:** The local storage key will automatically include the resource type if `formName` is provided, ensuring that drafts for different resource types do not overwrite each other.
-
-### Restoring Unfinished Drafts for New Resources
-
-If a user started creating a new resource but hasn't finished (e.g., they want to continue the next day), you can restore their draft from local storage:
-
-- Set `formType` to `"create"` in your config object.
-- The PageBuilder will automatically look for any saved draft in local storage (based on the resource type) and load it if available.
-
-**Example: Set `formType` to "create" for continuing a new resource draft**
-
-```vue
-<script setup>
-import {
-  PageBuilder,
-  PageBuilderClass,
-  sharedPageBuilderStore,
-} from '@myissue/vue-website-page-builder'
-import '@myissue/vue-website-page-builder/style.css'
-
-const pageBuilderStateStore = sharedPageBuilderStore
-
-const configPageBuilder = {
-  updateOrCreate: {
-    formType: 'create',
-    formName: 'article',
-  },
-}
+#### Resetting the Builder After Successful Resource Creation or Update
 
-const pageBuilderService.= new PageBuilderClass(pageBuilderStateStore)
+After you have successfully created or updated a resource (such as a post, article, or listing) using the Page Builder, it is important to clear the builder’s draft state and remove the corresponding local storage entry. This ensures that old drafts do not appear the next time the builder is opened for a new or existing resource.
 
-await pageBuilderService.startBuilder(configPageBuilder)
-</script>
+You can reset the builder state and clear the draft with:
 
-<template>
-  <PageBuilder />
-</template>
+```js
+// Delete the HTML from the Live DOM
+pageBuilderService.deleteAllComponents()
+// Clear Local Storage for the created or updated resource
+await pageBuilderService.removeItemComponentsLocalStorage()
 ```
 
-> **Tip:** Use `formType: 'create'` for new resources and `formType: 'update'` for editing existing resources. This ensures the correct local storage key is used and the right content is loaded.
+Always call these methods after a successful post or resource update to ensure users start with a fresh builder the next time they create or edit a resource.
 
 ### Loading Published Content from the Backend into the Page Builder
 
-To load existing content that was created with this PageBuilder from any backend:
+You can easily load existing content—created with this Page Builder—from any backend source.
 
-- Use `sharedPageBuilderStore` to ensure the external `PageBuilderClass` and internal `PageBuilder` component share the same state.
-- Import `PageBuilderClass` which contains all methods to manipulate and control the page builder state. Use the `mountComponentsToDOM()` method to load existing content into the page builder.
-- The `PageBuilderClass` uses the shared store to maintain state consistency between external operations and the internal `PageBuilder` component, ensuring that when you load content externally it appears correctly in the PageBuilder interface.
-- Set `formType` to `"update"` in your config object and pass it to the PageBuilder using `pageBuilderService.startBuilder(configPageBuilder)`. This tells the PageBuilder that you're editing an existing resource rather than creating a new one, which affects how the component handles data and interactions.
-
-**Example: Set `formType` to "update" for editing an existing resource**
+- **Set `formType` (required):** This tells the builder to look for the correct content in local storage. Set `formType` to `update`.
+- **Set `formName` (required):** Specify the resource type (for example, `"article"`, `"jobPost"`, `"store"`, etc.) in the `updateOrCreate` config.
+- Even when loading an existing resource, these values are important if your platform supports multiple resource types. By providing a unique name, the Page Builder can properly manage layouts and local storage for the resource, allowing users to pick up right where they left off.
 
 ```vue
 <script setup>
-import {
-  PageBuilder,
-  PageBuilderClass,
-  sharedPageBuilderStore,
-} from '@myissue/vue-website-page-builder'
-import '@myissue/vue-website-page-builder/style.css'
-
-const pageBuilderStateStore = sharedPageBuilderStore
+import { getPageBuilder } from '@myissue/vue-website-page-builder'
+import html from './html.json'
 
 const configPageBuilder = {
   updateOrCreate: {
@@ -632,26 +415,12 @@ const configPageBuilder = {
   },
 }
 
-const pageBuilderService.= new PageBuilderClass(pageBuilderStateStore)
-
-// Saved content in DB from already created content using the Page Builder
-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',
-  },
-]
+// Retrieve Page Builder service instance
+const pageBuilderService = getPageBuilder()
+await pageBuilderService.startBuilder(configPageBuilder)
 
-// Populating page builder with existing resource content from backend
-pageBuilderService.mountComponentsToDOM(existingResourceFromBackend)
+// Load content from your backend or a JSON file into the Page Buildder
+await pageBuilderService.mountComponentsToDOM(JSON.stringify(html))
 </script>
 
 <template>
@@ -659,49 +428,38 @@ pageBuilderService.mountComponentsToDOM(existingResourceFromBackend)
 </template>
 ```
 
-#### How should `existingResourceFromBackend` look?
-
-The example below shows the structure as it would appear when loaded from local storage after components have been added in the builder.
-
-- Example JSON string (from localStorage or backend)
-- For existing resources, id will always be present and set by the page builder.
-
-Example `existingResourceFromBackend`:
+**Note:**  
+Your `html.json` file should contain an array of component objects, each with a `html_code` and `title` (optional) property, as shown below:
 
 ```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"
-  }
-]
+{
+  "components": [
+    {
+      "html_code": "<section><div class=\"relative py-4\"><div class=\"mx-auto max-w-7xl lg:px-4 px-2\"><div class=\"pbx-break-words pbx-text-5xl\"><h2><strong>Demo Content</strong></h2></div></div></div></section>",
+      "title": "Header H2"
+    },
+    {
+      "html_code": "<section>...</section>",
+      "title": "Text"
+    }
+    // ...more components
+  ]
+}
 ```
 
-### Automatic Draft Recovery for Updates
+This approach ensures your users can seamlessly load and edit previously published content, providing a smooth and reliable editing experience.
+
+### Automatic Draft Recovery
 
-When you set `formType: 'update'` in your config, the Page Builder will automatically check for any unsaved draft in local storage for that resource.
-If a draft is found, the user will be prompted to either continue where they left off or use the version currently loaded from your backend.
+The Page Builder automatically checks for any unsaved drafts in local storage for the current resource.  
+If a draft is found, users will be prompted to either continue where they left off or use the version currently loaded from your backend.
 
-- `formName` (recommended): Specify the resource type (e.g., `"article"`, `"jobPost"`, `"store"`, etc.) in the `updateOrCreate` config. This is especially useful if your platform supports multiple resource types. By providing a unique name, the Page Builder can correctly manage layouts and local storage for each resource type, allowing users to continue where they left off for different resources.
-  - Pass a `userForPageBuilder` object in your config to display or use the logged-in user's information within the builder (e.g., name and user image).
-  - No extra setup is required—just set `formType: 'update'` and the feature is enabled by default.
+- **`formType` (required):** Used to retrieve the correct content from local storage. Set this to either `create` or `update` in the `updateOrCreate` config, depending on your use case.
+- **`formName` (required):** Specify the resource type (e.g., `"article"`, `"jobPost"`, `"store"`, etc.) in the `updateOrCreate` config. This is especially useful if your platform supports multiple resource types. By providing a unique name, the Page Builder can correctly manage layouts and local storage for each resource type, allowing users to continue where they left off for different resources.
 
 ```vue
 <script setup>
-import {
-  PageBuilder,
-  PageBuilderClass,
-  sharedPageBuilderStore,
-} from '@myissue/vue-website-page-builder'
-import '@myissue/vue-website-page-builder/style.css'
-
-const pageBuilderStateStore = sharedPageBuilderStore
+import { getPageBuilder } from '@myissue/vue-website-page-builder'
 
 const configPageBuilder = {
   updateOrCreate: {
@@ -710,8 +468,8 @@ const configPageBuilder = {
   },
 }
 
-const pageBuilderService.= new PageBuilderClass(pageBuilderStateStore)
-
+// Retrieve Page Builder service instance
+const pageBuilderService = getPageBuilder()
 await pageBuilderService.startBuilder(configPageBuilder)
 </script>
 
@@ -720,25 +478,13 @@ await pageBuilderService.startBuilder(configPageBuilder)
 </template>
 ```
 
-### Custom Components
-
-Want to add your own media library or Create custom components that can be injected into the page builder:
-
-📚 **[Custom Components Setup Guide](./CUSTOM_COMPONENTS_SETUP.md)** - Learn how to create and integrate your own components
+### Custom Media Library Component or Custom Layout Builder Component
 
-Example integration:
+You may extend the Page Builder by adding your own media library or custom layout builder Component.  
+Inject your components easily to tailor the builder to your application's needs.
 
-```javascript
-<script setup>
-import { PageBuilder } from '@myissue/vue-website-page-builder'
-import YourMediaLibraryComponent from './ComponentsPageBuilder/YourMediaLibraryComponent.vue'
-import YourCustomBuilderComponents from './ComponentsPageBuilder/YourCustomBuilderComponents.vue'
-</script>
-
-<template>
-  <PageBuilder :CustomMediaLibraryComponent="YourMediaLibraryComponent" :CustomBuilderComponents="YourCustomBuilderComponents" />
-</template>
-```
+📚 **[Custom Components Setup Guide](./CUSTOM_COMPONENTS_SETUP.md)**  
+Learn how to create and integrate your own components step by step.
 
 ## Troubleshooting
 
@@ -782,7 +528,3 @@ We would greatly appreciate it if you could star the GitHub repository. Starring
 ## License
 
 [MIT License](./LICENSE)
-
-```
-
-```