diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/event.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/event.md
index 7a8b90c73..2dd97736c 100644
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/event.md
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/event.md
@@ -819,7 +819,7 @@ The [keyboardCustomCommands](https://ej2.syncfusion.com/javascript/documentation
When it triggers
- After registering gestures in commandManager.keyboardCommand. For example, pressing Shift + Alt + G or Shift + Alt + H triggers the event. Use this to handle custom keyboard shortcuts.
-Refer to [Keyboard interaction](./accessibility.md#keyboard-interaction) for details about adding and handling custom shortcut keys.
+Refer to [Keyboard interaction](./accessibility#keyboard-interaction) for details about adding and handling custom shortcut keys.
Example:
```typescript
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/feature-module.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/feature-module.md
index 818de4855..91806dbf7 100644
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/feature-module.md
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/feature-module.md
@@ -15,17 +15,17 @@ The PDF Viewer features are provided as individual modules, allowing application
Available PDF Viewer modules:
* [**Toolbar**](./toolbar-customization): Built-in toolbar for user interaction.
-* [**Magnification**](./magnification.md): Perform zoom operations for a better viewing experience.
-* [**Navigation**](./interactive-pdf-navigation/page-navigation.md): Navigate across pages.
-* [**LinkAnnotation**](./interactive-pdf-navigation/table-of-content-navigation.md): Navigate within the document or to external destinations via hyperlinks.
-* [**ThumbnailView**](./interactive-pdf-navigation/page-thumbnail-navigation.md): Navigate within the document using page thumbnails.
-* [**BookmarkView**](./interactive-pdf-navigation/bookmark-navigation.md): Navigate using document bookmarks (table of contents).
-* [**TextSelection**](./textselection.md): Select and copy text from the document.
-* [**TextSearch**](./text-search.md): Search for text across the document.
-* [**Print**](./print.md): Print the entire document or specific pages directly from the browser.
-* [**Annotation**](./annotations/text-markup-annotation.md): Add and edit annotations.
-* [**FormFields**](./form-designer/create-programmatically.md): Work with form fields in the document.
-* [**FormDesigner**](./form-designer/create-programmatically.md): Add or edit form fields in the document.
+* [**Magnification**](./magnification): Perform zoom operations for a better viewing experience.
+* [**Navigation**](./interactive-pdf-navigation/page-navigation): Navigate across pages.
+* [**LinkAnnotation**](./interactive-pdf-navigation/table-of-content-navigation): Navigate within the document or to external destinations via hyperlinks.
+* [**ThumbnailView**](./interactive-pdf-navigation/page-thumbnail-navigation): Navigate within the document using page thumbnails.
+* [**BookmarkView**](./interactive-pdf-navigation/bookmark-navigation): Navigate using document bookmarks (table of contents).
+* [**TextSelection**](./textselection): Select and copy text from the document.
+* [**TextSearch**](./text-search): Search for text across the document.
+* [**Print**](./print): Print the entire document or specific pages directly from the browser.
+* [**Annotation**](./annotations/text-markup-annotation): Add and edit annotations.
+* [**FormFields**](./form-designer/create-programmatically): Work with form fields in the document.
+* [**FormDesigner**](./form-designer/create-programmatically): Add or edit form fields in the document.
> In addition to injecting the required modules in an application, enable the corresponding properties to activate features on a PDF Viewer instance.
Refer to the following table:
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to-overview.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to-overview.md
index f3001b43a..ed5e332c4 100644
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to-overview.md
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to-overview.md
@@ -12,54 +12,54 @@ domainurl: ##DomainURL##
The frequently asked questions in Essential® PDF Viewer are listed below.
-* [How to add annotation in text search in typescript?](./how-to/add-annotation-in-text-search-ts.md)
-* [How to add custom header to the PDF Viewer ajax request?](./how-to/add-header-value.md)
-* [How to add a save button to PDF Viewer toolbar?](./how-to/add-save-button-ts.md)
-* [How to customize the annotation selectors?](./how-to/annotation-selectors.md)
-* [How to change the author name of the annotation dynamically?](./how-to/change-author-name-using-annotation-settings.md)
-* [How to clear all the annotations from the PDF document?](./how-to/clear-annotations.md)
-* [How to configure the annotation selector settings?](./how-to/configure-annotationselector-setting-ts.md)
-* [What are the supported conformance or standards of PDF Viewer?](./how-to/conformance.md)
-* [How to control the visibility of the annotation?](./how-to/control-annotation-visibility-ts.md)
-* [How to convert the PDF library bounds to PDF Viewer bounds?](./how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds-ts.md)
-* [How to create PDF Viewer service using ASP.NET Core?](./how-to/create-pdfviewer-service-core.md)
-* [How to create PDF Viewer web service using ASP.NET MVC?](./how-to/create-pdfviewer-service.md)
-* [How to customize the context menu in PDF Viewer?](./how-to/custom-context-menu.md)
-* [How to add custom font in handwritten signature?](./how-to/custom-font-signature-field-ts.md)
-* [How to add custom fonts for form fields and free text annotations?](./how-to/custom-fonts-ts.md)
-* [How to customize text search highlight color in PDF Viewer?](./how-to/customize-text-search-color.md)
-* [How to delete a specific annotation from the PDF document?](./how-to/delete-annotation.md)
-* [How to disable the context menu?](./how-to/disable-context-menu.md)
-* [How to disable tile rendering in PDF Viewer?](./how-to/disable-tile-rendering.md)
-* [How to display custom tooltip for annotation?](./how-to/display-custom-tool-tip-for-annotation.md)
-* [How to get the download start event?](./how-to/download-start-event-ts.md)
-* [How to enable or disable the local storage?](./how-to/enable-local-storage-ts.md)
-* [Enable the resizer for text markup annotation?](./how-to/enable-resize.md)
-* [How to enable or disable the text selection?](./how-to/enable-text-selection-ts.md)
-* [How to export the PDF pages as images?](./how-to/export-as-image-ts.md)
-* [How to extract text from the PDF document?](./how-to/extract-text-completed-ts.md)
-* [How to extract text from a specific region?](./how-to/extract-text-option-ts.md)
-* [How to extract text from the PDF document?](./how-to/extract-text-ts.md)
-* [How to find the text in the PDF document asynchronously?](./how-to/find-text-async-ts.md)
-* [How to get the base64 string of the loaded document?](./how-to/get-base64-ts.md)
-* [How to get the page information of the loaded document?](./how-to/get-page-info-ts.md)
-* [How to perform highlight, underline, and strikethrough for the selected text?](./how-to/highlight-underline-strikeout-text.md)
-* [How to identify the added annotation and its mode?](./how-to/identify-added-annotation-mode.md)
-* [How to import annotations from the PDF document?](./how-to/import-annotations.md)
-* [How to import and export annotations in PDF Viewer?](./how-to/import-export-annotation-ts.md)
-* [How to load a PDF document in PDF Viewer?](./how-to/load-document.md)
-* [How to set the minimum and maximum zoom percentage?](./how-to/min-max-zoom-ts.md)
-* [How to open the bookmark pane when the document is loaded?](./how-to/open-bookmark-ts.md)
-* [How to open the thumbnail pane when the document is loaded?](./how-to/open-thumbnail.md)
-* [How to get the annotation when it is overlapped with another annotation on its selection?](./how-to/overlapped-annotation.md)
-* [How to get the page render started and completed event?](./how-to/pagerenderstarted-pagerendercompleted-ts.md)
-* [How to print the PDF document silently?](./how-to/print-document.md)
-* [How to resolve the `Unable to find an entry point named 'FreeExportedValues' in DLL 'pdfium''?](./how-to/resolve-unable-to-find-an-entry-point-error.md)
-* [How to restrict the zooming in mobile mode?](./how-to/restricting-zoom-in-mobile-mode-ts.md)
-* [How to save the PDF document to database or URL?](./how-to/save-pdf-document-to-url.md)
-* [How to select annotations in multi page?](./how-to/select-multi-page-annotations.md)
-* [How to show custom stamp item in the stamp annotation?](./how-to/show-custom-stamp-item-ts.md)
-* [How to show or hide a particular annotation?](./how-to/show-hide-annotation-ts.md)
-* [How to get the signature selected and unselected event?](./how-to/signatureselect-signatureunselect-ts.md)
-* [How to unload the PDF document from the viewer?](./how-to/unload-document.md)
+* [How to add annotation in text search in typescript?](./how-to/add-annotation-in-text-search-ts)
+* [How to add custom header to the PDF Viewer ajax request?](./how-to/add-header-value)
+* [How to add a save button to PDF Viewer toolbar?](./how-to/add-save-button-ts)
+* [How to customize the annotation selectors?](./how-to/annotation-selectors)
+* [How to change the author name of the annotation dynamically?](./how-to/change-author-name-using-annotation-settings)
+* [How to clear all the annotations from the PDF document?](./how-to/clear-annotations)
+* [How to configure the annotation selector settings?](./how-to/configure-annotationselector-setting-ts)
+* [What are the supported conformance or standards of PDF Viewer?](./how-to/conformance)
+* [How to control the visibility of the annotation?](./how-to/control-annotation-visibility-ts)
+* [How to convert the PDF library bounds to PDF Viewer bounds?](./how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds-ts)
+* [How to create PDF Viewer service using ASP.NET Core?](./how-to/create-pdfviewer-service-core)
+* [How to create PDF Viewer web service using ASP.NET MVC?](./how-to/create-pdfviewer-service)
+* [How to customize the context menu in PDF Viewer?](./how-to/custom-context-menu)
+* [How to add custom font in handwritten signature?](./how-to/custom-font-signature-field-ts)
+* [How to add custom fonts for form fields and free text annotations?](./how-to/custom-fonts-ts)
+* [How to customize text search highlight color in PDF Viewer?](./how-to/customize-text-search-color)
+* [How to delete a specific annotation from the PDF document?](./how-to/delete-annotation)
+* [How to disable the context menu?](./how-to/disable-context-menu)
+* [How to disable tile rendering in PDF Viewer?](./how-to/disable-tile-rendering)
+* [How to display custom tooltip for annotation?](./how-to/display-custom-tool-tip-for-annotation)
+* [How to get the download start event?](./how-to/download-start-event-ts)
+* [How to enable or disable the local storage?](./how-to/enable-local-storage-ts)
+* [Enable the resizer for text markup annotation?](./how-to/enable-resize)
+* [How to enable or disable the text selection?](./how-to/enable-text-selection-ts)
+* [How to export the PDF pages as images?](./how-to/export-as-image-ts)
+* [How to extract text from the PDF document?](./how-to/extract-text-completed-ts)
+* [How to extract text from a specific region?](./how-to/extract-text-option-ts)
+* [How to extract text from the PDF document?](./how-to/extract-text-ts)
+* [How to find the text in the PDF document asynchronously?](./how-to/find-text-async-ts)
+* [How to get the base64 string of the loaded document?](./how-to/get-base64-ts)
+* [How to get the page information of the loaded document?](./how-to/get-page-info-ts)
+* [How to perform highlight, underline, and strikethrough for the selected text?](./how-to/highlight-underline-strikeout-text)
+* [How to identify the added annotation and its mode?](./how-to/identify-added-annotation-mode)
+* [How to import annotations from the PDF document?](./how-to/import-annotations)
+* [How to import and export annotations in PDF Viewer?](./how-to/import-export-annotation-ts)
+* [How to load a PDF document in PDF Viewer?](./how-to/load-document)
+* [How to set the minimum and maximum zoom percentage?](./how-to/min-max-zoom-ts)
+* [How to open the bookmark pane when the document is loaded?](./how-to/open-bookmark-ts)
+* [How to open the thumbnail pane when the document is loaded?](./how-to/open-thumbnail)
+* [How to get the annotation when it is overlapped with another annotation on its selection?](./how-to/overlapped-annotation)
+* [How to get the page render started and completed event?](./how-to/pagerenderstarted-pagerendercompleted-ts)
+* [How to print the PDF document silently?](./how-to/print-document)
+* [How to resolve the `Unable to find an entry point named 'FreeExportedValues' in DLL 'pdfium''?](./how-to/resolve-unable-to-find-an-entry-point-error)
+* [How to restrict the zooming in mobile mode?](./how-to/restricting-zoom-in-mobile-mode-ts)
+* [How to save the PDF document to database or URL?](./how-to/save-pdf-document-to-url)
+* [How to select annotations in multi page?](./how-to/select-multi-page-annotations)
+* [How to show custom stamp item in the stamp annotation?](./how-to/show-custom-stamp-item-ts)
+* [How to show or hide a particular annotation?](./how-to/show-hide-annotation-ts)
+* [How to get the signature selected and unselected event?](./how-to/signatureselect-signatureunselect-ts)
+* [How to unload the PDF document from the viewer?](./how-to/unload-document)
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/custom-fonts-ts.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/custom-fonts-ts.md
index 0ff52ea48..5d39df28d 100644
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/custom-fonts-ts.md
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/custom-fonts-ts.md
@@ -10,6 +10,12 @@ domainurl: ##DomainURL##
# Add custom fonts in PDF Viewer
+The TypeScript PDF Viewer supports loading, editing, and saving custom fonts in form fields such as text boxes, list boxes, and drop-downs by using the customFonts property. Add the required TTF files to the resource URL directory used by the viewer so they can be loaded at runtime and used in forms.
+
+## Integrating Custom Font Collections into Form Fields in PDF Viewer
+
+To ensure proper rendering and saving of form fields that use custom fonts, especially when the fonts are not installed on the system, place the TTF files in the resource URL path referenced by the viewer and specify their names through the customFonts property (string array). These fonts will then be available for loading, editing, and saving form fields in the PDF.
+
To use custom fonts in the Syncfusion PDF Viewer, add the custom TTF files to the resource URL directory and configure the viewer to load them. Specify font file names using the `customFonts` property as an array of names.
Steps to add custom fonts
@@ -47,3 +53,5 @@ pdfviewer.appendTo('#PdfViewer');
{% endtabs %}
These steps integrate custom fonts into PDF documents displayed in the PDF Viewer.
+
+> Note: If a form field (TextBox, ListBox, DropDown) using a custom font has text larger than the field’s bounds, the downloaded PDF may render incorrectly in browsers or third‑party viewers. It displays correctly in the Syncfusion PDF Viewer. To avoid this, use a font size that fits within the field or enlarge the field before saving/downloading.
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/bookmark-navigation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/bookmark-navigation.md
index 3c478198d..7228df2ab 100644
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/bookmark-navigation.md
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/bookmark-navigation.md
@@ -1,7 +1,7 @@
---
layout: post
-title: Navigation in TypeScript PDF Viewer control | Syncfusion
-description: Learn here all about Navigation in Syncfusion TypeScript PDF Viewer control of Syncfusion Essential JS 2 and more.
+title: Bookmark Navigation in TypeScript PDF Viewer | Syncfusion
+description: Learn how to use bookmarks for quick navigation in the Syncfusion TypeScript PDF Viewer control, enhancing user experience and accessibility.
platform: document-processing
control: PDF Viewer
documentation: ug
@@ -75,5 +75,5 @@ document.getElementById('getBookmarks').addEventListener('click', () => {
## See also
-* [Toolbar items](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/toolbar/)
-* [Feature Modules](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/feature-module/)
\ No newline at end of file
+* [Toolbar items](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/toolbar)
+* [Feature Modules](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/feature-module)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/page-navigation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/page-navigation.md
index 53fac44a1..788414c2f 100644
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/page-navigation.md
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/page-navigation.md
@@ -1,7 +1,7 @@
---
layout: post
-title: Navigation in TypeScript PDF Viewer control | Syncfusion
-description: Learn here all about Navigation in Syncfusion TypeScript PDF Viewer control of Syncfusion Essential JS 2 and more.
+title: Page Navigation in TypeScript PDF Viewer | Syncfusion
+description: Explore how to navigate pages in the Syncfusion TypeScript PDF Viewer control using built-in options for seamless document viewing.
platform: document-processing
control: PDF Viewer
documentation: ug
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
# Navigation in TypeScript PDF Viewer control
-The ASP.NET Core PDF Viewer supports different internal and external navigations.
+The TypeScript PDF Viewer supports different internal and external navigations.
## Toolbar page navigation option
@@ -190,5 +190,5 @@ Find the [here](https://stackblitz.com/edit/5dqbkd?file=index.ts) to perform the
## See also
-* [Toolbar items](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/toolbar/)
-* [Feature Modules](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/feature-module/)
\ No newline at end of file
+* [Toolbar items](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/toolbar)
+* [Feature Modules](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/feature-module)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/page-thumbnail-navigation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/page-thumbnail-navigation.md
index 037785e7a..7da72932f 100644
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/page-thumbnail-navigation.md
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/page-thumbnail-navigation.md
@@ -1,7 +1,7 @@
---
layout: post
-title: Navigation in TypeScript PDF Viewer control | Syncfusion
-description: Learn here all about Navigation in Syncfusion TypeScript PDF Viewer control of Syncfusion Essential JS 2 and more.
+title: Thumbnail Navigation in TypeScript PDF Viewer | Syncfusion
+description: Discover how to navigate PDF pages using thumbnails in the Syncfusion TypeScript PDF Viewer control for a visual and intuitive experience.
platform: document-processing
control: PDF Viewer
documentation: ug
@@ -43,5 +43,5 @@ pdfviewer.appendTo('#PdfViewer');
## See also
-* [Toolbar items](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/toolbar/)
-* [Feature Modules](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/feature-module/)
\ No newline at end of file
+* [Toolbar items](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/toolbar)
+* [Feature Modules](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/feature-module)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/navigation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/navigation.md
index 074a5087d..5f3551d1b 100644
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/navigation.md
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/navigation.md
@@ -1,7 +1,7 @@
---
layout: post
title: Navigation in TypeScript PDF Viewer | Syncfusion
-description: Learn how to navigate PDF documents using the Syncfusion TypeScript PDF Viewer, including toolbar controls, programmatic navigation, bookmarks, thumbnails, hyperlinks, and table of contents.
+description: Learn to navigate PDFs in Syncfusion's TypeScript PDF Viewer using toolbar controls, bookmarks, thumbnails, and hyperlinks.
platform: document-processing
control: PDF Viewer
documentation: ug
@@ -352,5 +352,5 @@ pdfviewer.appendTo('#PdfViewer');
## See also
-* [Toolbar items](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/toolbar/)
-* [Feature modules](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/feature-module/)
+* [Toolbar items](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/toolbar)
+* [Feature modules](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/feature-module)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/organize-pdf.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/organize-pdf.md
new file mode 100644
index 000000000..3f1c247b2
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/organize-pdf.md
@@ -0,0 +1,217 @@
+---
+layout: post
+title: Organize Pages in Typescript PDF Viewer control | Syncfusion
+description: Learn here all about Organize Pages in Syncfusion Typescript PDF Viewer control of Syncfusion Essential JS 2 and more.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Organize Pages in Typescript PDF Viewer control
+
+The PDF Viewer allows you to manage your PDF documents efficiently by organizing pages seamlessly. Whether you need to add new pages, remove unnecessary ones, rotate pages, move pages within the document, and copy or duplicate pages, the PDF Viewer facilitates these tasks effortlessly.
+
+## Getting started
+
+To access the organize pages feature, simply open the PDF document in the PDF Viewer and navigate to the left vertical toolbar. Look for the `Organize Pages` option to begin utilizing these capabilities.
+
+
+
+The page organization support enables you to perform various actions such as rotating, rearranging, inserting, copying, and deleting pages within a PDF document using organize pages dialog.
+
+### Rotating PDF pages
+
+You can adjust the orientation of PDF pages to ensure proper alignment. The rotate icon offers the following options:
+
+* `Rotate clockwise`: Rotate the selected pages 90 degrees clockwise.
+* `Rotate counter-clockwise`: Rotate the selected pages 90 degrees counter-clockwise.
+
+### Rearranging PDF pages
+
+You can easily change the sequence of pages within your document using the drag and drop method:
+
+* `Drag and drop`: Click and drag a page thumbnail to the desired position within the document, then release it to rearrange the page order.
+
+
+
+### Inserting new pages
+
+Effortlessly add new pages to your document with the following options:
+
+* `Insert blank page left`: Insert a blank page to the left of the selected page using the respective icon.
+* `Insert blank page right`: Insert a blank page to the right of the selected page using the corresponding icon.
+
+### Deleting PDF pages
+
+Removing unwanted pages from your document is straight forward:
+
+* `Select pages to delete`: Click on the page thumbnails you wish to remove. You can select multiple pages at once.
+* `Delete selected pages`: Use the delete option in the organize pages pane to remove the selected pages from the document.
+
+### Copying PDF pages
+
+Duplicate the pages within your PDF document effortlessly:
+
+* `Select pages to copy`: Click on the page thumbnails you wish to duplicate. Use the copy option to create duplicates. When a page is copied, the duplicate is automatically added to the right of the selected page. Multiple copies can be made using the toolbar action.
+
+
+
+### Importing a PDF Document
+
+Seamlessly import a PDF document into your existing document:
+
+* `Import PDF document`: Click the **Import Document** button to import a PDF. If a page is selected, the imported document’s thumbnail will be inserted to the right of the selected page. If multiple or no pages are selected, the thumbnail will be added as the first page. When **Save** or **Save As** is clicked, the imported PDF will be merged with the current document. You can insert a blank page to the left or right of the imported thumbnail, delete it, or drag and drop it to reposition as needed.
+
+
+
+### Selecting all pages
+
+Make comprehensive adjustments by selecting all pages simultaneously. This facilitates efficient editing and formatting across the entire document.
+
+
+
+### Zooming Page Thumbnails
+
+Adjust the size of page thumbnails within the organizer panel for better visibility and precision when editing. The zoom functionality allows you to:
+
+* Increase or decrease the size of page thumbnails using the zoom slider
+* See more details on pages when zoomed in
+* View more pages simultaneously when zoomed out
+
+This feature is especially useful when working with documents containing complex layouts or small details that need careful examination during organization.
+
+
+
+### Real-time updates
+
+Witness instant changes in page organization reflected within the PDF Viewer. Simply click the **Save** button to preserve your modifications.
+
+### SaveAs functionality
+
+Safeguard your edits by utilizing the **Save As** feature. This enables you to download the modified version of the PDF document for future reference, ensuring that your changes are securely stored.
+
+## API's supported
+
+**enablePageOrganizer:** This API enables or disables the page organizer feature in the PDF Viewer. By default, it is set to `true`, indicating that the page organizer is enabled.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer} from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
+
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib";
+pdfviewer.enablePageOrganizer = true;
+pdfviewer.appendTo('#PdfViewer');
+
+{% endhighlight %}
+{% highlight ts tabtitle="Server-Backed" %}
+
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer} from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
+
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
+pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
+pdfviewer.enablePageOrganizer = true;
+pdfviewer.appendTo('#PdfViewer');
+
+{% endhighlight %}
+{% endtabs %}
+
+**isPageOrganizerOpen:** This API determines whether the page organizer dialog will be displayed automatically when a document is loaded into the PDF Viewer. By default, it is set to `false`, meaning the dialog is not displayed initially.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer} from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
+
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib";
+pdfviewer.isPageOrganizerOpen = true;
+pdfviewer.appendTo('#PdfViewer');
+
+{% endhighlight %}
+{% highlight ts tabtitle="Server-Backed" %}
+
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer} from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
+
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
+pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
+pdfviewer.isPageOrganizerOpen = true;
+pdfviewer.appendTo('#PdfViewer');
+
+{% endhighlight %}
+{% endtabs %}
+
+**pageOrganizerSettings:** This API allows control over various page management functionalities within the PDF Viewer. It includes options to enable or disable actions such as deleting, inserting, rotating, copying, importing and rearranging pages, as well as configuring thumbnail zoom settings. By default, all these actions are enabled and standard zoom settings are applied.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer} from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
+
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib";
+pdfviewer.pageOrganizerSettings = {canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true, canImport: true, imageZoom: 1, showImageZoomingSlider: true, imageZoomMin: 1, imageZoomMax: 5}
+pdfviewer.appendTo('#PdfViewer');
+
+{% endhighlight %}
+{% highlight ts tabtitle="Server-Backed" %}
+
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer} from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
+
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
+pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
+pdfviewer.pageOrganizerSettings = {canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true, canImport: true, imageZoom: 1, showImageZoomingSlider: true, imageZoomMin: 1, imageZoomMax: 5};
+pdfviewer.appendTo('#PdfViewer');
+
+{% endhighlight %}
+{% endtabs %}
+
+**openPageOrganizer:** This API opens the page organizer dialog within the PDF Viewer, providing access to manage PDF pages.
+
+```html
+
+```
+
+```ts
+document.getElementById('openPageOrganizer').addEventListener('click', function () {
+ viewer.pageOrganizer.openPageOrganizer();
+}
+```
+**closePageOrganizer:** This API closes the currently open page organizer dialog within the PDF Viewer, if it is present. It allows users to dismiss the dialog when done with page organization tasks.
+```html
+
+```
+```ts
+document.getElementById('closePageOrganizer').addEventListener('click', function () {
+ viewer.pageOrganizer.openPageOrganizer();
+}
+```
+## Keyboard shortcuts
+The following keyboard shortcuts are available at the organize pages dialog.
+* **Ctrl+Z** : Undo the last action performed.
+* **Ctrl+Y** : Redo the action that was undone
+* **Ctrl+Scroll** : Zoom in and zoom out page thumbnails for better visibility.
+
+#### Conclusion
+With the Organize Pages feature in the PDF Viewer, managing your PDF documents has never been easier. Whether you are adding new content, adjusting page orientation, moving the pages, duplicating the pages, or removing unnecessary pages, this feature provides the tools you need to streamline your document management workflow. Explore these capabilities today and take control of your PDF documents with ease!
+[View sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master/How%20to/Organize%20pdf)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/organize-pdf/organize-pdf-events.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/organize-pdf/organize-pdf-events.md
index 86c4415d5..4ca3948a2 100644
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/organize-pdf/organize-pdf-events.md
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/organize-pdf/organize-pdf-events.md
@@ -73,6 +73,6 @@ pdfviewer.appendTo('#PdfViewer');
## Related event documentation
-- Overall Viewer events: [Event](../event.md)
-- Annotation events: [Annotation events](../annotations/annotation-event.md)
-- Form designer events: [Form field events](../form-designer/form-field-events.md)
+- Overall Viewer events: [Event](../event)
+- Annotation events: [Annotation events](../annotations/annotation-event)
+- Form designer events: [Form field events](../form-designer/form-field-events)
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar.md
new file mode 100644
index 000000000..1bcf9061d
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar.md
@@ -0,0 +1,1607 @@
+---
+layout: post
+title: Toolbar in Typescript Pdfviewer control | Syncfusion
+description: Learn here all about Toolbar in Syncfusion Typescript Pdfviewer control of Syncfusion Essential JS 2 and more.
+platform: document-processing
+control: Toolbar
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Built-In Toolbar in Typescript PDF Viewer control
+
+The PDF Viewer comes with a powerful built-in toolbar to execute important actions such as page navigation, text search,view mode,download,print,bookmark, and thumbnails.
+
+The following table shows built-in toolbar items and its actions:-
+
+| Option | Description |
+|---|---|
+| OpenOption | This option provides an action to load the PDF documents to the PDF Viewer.|
+| PageNavigationTool | This option provides an action to navigate the pages in the PDF Viewer. It contains GoToFirstPage,GoToLastPage,GotoPage,GoToNext, and GoToLast tools.|
+| MagnificationTool | This option provides an action to magnify the pages either with predefined or user defined zoom factors in the PDF Viewer. Contains ZoomIn, ZoomOut, Zoom, FitPage and FitWidth tools.|
+| PanTool | This option provides an action for panning the pages in the PDF Viewer.|
+| SelectionTool | This option provides an action to enable/disable the text selection in the PDF Viewer.|
+| SearchOption | This option provides an action to search a word in the PDF documents.|
+| PrintOption | This option provides an action to print the PDF document being loaded in the PDF Viewer.|
+| DownloadOption |This Download option provides an action to download the PDF document that has been loaded in the PDF Viewer.|
+| UndoRedoTool | This tool provides options to undo and redo the annotation actions performed in the PDF Viewer.|
+| AnnotationEditTool | This tool provides options to enable or disable the edit mode of annotation in the PDF Viewer.|
+| FormDesignerEditTool | This tool provides options to enable or disable the edit mode of form fields in the PDF Viewer.|
+
+## Show/Hide the default toolbar
+
+The PDF Viewer has an option to show or hide the complete default toolbar. You can achieve this by using following two ways.,
+
+```html
+
+
+
+
+ Essential JS 2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+* **Show/Hide toolbar using enableToolbar API as in the following code snippet**
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
+ ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject( Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
+ BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner );
+
+let pdfviewer: PdfViewer = new PdfViewer({
+ enableToolbar: false,
+ documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+ resourceUrl:"https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib"
+});
+pdfviewer.appendTo('#PdfViewer');
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+ EJ2 PDF Viewer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Loading....
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+N> To set up the **server-backed PDF Viewer**,
+Add the below `serviceUrl` in the `index.ts` file
+`pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';`
+
+{% previewsample "Document-Processing/code-snippet/pdfviewer/javascript-es6/toolbar/toolbar-hide-cs1/index.html" %}
+
+* **Show/Hide toolbar using showToolbar as in the following code snippet**
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
+ BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject( Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
+ BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner );
+
+let pdfviewer: PdfViewer = new PdfViewer({
+ documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+ resourceUrl:"https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib"
+});
+pdfviewer.appendTo('#PdfViewer');
+document.getElementById('set').addEventListener('click', ()=> {
+ pdfviewer.toolbar.showToolbar(false);
+});
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+ EJ2 PDF Viewer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Loading....
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+N> To set up the **server-backed PDF Viewer**,
+Add the below [serviceUrl](https://ej2.syncfusion.com/documentation/api/pdfviewer/#serviceurl) in the `index.ts` file
+`pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';`
+
+{% previewsample "Document-Processing/code-snippet/pdfviewer/javascript-es6/toolbar/toolbar-method-cs1/index.html" %}
+
+## Show/Hide the default toolbaritem
+
+The PDF Viewer has an option to show or hide these grouped items in the default toolbar.
+
+* **Show/Hide toolbaritem using toolbarSettings as in the following code snippet.**
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
+ ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject( Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
+ BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner );
+
+let pdfviewer: PdfViewer = new PdfViewer({
+ documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+ resourceUrl:"https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib",
+ toolbarSettings: { showTooltip : true, toolbarItems: ['OpenOption']}
+});
+pdfviewer.appendTo('#PdfViewer');
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+ EJ2 PDF Viewer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Loading....
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+N> To set up the **server-backed PDF Viewer**,
+Add the below `serviceUrl` in the `index.ts` file
+`pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';`
+
+{% previewsample "Document-Processing/code-snippet/pdfviewer/javascript-es6/toolbar/toolbar-items-cs1/index.html" %}
+
+* **Show/Hide toolbaritem using showToolbaritem as in the following code snippet**
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
+ BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject( Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
+ BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner );
+
+let pdfviewer: PdfViewer = new PdfViewer({
+ documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+ resourceUrl:"https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib"
+});
+pdfviewer.appendTo('#PdfViewer');
+document.getElementById('set').addEventListener('click', ()=> {
+ pdfviewer.toolbar.showToolbarItem(["OpenOption"],false);
+});
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+
+
+
+
+ EJ2 PDF Viewer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Loading....
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+N> To set up the **server-backed PDF Viewer**,
+Add the below `serviceUrl` in the `index.ts` file
+`pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';`
+
+{% previewsample "Document-Processing/code-snippet/pdfviewer/javascript-es6/toolbar/toolbar-items-method-cs1/index.html" %}
+
+## Customize Built-In Toolbar
+
+PDF Viewer allows you to customize(add, show, hide, enable, and disable) existing items in a toolbar.
+
+* Add - New items can defined by [**CustomToolbarItemModel**](https://ej2.syncfusion.com/documentation/api/pdfviewer/customToolbarItemModel/) and with existing items in [**ToolbarSettings**](https://ej2.syncfusion.com/documentation/api/pdfviewer/toolbarSettings/) property. Newly added item click action can be defined in [`toolbarclick`](https://ej2.syncfusion.com/documentation/api/toolbar/clickEventArgs/).
+
+* Show, Hide - Existing items can be shown or hidden using the [`ToolbarSettings`](https://ej2.syncfusion.com/documentation/api/pdfviewer/toolbarSettings/) property. Pre-defined toolbar items are available with [`ToolbarItem`](https://ej2.syncfusion.com/documentation/api/pdfviewer/toolbarItem/).
+
+* Enable, Disable - Toolbar items can be enabled or disable using [`enabletoolbaritem`](https://ej2.syncfusion.com/documentation/api/pdfviewer/toolbar/#enabletoolbaritem)
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner,Print,CustomToolbarItemModel} from '@syncfusion/ej2-pdfviewer';
+import { ComboBox } from "@syncfusion/ej2-dropdowns";
+import { TextBox } from "@syncfusion/ej2-inputs";
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner,Print);
+let toolItem1: CustomToolbarItemModel = {
+ prefixIcon: 'e-icons e-paste',
+ id: 'print',
+ tooltipText: 'Custom toolbar item',
+};
+let toolItem2: CustomToolbarItemModel = {
+ id: 'download',
+ text: 'Save',
+ tooltipText: 'Custom toolbar item',
+ align: 'right'
+};
+let LanguageList: string[] = ['Typescript', 'Javascript', 'Angular', 'C#', 'C', 'Python'];
+let toolItem3: CustomToolbarItemModel = {
+ type: 'Input',
+ tooltipText: 'Language List',
+ cssClass: 'percentage',
+ align: 'Left',
+ id: 'dropdown',
+ template: new ComboBox({ width: 100, value: 'TypeScript', dataSource: LanguageList, popupWidth: 85, showClearButton: false, readonly: false })
+};
+let toolItem4: CustomToolbarItemModel = {
+ type: 'Input',
+ tooltipText: 'Text',
+ align: 'Right',
+ cssClass: 'find',
+ id: 'textbox',
+ template: new TextBox({ width: 125, placeholder: 'Type Here', created: OnCreateSearch })
+}
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
+pdfviewer.toolbarSettings = { toolbarItems: [toolItem1, toolItem2, 'OpenOption', 'PageNavigationTool', 'MagnificationTool', toolItem3, 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption', 'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', toolItem4, 'CommentTool', 'SubmitForm']}
+pdfviewer.appendTo('#PdfViewer');
+//To handle custom toolbar click event.
+pdfviewer.toolbarClick = function (args) {
+ if (args.item && args.item.id === 'print') {
+ pdfviewer.print.print();
+ }
+ else if (args.item && args.item.id === 'download') {
+ pdfviewer.download();
+ }
+};
+function OnCreateSearch(this: any): any {
+ this.addIcon('prepend', 'e-icons e-search');
+}
+
+{% endhighlight %}
+{% highlight js tabtitle="Server-Backed" %}
+
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner,Print,CustomToolbarItemModel} from '@syncfusion/ej2-pdfviewer';
+import { ComboBox } from "@syncfusion/ej2-dropdowns";
+import { TextBox } from "@syncfusion/ej2-inputs";
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner,Print);
+let toolItem1: CustomToolbarItemModel = {
+ prefixIcon: 'e-icons e-paste',
+ id: 'print',
+ tooltipText: 'Custom toolbar item',
+};
+let toolItem2: CustomToolbarItemModel = {
+ id: 'download',
+ text: 'Save',
+ tooltipText: 'Custom toolbar item',
+ align: 'right'
+};
+let LanguageList: string[] = ['Typescript', 'Javascript', 'Angular', 'C#', 'C', 'Python'];
+let toolItem3: CustomToolbarItemModel = {
+ type: 'Input',
+ tooltipText: 'Language List',
+ cssClass: 'percentage',
+ align: 'Left',
+ id: 'dropdown',
+ template: new ComboBox({ width: 100, value: 'TypeScript', dataSource: LanguageList, popupWidth: 85, showClearButton: false, readonly: false })
+};
+let toolItem4: CustomToolbarItemModel = {
+ type: 'Input',
+ tooltipText: 'Text',
+ align: 'Right',
+ cssClass: 'find',
+ id: 'textbox',
+ template: new TextBox({ width: 125, placeholder: 'Type Here', created: OnCreateSearch })
+}
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
+pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
+pdfviewer.toolbarSettings = { toolbarItems: [toolItem1, toolItem2, 'OpenOption', 'PageNavigationTool', 'MagnificationTool', toolItem3, 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption', 'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', toolItem4, 'CommentTool', 'SubmitForm']}
+pdfviewer.appendTo('#PdfViewer');
+//To handle custom toolbar click event.
+pdfviewer.toolbarClick = function (args) {
+ if (args.item && args.item.id === 'print') {
+ pdfviewer.print.print();
+ }
+ else if (args.item && args.item.id === 'download') {
+ pdfviewer.download();
+ }
+};
+function OnCreateSearch(this: any): any {
+ this.addIcon('prepend', 'e-icons e-search');
+}
+{% endhighlight %}
+{% endtabs %}
+
+N> Default value of toolbar items is ['OpenOption', 'PageNavigationTool','MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption','UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm']
+
+### Align Property
+
+The align property is used to specify the alignment of a toolbar item within the toolbar.
+
+`Left`: Aligns the item to the left side of the toolbar.
+`Right`: Aligns the item to the right side of the toolbar.
+
+### Tooltip Property
+
+The tooltip property is used to set the tooltip text for a toolbar item. Tooltip provides additional information when a user hovers over the item.
+
+### CssClass Property
+
+The cssClass property is used to apply custom CSS classes to a toolbar item. It allows custom styling of the toolbar item.
+
+### Prefix Property
+
+The prefix property is used to set the CSS class or icon that should be added as a prefix to the existing content of the toolbar item.
+
+### ID Property
+
+The id property within a CustomToolbarItemModel is a compulsory attribute that plays a vital role in toolbar customization. It serves as a unique identifier for each toolbar item, facilitating distinct references and interactions.
+
+When defining or customizing toolbar items, it is mandatory to assign a specific and descriptive id to each item.
+These properties are commonly used when defining custom toolbar items with the `CustomToolbarItemModel`` in the context of Syncfusion PDF Viewer. When configuring the toolbar using the `ToolbarSettings`` property, you can include these properties to customize the appearance and behavior of each toolbar item.
+
+N> When customizing toolbar items, you have the flexibility to include either icons or text based on your design preference.
+
+[View sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master/How%20to/customize%20existing%20toolbar)
+
+## Custom Toolbar
+
+The PDF Viewer provides API for user interactions options provided in it's built-in toolbar. Using this we can create our own User Interface for toolbar actions in application level by hiding the default toolbar. The following steps are used to create the custom toolbar for PDF Viewer,
+
+**Step 1:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) to create simple PDF Viewer sample.
+
+**Step 2:** Now, add an HTML div element to act as the custom toolbar PDF Viewer using the following code.
+
+```html
+
+
+
+
+ Essential JS 2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+**Step 3:** Import and inject the modules used for the custom toolbar,
+
+```ts
+import {
+ PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print,
+ IPageChangeEventArgs, ILoadEventArgs, TextSearch, TextSelection
+} from '@syncfusion/ej2-pdfviewer';
+import { Toolbar as Tool, TreeView, NodeSelectEventArgs } from '@syncfusion/ej2-navigations';
+import { ClickEventArgs, Button, CheckBox, ChangeEventArgs } from '@syncfusion/ej2-buttons';
+import { Dialog } from '@syncfusion/ej2-popups';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSearch, TextSelection);
+
+```
+
+**Step 4:** Hide the default toolbar of PDF Viewer using below code snippet,
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+```ts
+
+ PdfViewer viewer = new PdfViewer({
+ enableToolbar: false,
+ enableThumbnail: false,
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf'
+ });
+ viewer.appendTo('#pdfViewer');
+
+```
+{% endhighlight %}
+{% highlight ts tabtitle="Server-Backed" %}
+
+```ts
+
+ PdfViewer viewer = new PdfViewer({
+ enableToolbar: false,
+ enableThumbnail: false,
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf',
+ serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'
+ });
+ viewer.appendTo('#pdfViewer');
+
+```
+{% endhighlight %}
+{% endtabs %}
+
+**Step 5:** Add EJ2 Toolbar for perform primary actions like Open, Previous page, Next page, Go to page,Print and Download using the following code snippet,
+
+```ts
+ Tool toolbarObj = new Tool({
+ items: [
+ { prefixIcon: 'e-pv-open-document', tooltipText: 'Open', id: 'openButton', click: openDocument.bind(this) },
+ { prefixIcon: 'e-pv-bookmark-icon', tooltipText: 'Bookmark', id: 'bookmarkButton', click: bookmarkClicked },
+ // tslint:disable-next-line:max-line-length
+ { prefixIcon: 'e-pv-previous-page-navigation-icon', id: 'previousPage', tooltipText: 'Previous Page', align: 'Center', click: previousClicked.bind(this) },
+ // tslint:disable-next-line:max-line-length
+ { prefixIcon: 'e-pv-next-page-navigation-icon', id: 'nextPage', tooltipText: 'Next Page', align: 'Center', click: nextClicked.bind(this) },
+ { template: inputTemplate, tooltipText: 'Page Number', align: 'Center' },
+ { template: ele, tooltipText: 'Page Number', align: 'Center' },
+ { prefixIcon: 'e-pv-search-icon', tooltipText: 'Text Search', align: 'Right', click: searchClicked.bind(this) },
+ { prefixIcon: 'e-pv-print-document-icon', tooltipText: 'Print', align: 'Right', click: printClicked.bind(this) },
+ { prefixIcon: 'e-pv-download-document-icon', tooltipText: 'Download', align: 'Right', click: downloadClicked.bind(this) }
+ ]
+ });
+ toolbarObj.appendTo('#topToolbar');
+
+```
+
+**Step 6:** Add EJ2 Toolbar for perform magnification actions in PDF Viewer using following code snippet,
+
+```ts
+
+ let magnificationToolbar: Tool = new Tool({
+ items: [
+ { prefixIcon: 'e-pv-fit-page-icon', id: 'fitPage', tooltipText: 'Fit to page', click: pageFitClicked.bind(this) },
+ { prefixIcon: 'e-pv-zoom-in-icon', id: 'zoomIn', tooltipText: 'Zoom in', click: zoomInClicked.bind(this) },
+ { prefixIcon: 'e-pv-zoom-out-icon', id: 'zoomOut', tooltipText: 'Zoom out', click: zoomOutClicked.bind(this) },
+ ]
+ });
+ magnificationToolbar.appendTo('#magnificationToolbar');
+
+```
+
+**Step 7:** Add the following style to achieve the custom toolbar styling,
+
+```
+
+```
+
+>The icons are embedded in the font file used in above code snippet.
+
+**Step 8:** Add the following scripts for performing user interaction in PDF Viewer in code behind
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+```ts
+
+import {
+ PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print,
+ IPageChangeEventArgs, ILoadEventArgs, TextSearch, TextSelection
+} from '@syncfusion/ej2-pdfviewer';
+import { Toolbar as Tool, TreeView, NodeSelectEventArgs } from '@syncfusion/ej2-navigations';
+import { ClickEventArgs, Button, CheckBox, ChangeEventArgs } from '@syncfusion/ej2-buttons';
+import { Dialog } from '@syncfusion/ej2-popups';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSearch, TextSelection);
+
+/**
+ * Default PdfViewer sample
+ */
+
+let inputTemplate: string = '';
+let ele: string = '
';
+let isBookmarkOpen: boolean = false;
+let isBookmarkClick: boolean = false;
+let isTextSearchBoxOpen: boolean = false;
+let bookmarkPopup: Dialog;
+let textSearchPopup: Dialog;
+let toolbarObj: Tool;
+let viewer: PdfViewer;
+let currentPageBox: HTMLElement;
+let searchInput: HTMLElement;
+let searchButton: HTMLElement;
+let matchCase: boolean = false;
+
+function previousClicked(args: ClickEventArgs): void {
+ hidePopups();
+ viewer.navigation.goToPreviousPage();
+}
+
+function hidePopups(): void {
+ isBookmarkOpen = false;
+ isTextSearchBoxOpen = false;
+ bookmarkPopup.hide();
+ textSearchPopup.hide();
+}
+
+function bookmarkClicked(): void {
+ textSearchPopup.hide();
+ if (!isBookmarkOpen) {
+ let bookmarkDetails: any = viewer.bookmark.getBookmarks();
+ if (bookmarkDetails.bookmarks) {
+ let bookmarks: any = bookmarkDetails.bookmarks.bookMark;
+ let treeObj: TreeView = new TreeView({
+ fields:
+ {
+ dataSource: bookmarks,
+ id: 'Id',
+ parentID: 'Pid',
+ text: 'Title',
+ hasChildren: 'HasChild',
+ }, nodeSelected: nodeClick
+ });
+ treeObj.appendTo('#bookmarkview');
+ bookmarkPopup.show();
+ isBookmarkOpen = true;
+ isBookmarkClick = true;
+ } else {
+ toolbarObj.enableItems(document.getElementById('bookmarkButton'), false);
+ isBookmarkOpen = false;
+ }
+ } else {
+ if (!isBookmarkClick) {
+ bookmarkPopup.show();
+ isBookmarkClick = true;
+ } else {
+ bookmarkPopup.hide();
+ isBookmarkClick = false;
+ }
+ }
+}
+
+function nextClicked(args: ClickEventArgs): void {
+ hidePopups();
+ viewer.navigation.goToNextPage();
+}
+
+function searchClicked(args: ClickEventArgs): void {
+ bookmarkPopup.hide();
+ if (!isTextSearchBoxOpen) {
+ textSearchPopup.show();
+ } else {
+ viewer.textSearch.cancelTextSearch();
+ textSearchPopup.hide();
+ }
+ isTextSearchBoxOpen = !isTextSearchBoxOpen;
+}
+
+function printClicked(args: ClickEventArgs): void {
+ hidePopups();
+ viewer.print.print();
+}
+
+function downloadClicked(args: ClickEventArgs): void {
+ hidePopups();
+ viewer.download();
+}
+
+function pageFitClicked(args: ClickEventArgs): void {
+ hidePopups();
+ viewer.magnification.fitToPage();
+ updateZoomButtons();
+ toolbarObj.enableItems(document.getElementById('fitPage'), false);
+}
+
+function zoomInClicked(args: ClickEventArgs): void {
+ hidePopups();
+ viewer.magnification.zoomIn();
+ updateZoomButtons();
+}
+
+function zoomOutClicked(args: ClickEventArgs): void {
+ hidePopups();
+ viewer.magnification.zoomOut();
+ updateZoomButtons();
+}
+
+function onCurrentPageBoxKeypress(event: KeyboardEvent): boolean {
+ if ((event.which < 48 || event.which > 57) && event.which !== 8 && event.which !== 13) {
+ event.preventDefault();
+ return false;
+ } else {
+ // tslint:disable-next-line:radix
+ let currentPageNumber: number = parseInt((currentPageBox as HTMLInputElement).value);
+ if (event.which === 13) {
+ if (currentPageNumber > 0 && currentPageNumber <= viewer.pageCount) {
+ viewer.navigation.goToPage(currentPageNumber);
+ } else {
+ (currentPageBox as HTMLInputElement).value = viewer.currentPageNumber.toString();
+ }
+ }
+ return true;
+ }
+}
+
+function onCurrentPageBoxClicked(): void {
+ (currentPageBox as HTMLInputElement).select();
+ (currentPageBox).focus();
+}
+
+function readFile(args: any): void {
+ // tslint:disable-next-line
+ let upoadedFiles: any = args.target.files;
+ if (args.target.files[0] !== null) {
+ let uploadedFile: File = upoadedFiles[0];
+ if (uploadedFile) {
+ let reader: FileReader = new FileReader();
+ let filename: string = upoadedFiles[0].name;
+ reader.readAsDataURL(uploadedFile);
+ // tslint:disable-next-line
+ reader.onload = (e: any): void => {
+ let uploadedFileUrl: string = e.currentTarget.result;
+ viewer.load(uploadedFileUrl, null);
+ viewer.fileName = filename;
+ (currentPageBox as HTMLInputElement).value = '1';
+ document.getElementById('totalPage').textContent = 'of ' + viewer.pageCount;
+ document.getElementById('bookmarkview').innerHTML = '';
+ isBookmarkOpen = false;
+ };
+ }
+ }
+}
+
+function openDocument(e: ClickEventArgs): void {
+ document.getElementById('fileUpload').click();
+}
+
+function updatePageNavigation(): void {
+ if (viewer.currentPageNumber === 1) {
+ toolbarObj.enableItems(document.getElementById('previousPage'), false);
+ toolbarObj.enableItems(document.getElementById('nextPage'), true);
+ } else if (viewer.currentPageNumber === viewer.pageCount) {
+ toolbarObj.enableItems(document.getElementById('previousPage'), true);
+ toolbarObj.enableItems(document.getElementById('nextPage'), false);
+ } else {
+ toolbarObj.enableItems(document.getElementById('previousPage'), true);
+ toolbarObj.enableItems(document.getElementById('nextPage'), true);
+ }
+}
+
+function updateZoomButtons(): void {
+ if (viewer.zoomPercentage <= 50) {
+ toolbarObj.enableItems(document.getElementById('zoomIn'), true);
+ toolbarObj.enableItems(document.getElementById('zoomOut'), false);
+ toolbarObj.enableItems(document.getElementById('fitPage'), true);
+ } else if (viewer.zoomPercentage >= 400) {
+ toolbarObj.enableItems(document.getElementById('zoomIn'), false);
+ toolbarObj.enableItems(document.getElementById('zoomOut'), true);
+ toolbarObj.enableItems(document.getElementById('fitPage'), true);
+ } else {
+ toolbarObj.enableItems(document.getElementById('zoomIn'), true);
+ toolbarObj.enableItems(document.getElementById('zoomOut'), true);
+ toolbarObj.enableItems(document.getElementById('fitPage'), true);
+ }
+}
+
+function nodeClick(args: NodeSelectEventArgs): boolean {
+ let bookmarksDetails: any = viewer.bookmark.getBookmarks();
+ let bookmarksDestination: any = bookmarksDetails.bookmarksDestination;
+ let bookid: number = Number(args.nodeData.id);
+ let pageIndex: number = bookmarksDestination.bookMarkDestination[bookid].PageIndex;
+ let Y: number = bookmarksDestination.bookMarkDestination[bookid].Y;
+ viewer.bookmark.goToBookmark(pageIndex, Y);
+ return false;
+}
+
+function searchInputKeypressed(event: KeyboardEvent): void {
+ enablePrevButton(true);
+ enableNextButton(true);
+ if (event.which === 13) {
+ initiateTextSearch();
+ updateSearchInputIcon(false);
+ }
+}
+
+function searchClickHandler(): void {
+ if (searchButton.classList.contains('e-pv-search-icon')) {
+ viewer.textSearch.cancelTextSearch();
+ initiateTextSearch();
+ } else if (searchButton.classList.contains('e-pv-search-close')) {
+ (searchInput as HTMLInputElement).value = '';
+ searchInput.focus();
+ viewer.textSearch.cancelTextSearch();
+ }
+}
+
+function initiateTextSearch(): void {
+ let searchString: string = (searchInput as HTMLInputElement).value;
+ viewer.textSearch.searchText(searchString, matchCase);
+}
+
+function previousSearchClicked(): void {
+ let searchString: string = (searchInput as HTMLInputElement).value;
+ if (searchString) {
+ viewer.textSearch.searchPrevious();
+ }
+}
+
+function nextSearchClicked(): void {
+ let searchString: string = (searchInput as HTMLInputElement).value;
+ if (searchString) {
+ viewer.textSearch.searchNext();
+ }
+}
+
+function checkBoxChanged(args: ChangeEventArgs): void {
+ if (args.checked) {
+ matchCase = true;
+ } else {
+ matchCase = false;
+ }
+ initiateTextSearch();
+}
+
+function enablePrevButton(isEnable: boolean): void {
+ let previousSearchButton: HTMLElement = document.getElementById('previousSearch');
+ if (isEnable) {
+ previousSearchButton.removeAttribute('disabled');
+ } else {
+ (previousSearchButton as HTMLButtonElement).disabled = true;
+ }
+}
+
+function enableNextButton(isEnable: boolean): void {
+ let nextSearchButton: HTMLElement = document.getElementById('nextSearch');
+ if (isEnable) {
+ nextSearchButton.removeAttribute('disabled');
+ } else {
+ (nextSearchButton as HTMLButtonElement).disabled = true;
+ }
+}
+
+function updateSearchInputIcon(isEnable: boolean): void {
+ if (isEnable) {
+ searchButton.classList.remove('e-pv-search-close');
+ searchButton.classList.add('e-pv-search-icon');
+ } else {
+ searchButton.classList.remove('e-pv-search-icon');
+ searchButton.classList.add('e-pv-search-close');
+ }
+}
+
+
+ toolbarObj = new Tool({
+ items: [
+ { prefixIcon: 'e-pv-open-document', tooltipText: 'Open', id: 'openButton', click: openDocument.bind(this) },
+ { prefixIcon: 'e-pv-bookmark-icon', tooltipText: 'Bookmark', id: 'bookmarkButton', click: bookmarkClicked },
+ // tslint:disable-next-line:max-line-length
+ { prefixIcon: 'e-pv-previous-page-navigation-icon', id: 'previousPage', tooltipText: 'Previous Page', align: 'Center', click: previousClicked.bind(this) },
+ // tslint:disable-next-line:max-line-length
+ { prefixIcon: 'e-pv-next-page-navigation-icon', id: 'nextPage', tooltipText: 'Next Page', align: 'Center', click: nextClicked.bind(this) },
+ { template: inputTemplate, tooltipText: 'Page Number', align: 'Center' },
+ { template: ele, tooltipText: 'Page Number', align: 'Center' },
+ { prefixIcon: 'e-pv-search-icon', tooltipText: 'Text Search', align: 'Right', click: searchClicked.bind(this) },
+ { prefixIcon: 'e-pv-print-document-icon', tooltipText: 'Print', align: 'Right', click: printClicked.bind(this) },
+ { prefixIcon: 'e-pv-download-document-icon', tooltipText: 'Download', align: 'Right', click: downloadClicked.bind(this) }
+ ]
+ });
+ toolbarObj.appendTo('#topToolbar');
+ let magnificationToolbar: Tool = new Tool({
+ items: [
+ { prefixIcon: 'e-pv-fit-page-icon', id: 'fitPage', tooltipText: 'Fit to page', click: pageFitClicked.bind(this) },
+ { prefixIcon: 'e-pv-zoom-in-icon', id: 'zoomIn', tooltipText: 'Zoom in', click: zoomInClicked.bind(this) },
+ { prefixIcon: 'e-pv-zoom-out-icon', id: 'zoomOut', tooltipText: 'Zoom out', click: zoomOutClicked.bind(this) },
+ ]
+ });
+ magnificationToolbar.appendTo('#magnificationToolbar');
+ viewer = new PdfViewer({
+ enableToolbar: false,
+ enableThumbnail: false,
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf',
+ serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'
+ });
+ viewer.appendTo('#pdfViewer');
+ document.getElementById('fileUpload').addEventListener('change', readFile, false);
+ currentPageBox = document.getElementById('currentPage');
+ (currentPageBox as HTMLInputElement).value = '1';
+ searchInput = document.getElementById('searchInput');
+ bookmarkPopup = new Dialog({
+ showCloseIcon: true, header: 'Bookmarks', closeOnEscape: false, isModal: false, target: document.getElementById('pdfViewer'),
+ content: '',
+ buttons: [{
+ buttonModel: {},
+ }], position: { X: 'left', Y: 'top' }, cssClass: 'e-bookmark-popup', beforeClose: (): void => {
+ isBookmarkOpen = false;
+ }
+ });
+ bookmarkPopup.appendTo('#popup');
+
+ textSearchPopup = new Dialog({
+ showCloseIcon: false, closeOnEscape: false, isModal: false, target: document.getElementById('pdfViewer'),
+ buttons: [{
+ buttonModel: {},
+ }], position: { X: 'right', Y: 'top' }, cssClass: 'e-text-search-popup',
+ });
+ textSearchPopup.appendTo('#textSearchBox');
+
+ let previousSearch: Button = new Button({ iconCss: 'e-pv-previous-search' });
+ previousSearch.appendTo('#previousSearch');
+
+ let nextSearch: Button = new Button({ iconCss: 'e-pv-next-search-btn' });
+ nextSearch.appendTo('#nextSearch');
+
+ let matchCaseCheck: CheckBox = new CheckBox({ label: 'Match case', change: checkBoxChanged });
+ matchCaseCheck.appendTo('#matchCase');
+
+ viewer.pageChange = (args: IPageChangeEventArgs): void => {
+ (currentPageBox as HTMLInputElement).value = viewer.currentPageNumber.toString();
+ updatePageNavigation();
+ };
+
+ viewer.documentLoad = (args: ILoadEventArgs): void => {
+ document.getElementById('totalPage').textContent = 'of ' + viewer.pageCount;
+ updatePageNavigation();
+ };
+ searchButton = document.getElementById('searchBtn');
+ searchInput.addEventListener('focus', () => { searchInput.parentElement.classList.add('e-input-focus'); });
+ searchInput.addEventListener('blur', () => { searchInput.parentElement.classList.remove('e-input-focus'); });
+ searchInput.addEventListener('keypress', searchInputKeypressed);
+ document.getElementById('previousSearch').addEventListener('click', previousSearchClicked);
+ document.getElementById('nextSearch').addEventListener('click', nextSearchClicked);
+ currentPageBox.addEventListener('keypress', onCurrentPageBoxKeypress);
+ currentPageBox.addEventListener('click', onCurrentPageBoxClicked);
+ searchButton.addEventListener('click', searchClickHandler);
+ bookmarkPopup.hide();
+ textSearchPopup.hide();
+ enableNextButton(false);
+ enablePrevButton(false);
+
+```
+{% endhighlight %}
+{% endtabs %}
+
+Sample :
+[https://document.syncfusion.com/demos/pdf-viewer/javascript/#/tailwind3/pdfviewer/custom-toolbar.html](https://document.syncfusion.com/demos/pdf-viewer/javascript/#/tailwind3/pdfviewer/custom-toolbar.html)
+
+## How to customize the default toolbar with desired tools
+
+Customize the default toolbar with the required tools by using the [toolbarSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/#toolbarsettings) class of the PDF viewer.
+
+The following code illustrates how to render the default toolbar with specific tools.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+```ts
+
+
+
+
+```
+{% endhighlight %}
+{% highlight ts tabtitle="Server-Backed" %}
+```ts
+
+
+
+
+```
+{% endhighlight %}
+{% endtabs %}
+
+[View sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/Toolbar/Toolbar%20customization).
+
+## See also
+
+* [Toolbar customization](./how-to/toolbar-customization)
+* [Feature Modules](./feature-module)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/event.md b/Document-Processing/PDF/PDF-Viewer/vue/event.md
index 0cd8e10cc..938ddf1e7 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/event.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/event.md
@@ -2261,7 +2261,7 @@ The [keyboardCustomCommands](https://ej2.syncfusion.com/vue/documentation/api/pd
When it triggers
- After registering gestures in commandManager.keyboardCommand. For example, pressing Shift + Alt + G or Shift + Alt + H triggers the event. Use this to handle custom keyboard shortcuts.
-Refer to [Keyboard interaction](./accessibility.md#keyboard-interaction) for details about adding and handling custom shortcut keys.
+Refer to [Keyboard interaction](./accessibility#keyboard-interaction) for details about adding and handling custom shortcut keys.
Example:
```html
@@ -3891,6 +3891,6 @@ export default {
## See also
-- [Annotation events](./annotations/annotation-event.md)
-- [Form field events](./form-designer/form-field-events.md)
-- [Organize PDF events](./organize-pdf/organize-pdf-events.md)
+- [Annotation events](./annotations/annotation-event)
+- [Form field events](./form-designer/form-field-events)
+- [Organize PDF events](./organize-pdf/organize-pdf-events)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/feature-module.md b/Document-Processing/PDF/PDF-Viewer/vue/feature-module.md
index 524baacf8..ee6a3741c 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/feature-module.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/feature-module.md
@@ -14,18 +14,18 @@ The PDF Viewer features are provided as individual modules, allowing application
Available PDF Viewer modules:
-* [**Toolbar**](./toolbar-customization/annotation-toolbar-customization.md): Built-in toolbar for user interaction.
-* [**Magnification**](./magnification.md): Perform zoom operations for a better viewing experience.
-* [**Navigation**](./interactive-pdf-navigation/page-navigation.md): Navigate across pages.
-* [**LinkAnnotation**](./interactive-pdf-navigation/table-of-content-navigation.md): Navigate within the document or to external destinations via hyperlinks.
-* [**ThumbnailView**](./interactive-pdf-navigation/page-thumbnail-navigation.md): Navigate within the document using page thumbnails.
-* [**BookmarkView**](./interactive-pdf-navigation/bookmark-navigation.md): Navigate using document bookmarks (table of contents).
-* [**TextSelection**](./textselection.md): Select and copy text from the document.
-* [**TextSearch**](./text-search.md): Search for text across the document.
-* [**Print**](./print.md): Print the entire document or specific pages directly from the browser.
-* [**Annotation**](./annotations/text-markup-annotation.md): Add and edit annotations.
-* [**FormFields**](./form-designer/create-programmatically.md): Work with form fields in the document.
-* [**FormDesigner**](./form-designer/create-programmatically.md): Add or edit form fields in the document.
+* [**Toolbar**](./toolbar-customization/annotation-toolbar-customization): Built-in toolbar for user interaction.
+* [**Magnification**](./magnification): Perform zoom operations for a better viewing experience.
+* [**Navigation**](./interactive-pdf-navigation/page-navigation): Navigate across pages.
+* [**LinkAnnotation**](./interactive-pdf-navigation/table-of-content-navigation): Navigate within the document or to external destinations via hyperlinks.
+* [**ThumbnailView**](./interactive-pdf-navigation/page-thumbnail-navigation): Navigate within the document using page thumbnails.
+* [**BookmarkView**](./interactive-pdf-navigation/bookmark-navigation): Navigate using document bookmarks (table of contents).
+* [**TextSelection**](./textselection): Select and copy text from the document.
+* [**TextSearch**](./text-search): Search for text across the document.
+* [**Print**](./print): Print the entire document or specific pages directly from the browser.
+* [**Annotation**](./annotations/text-markup-annotation): Add and edit annotations.
+* [**FormFields**](./form-designer/create-programmatically): Work with form fields in the document.
+* [**FormDesigner**](./form-designer/create-programmatically): Add or edit form fields in the document.
> In addition to injecting the required modules in an application, enable the corresponding properties to activate features on a PDF Viewer instance.
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/how-to-overview.md b/Document-Processing/PDF/PDF-Viewer/vue/how-to-overview.md
index 78e32eb87..957b20749 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/how-to-overview.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/how-to-overview.md
@@ -11,53 +11,53 @@ domainurl: ##DomainURL##
The frequently asked questions in Essential® PDF Viewer are listed below.
-* [How to add annotation in text search?](./how-to/add-annotation-in-text-search.md)
-* [How to add custom header to the PDF Viewer ajax request?](./how-to/add-header-value.md)
-* [How to add a save button to PDF Viewer toolbar?](./how-to/add-save-button.md)
-* [How to customize the annotation selectors?](./how-to/annotation-selectors.md)
-* [How to change the author name of the annotation dynamically?](./how-to/change-author-name-using-annotation-settings.md)
-* [How to configure the annotation selector settings?](./how-to/configure-annotation-selector-setting.md)
-* [What are the supported conformance or standards of PDF Viewer?](./how-to/conformance.md)
-* [How to control the visibility of the annotation?](./how-to/control-annotation-visibility.md)
-* [How to convert the PDF library bounds to PDF Viewer bounds?](./how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds.md)
-* [How to create PDF Viewer service using ASP.NET Core?](./how-to/create-pdfviewer-service-core.md)
-* [How to create PDF Viewer web service using ASP.NET MVC?](./how-to/create-pdfviewer-service.md)
-* [How to customize the context menu in PDF Viewer?](./how-to/custom-context-menu.md)
-* [How to add custom font in handwritten signature?](./how-to/custom-font-signature-field.md)
-* [How to add custom fonts for form fields and free text annotations?](./how-to/custom-fonts.md)
-* [How to customize text search highlight color in PDF Viewer?](./how-to/customize-text-search-color.md)
-* [How to delete a specific annotation from the PDF document?](./how-to/delete-annotation.md)
-* [How to disable the context menu?](./how-to/disable-context-menu.md)
-* [How to disable tile rendering in PDF Viewer?](./how-to/disable-tile-rendering.md)
-* [How to display custom tooltip for annotation?](./how-to/display-custom-tool-tip-for-annotation.md)
-* [How to get the download start event?](./how-to/download-start-event.md)
-* [How to enable or disable the local storage?](./how-to/enable-local-storage.md)
-* [How to enable or disable the text selection?](./how-to/enable-text-selection.md)
-* [How to export the PDF pages as images?](./how-to/export-as-image.md)
-* [How to extract text from the PDF document?](./how-to/extract-text-completed.md)
-* [How to extract text from a specific region?](./how-to/extract-text-option.md)
-* [How to extract text from the PDF document?](./how-to/extract-text.md)
-* [How to find the text in the PDF document asynchronously?](./how-to/find-text-async.md)
-* [How to get the base64 string of the loaded document?](./how-to/get-base64.md)
-* [How to get the page information of the loaded document?](./how-to/getPageInfo.md)
-* [How to identify the added annotation and its mode?](./how-to/identify-added-annotation-mode.md)
-* [How to import and export annotations in PDF Viewer?](./how-to/import-export-annotation.md)
-* [How to load a PDF document in PDF Viewer?](./how-to/load-documents.md)
-* [How to set the minimum and maximum zoom percentage?](./how-to/min-max-zoom.md)
-* [How to open the bookmark pane when the document is loaded?](./how-to/open-bookmark.md)
-* [How to open the thumbnail pane when the document is loaded?](./how-to/open-thumbnail.md)
-* [How to get the page render started and completed event?](./how-to/pagerenderstarted-pagerendercompleted.md)
-* [How to resolve the `Unable to find an entry point named 'FreeExportedValues' in DLL 'pdfium''?](./how-to/resolve-unable-to-find-an-entry-point-error.md)
-* [How to restrict the zooming in mobile mode?](./how-to/restricting-zoom-in-mobile-mode.md)
-* [How to show custom stamp item in the stamp annotation?](./how-to/show-custom-stamp-item.md)
-* [How to show or hide a particular annotation?](./how-to/show-hide-annotation.md)
-* [How to get the signature selected and unselected event?](./how-to/signatureselect-signatureunselect.md)
-* [How to unload the PDF document from the viewer?](./how-to/unload-document.md)
-* [How to perform highlight, underline, and strikethrough for the selected text?](./how-to/highlight-underline-strikeout-text.md)
-* [How to import annotations from the PDF document?](./how-to/import-annotations.md)
-* [How to get the annotation when it is overlapped with another annotation on its selection?](./how-to/overlapped-annotation.md)
-* [How to authorize requests with token?](./how-to/authorization-token.md)
-* [How to handle retry/timeout for service calls?](./how-to/retry-timeout.md)
-* [How to convert pixel to point in server side?](./how-to/convert-pixel-to-point-in-server-side.md)
-* [Why is the web service not listening?](./how-to/webservice-not-listening.md)
-* [How to select annotation?](./how-to/select-annotation.md)
+* [How to add annotation in text search?](./how-to/add-annotation-in-text-search)
+* [How to add custom header to the PDF Viewer ajax request?](./how-to/add-header-value)
+* [How to add a save button to PDF Viewer toolbar?](./how-to/add-save-button)
+* [How to customize the annotation selectors?](./how-to/annotation-selectors)
+* [How to change the author name of the annotation dynamically?](./how-to/change-author-name-using-annotation-settings)
+* [How to configure the annotation selector settings?](./how-to/configure-annotation-selector-setting)
+* [What are the supported conformance or standards of PDF Viewer?](./how-to/conformance)
+* [How to control the visibility of the annotation?](./how-to/control-annotation-visibility)
+* [How to convert the PDF library bounds to PDF Viewer bounds?](./how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds)
+* [How to create PDF Viewer service using ASP.NET Core?](./how-to/create-pdfviewer-service-core)
+* [How to create PDF Viewer web service using ASP.NET MVC?](./how-to/create-pdfviewer-service)
+* [How to customize the context menu in PDF Viewer?](./how-to/custom-context-menu)
+* [How to add custom font in handwritten signature?](./how-to/custom-font-signature-field)
+* [How to add custom fonts for form fields and free text annotations?](./how-to/custom-fonts)
+* [How to customize text search highlight color in PDF Viewer?](./how-to/customize-text-search-color)
+* [How to delete a specific annotation from the PDF document?](./how-to/delete-annotation)
+* [How to disable the context menu?](./how-to/disable-context-menu)
+* [How to disable tile rendering in PDF Viewer?](./how-to/disable-tile-rendering)
+* [How to display custom tooltip for annotation?](./how-to/display-custom-tool-tip-for-annotation)
+* [How to get the download start event?](./how-to/download-start-event)
+* [How to enable or disable the local storage?](./how-to/enable-local-storage)
+* [How to enable or disable the text selection?](./how-to/enable-text-selection)
+* [How to export the PDF pages as images?](./how-to/export-as-image)
+* [How to extract text from the PDF document?](./how-to/extract-text-completed)
+* [How to extract text from a specific region?](./how-to/extract-text-option)
+* [How to extract text from the PDF document?](./how-to/extract-text)
+* [How to find the text in the PDF document asynchronously?](./how-to/find-text-async)
+* [How to get the base64 string of the loaded document?](./how-to/get-base64)
+* [How to get the page information of the loaded document?](./how-to/getPageInfo)
+* [How to identify the added annotation and its mode?](./how-to/identify-added-annotation-mode)
+* [How to import and export annotations in PDF Viewer?](./how-to/import-export-annotation)
+* [How to load a PDF document in PDF Viewer?](./how-to/load-documents)
+* [How to set the minimum and maximum zoom percentage?](./how-to/min-max-zoom)
+* [How to open the bookmark pane when the document is loaded?](./how-to/open-bookmark)
+* [How to open the thumbnail pane when the document is loaded?](./how-to/open-thumbnail)
+* [How to get the page render started and completed event?](./how-to/pagerenderstarted-pagerendercompleted)
+* [How to resolve the `Unable to find an entry point named 'FreeExportedValues' in DLL 'pdfium''?](./how-to/resolve-unable-to-find-an-entry-point-error)
+* [How to restrict the zooming in mobile mode?](./how-to/restricting-zoom-in-mobile-mode)
+* [How to show custom stamp item in the stamp annotation?](./how-to/show-custom-stamp-item)
+* [How to show or hide a particular annotation?](./how-to/show-hide-annotation)
+* [How to get the signature selected and unselected event?](./how-to/signatureselect-signatureunselect)
+* [How to unload the PDF document from the viewer?](./how-to/unload-document)
+* [How to perform highlight, underline, and strikethrough for the selected text?](./how-to/highlight-underline-strikeout-text)
+* [How to import annotations from the PDF document?](./how-to/import-annotations)
+* [How to get the annotation when it is overlapped with another annotation on its selection?](./how-to/overlapped-annotation)
+* [How to authorize requests with token?](./how-to/authorization-token)
+* [How to handle retry/timeout for service calls?](./how-to/retry-timeout)
+* [How to convert pixel to point in server side?](./how-to/convert-pixel-to-point-in-server-side)
+* [Why is the web service not listening?](./how-to/webservice-not-listening)
+* [How to select annotation?](./how-to/select-annotation)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/how-to/custom-fonts.md b/Document-Processing/PDF/PDF-Viewer/vue/how-to/custom-fonts.md
index 67e7211fb..cb89cf890 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/how-to/custom-fonts.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/how-to/custom-fonts.md
@@ -10,6 +10,12 @@ domainurl: ##DomainURL##
# How to add custom fonts to the PDF viewer
+The Vue PDF Viewer supports loading, editing, and saving custom fonts in form fields such as text boxes, list boxes, and drop-downs by using the customFonts property. Add the required TTF files to the resource URL directory used by the viewer so they can be loaded at runtime and used in forms.
+
+## Integrating Custom Font Collections into Form Fields in PDF Viewer
+
+To ensure proper rendering and saving of form fields that use custom fonts, especially when the fonts are not installed on the system, place the TTF files in the resource URL path referenced by the viewer and specify their names through the customFonts property (string array). These fonts will then be available for loading, editing, and saving form fields in the PDF.
+
To use custom fonts in the Syncfusion PDF Viewer, add the custom TTF files to the resource URL directory and configure the viewer to load them. Specify font file names using the `customFonts` property as an array of names.
Steps to add custom fonts
@@ -76,4 +82,6 @@ export default {
{% endhighlight %}
{% endtabs %}
-These steps integrate custom fonts into PDF documents displayed in the PDF Viewer.
\ No newline at end of file
+These steps integrate custom fonts into PDF documents displayed in the PDF Viewer.
+
+> Note: If a form field (TextBox, ListBox, DropDown) using a custom font has text larger than the field’s bounds, the downloaded PDF may render incorrectly in browsers or third‑party viewers. It displays correctly in the Syncfusion PDF Viewer. To avoid this, use a font size that fits within the field or enlarge the field before saving/downloading.
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/navigation.md b/Document-Processing/PDF/PDF-Viewer/vue/navigation.md
index c0dec69b8..63c84c5a1 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/navigation.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/navigation.md
@@ -1065,5 +1065,5 @@ export default {
## See also
-* [Toolbar items](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/toolbar/)
-* [Feature Modules](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/feature-module/)
\ No newline at end of file
+* [Toolbar items](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/toolbar)
+* [Feature Modules](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/feature-module)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/organize-pdf-overview.md b/Document-Processing/PDF/PDF-Viewer/vue/organize-pdf-overview.md
index 69bd0811f..3eea270a7 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/organize-pdf-overview.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/organize-pdf-overview.md
@@ -27,12 +27,12 @@ The Organize Pages panel supports the following actions:
After completing the changes, apply them by selecting **Save** to overwrite the current document or **Save As** to download a new copy that retains the updated page order.
-For a full guide to Organize Pages in Vue, see the feature landing page: [Organize pages in Vue PDF Viewer](./organize-pdf.md).
+For a full guide to Organize Pages in Vue, see the feature landing page: [Organize pages in Vue PDF Viewer](./organize-pdf).
See also
-- [UI interactions for Organize Pages](./organize-pdf/ui-interactions-organize-page.md)
-- [Toolbar items for Organize Pages](./organize-pdf/toolbar-organize-page.md)
-- [Programmatic support for Organize Pages](./organize-pdf/programmatic-support-for-organize-page.md)
-- [Organize Pages events](./organize-pdf/organize-pdf-events.md)
-- [Organize Pages in mobile view](./organize-pdf/organize-page-mobile-view.md)
+- [UI interactions for Organize Pages](./organize-pdf/ui-interactions-organize-page)
+- [Toolbar items for Organize Pages](./organize-pdf/toolbar-organize-page)
+- [Programmatic support for Organize Pages](./organize-pdf/programmatic-support-for-organize-page)
+- [Organize Pages events](./organize-pdf/organize-pdf-events)
+- [Organize Pages in mobile view](./organize-pdf/organize-page-mobile-view)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/organize-pdf.md b/Document-Processing/PDF/PDF-Viewer/vue/organize-pdf.md
new file mode 100644
index 000000000..2a640df9c
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/organize-pdf.md
@@ -0,0 +1,377 @@
+---
+layout: post
+title: Organize Pages in Vue PDF Viewer component | Syncfusion
+description: Learn here all about Organize Pages in Syncfusion Vue PDF Viewer component of Syncfusion Essential JS 2 and more.
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Organize Pages in Vue PDF Viewer component
+
+The PDF Viewer allows you to manage your PDF documents efficiently by organizing pages seamlessly. Whether you need to add new pages, remove unnecessary ones, rotate pages, move pages within the document, and copy or duplicate pages, the PDF Viewer facilitates these tasks effortlessly.
+
+## Getting started
+
+To access the organize pages feature, simply open the PDF document in the PDF Viewer and navigate to the left vertical toolbar. Look for the `Organize Pages` option to begin utilizing these capabilities.
+
+
+
+The page organization support enables you to perform various actions such as rotating, rearranging, inserting, copying, and deleting pages within a PDF document using organize pages dialog.
+
+### Rotating PDF pages
+
+You can adjust the orientation of PDF pages to ensure proper alignment. The rotate icon offers the following options:
+
+* `Rotate clockwise`: Rotate the selected pages 90 degrees clockwise.
+* `Rotate counter-clockwise`: Rotate the selected pages 90 degrees counter-clockwise.
+
+### Rearranging PDF pages
+
+You can easily change the sequence of pages within your document using the drag and drop method:
+
+* `Drag and drop`: Click and drag a page thumbnail to the desired position within the document, then release it to rearrange the page order.
+
+
+
+### Inserting new pages
+
+Effortlessly add new pages to your document with the following options:
+
+* `Insert blank page left`: Insert a blank page to the left of the selected page using the respective icon.
+* `Insert blank page right`: Insert a blank page to the right of the selected page using the corresponding icon.
+
+### Deleting PDF pages
+
+Removing unwanted pages from your document is straight forward:
+
+* `Select pages to delete`: Click on the page thumbnails you wish to remove. You can select multiple pages at once.
+* `Delete selected pages`: Use the delete option in the organize pages pane to remove the selected pages from the document.
+
+### Copying PDF pages
+
+Duplicate the pages within your PDF document effortlessly:
+
+* `Select pages to copy`: Click on the page thumbnails you wish to duplicate. Use the copy option to create duplicates. When a page is copied, the duplicate is automatically added to the right of the selected page. Multiple copies can be made using the toolbar action.
+
+
+
+### Importing a PDF Document
+
+Seamlessly import a PDF document into your existing document:
+
+* `Import PDF document`: Click the **Import Document** button to import a PDF. If a page is selected, the imported document’s thumbnail will be inserted to the right of the selected page. If multiple or no pages are selected, the thumbnail will be added as the first page. When **Save** or **Save As** is clicked, the imported PDF will be merged with the current document. You can insert a blank page to the left or right of the imported thumbnail, delete it, or drag and drop it to reposition as needed.
+
+
+
+### Selecting all pages
+
+Make comprehensive adjustments by selecting all pages simultaneously. This facilitates efficient editing and formatting across the entire document.
+
+
+
+### Zooming Page Thumbnails
+
+Adjust the size of page thumbnails within the organizer panel for better visibility and precision when editing. The zoom functionality allows you to:
+
+* Increase or decrease the size of page thumbnails using the zoom slider
+* See more details on pages when zoomed in
+* View more pages simultaneously when zoomed out
+
+This feature is especially useful when working with documents containing complex layouts or small details that need careful examination during organization.
+
+
+
+### Real-time updates
+
+Witness instant changes in page organization reflected within the PDF Viewer. Simply click the **Save** button to preserve your modifications.
+
+### SaveAs functionality
+
+Safeguard your edits by utilizing the **Save As** feature. This enables you to download the modified version of the PDF document for future reference, ensuring that your changes are securely stored.
+
+## API's supported
+
+**enablePageOrganizer:** This API enables or disables the page organizer feature in the PDF Viewer. By default, it is set to `true`, indicating that the page organizer is enabled.
+
+{% tabs %}
+{% highlight html tabtitle="Standalone" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+**isPageOrganizerOpen:** This API determines whether the page organizer dialog will be displayed automatically when a document is loaded into the PDF Viewer. By default, it is set to `false`, meaning the dialog is not displayed initially.
+
+{% tabs %}
+{% highlight html tabtitle="Standalone" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+**pageOrganizerSettings:** This API allows control over various page management functionalities within the PDF Viewer. It includes options to enable or disable actions such as deleting, inserting, rotating, copying, importing and rearranging pages, as well as configuring thumbnail zoom settings. By default, all these actions are enabled and standard zoom settings are applied.
+
+{% tabs %}
+{% highlight html tabtitle="Standalone" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+**openPageOrganizer:** This API opens the page organizer dialog within the PDF Viewer, providing access to manage PDF pages.
+
+```html
+
+```
+
+```ts
+openPageOrganizer: function () {
+ var viewer = this.$refs.pdfviewer.ej2Instances;
+ // Open Page Organizer panel.
+ viewer.pageOrganizer.openPageOrganizer();
+}
+```
+
+**closePageOrganizer:** This API closes the currently open page organizer dialog within the PDF Viewer, if it is present. It allows users to dismiss the dialog when done with page organization tasks.
+
+```html
+
+```
+
+```ts
+closePageOrganizer: function () {
+ var viewer = this.$refs.pdfviewer.ej2Instances;
+ // Close Page Organizer panel.
+ viewer.pageOrganizer.closePageOrganizer();
+}
+```
+
+## Keyboard shortcuts
+
+The following keyboard shortcuts are available at the organize pages dialog.
+
+* **Ctrl+Z** : Undo the last action performed.
+* **Ctrl+Y** : Redo the action that was undone
+* **Ctrl+Scroll** : Zoom in and zoom out page thumbnails for better visibility.
+
+
+
+#### Conclusion
+
+With the Organize Pages feature in the PDF Viewer, managing your PDF documents has never been easier. Whether you are adding new content, adjusting page orientation, moving the pages, duplicating the pages, or removing unnecessary pages, this feature provides the tools you need to streamline your document management workflow. Explore these capabilities today and take control of your PDF documents with ease!
+
+[View sample in GitHub](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples/tree/master/How%20to/Organize%20pdf)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/organize-pdf/organize-pdf-events.md b/Document-Processing/PDF/PDF-Viewer/vue/organize-pdf/organize-pdf-events.md
index ff271a440..5b8604865 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/organize-pdf/organize-pdf-events.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/organize-pdf/organize-pdf-events.md
@@ -193,5 +193,5 @@ Event arguments:
## Related event documentation
-- Annotation events: [Annotation events](../annotation/annotation-event.md)
-- Form designer events: [Form field events](../form-designer/form-field-events.md)
+- Annotation events: [Annotation events](../annotation/annotation-event)
+- Form designer events: [Form field events](../form-designer/form-field-events)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/overview.md b/Document-Processing/PDF/PDF-Viewer/vue/overview.md
index 20ee196ca..66727b7ee 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/overview.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/overview.md
@@ -1,6 +1,6 @@
---
title: Overview of Vue PDF Viewer Component | Syncfusion
-description: Checkout and learn about overview of the Syncfusion Vue PDF Viewer component and much more details.
+description: Learn about the Syncfusion Vue PDF Viewer component, its features, supported interactions, and how it helps in viewing PDF documents.
platform: document-processing
control: PDF Viewer
documentation: UG
@@ -26,7 +26,7 @@ npm install
### Adding Syncfusion PDF Viewer package
-All Syncfusion Vue packages are published in [npmjs.com](https://www.npmjs.com/~syncfusionorg)registry. To install Vue PDF Viewer package, use the following command.
+All Syncfusion Vue packages are published in [npmjs.com](https://www.npmjs.com/~syncfusionorg) registry. To install Vue PDF Viewer package, use the following command.
```
npm install @syncfusion/ej2-vue-pdfviewer --save
@@ -63,7 +63,7 @@ Add CSS references needed for PDF Viewer in `style` section of the `App.vue` fil
```
### Add PDF Viewer component
-Add the Vue PDF Viewer by using `ejs-pdfviewer` selector in template section of the `App.vue` file.
+Add the Vue PDF Viewer by using `ej-pdfviewer` selector in template section of the `App.vue` file.
```
@@ -105,7 +105,7 @@ Refer the [Getting Started with Vue3](https://help.syncfusion.com/document-proce
*[`View PDF Document`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/getting-started) - Open and display both the normal and the protected PDF files with AES and RC4 encryption.
*[`Annotations`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/annotation/text-markup-annotation) - Annotate with text markup, shapes, stamps, ink, and sticky notes.Form filling and form designing can be done.
-*[`Form Fields`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/form-designer/create-fillable-pdf-forms/create-programmatically) - Form filling and form designing can be done.
+*[`Form Fields`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/form-designer/create-programmatically) - Form filling and form designing can be done.
*[`Signature`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/annotation/signature-annotation) - Hand-written and digital signatures are allowed.
*[`Toolbar`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/toolbar) - Built-in-toolbar and custom toolbars to perform user interaction of PDF Viewer functionalities.
*[`Navigation`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/navigation) - Easy navigation with the help of bookmarks, thumbnails, hyperlinks, and table of contents.
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/toolbar.md b/Document-Processing/PDF/PDF-Viewer/vue/toolbar.md
new file mode 100644
index 000000000..c1d9cebe9
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/toolbar.md
@@ -0,0 +1,1241 @@
+---
+layout: post
+title: Toolbar in Vue Pdfviewer component | Syncfusion
+description: Learn here all about Toolbar in Syncfusion Vue Pdfviewer component of Syncfusion Essential JS 2 and more.
+control: Toolbar
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Built-In Toolbar in Vue Pdfviewer component
+
+The PDF Viewer comes with a powerful built-in toolbar to execute important actions such as page navigation, text search,view mode,download,print,bookmark, and thumbnails.
+
+The following table shows built-in toolbar items and its actions:-
+
+| Option | Description |
+|---|---|
+| OpenOption | This option provides an action to load the PDF documents to the PDF Viewer.|
+| PageNavigationTool | This option provides an action to navigate the pages in the PDF Viewer. It contains GoToFirstPage,GoToLastPage,GotoPage,GoToNext, and GoToLast tools.|
+| MagnificationTool |This option provides an action to magnify the pages either with predefined or user defined zoom factors in the PDF Viewer. Contains ZoomIn, ZoomOut, Zoom, FitPage and FitWidth tools|
+| PanTool | This option provides an action for panning the pages in the PDF Viewer.|
+| SelectionTool | This option provides an action to enable/disable the text selection in the PDF Viewer.|
+| SearchOption | This option provides an action to search a word in the PDF documents.|
+| PrintOption | This option provides an action to print the PDF document being loaded in the PDF Viewer.|
+| DownloadOption |This Download option provides an action to download the PDF document that has been loaded in the PDF Viewer.|
+| UndoRedoTool | This tool provides options to undo and redo the annotation actions performed in the PDF Viewer.|
+| AnnotationEditTool | This tool provides options to enable or disable the edit mode of annotation in the PDF Viewer.|
+| FormDesignerEditTool | This tool provides options to enable or disable the edit mode of form fields in the PDF Viewer.|
+
+## Show/Hide the built-in toolbar
+
+The PDF Viewer has an option to show or hide the complete built-in toolbar. You can achieve this by using following two ways.,
+
+* **Show/Hide toolbar using enableToolbar API as in the following code snippet**
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+N> To set up the **server-backed PDF Viewer** in the app.vue file, include the following `serviceUrl`:
+**serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"**
+Within the `template`, configure the PDF Viewer by adding the `:serviceUrl="serviceUrl"` attribute inside the
element.
+
+{% previewsample "Document-Processing/code-snippet/pdfviewer/vue/toolbar/toolbar-hide-cs1/index.html" %}
+
+* **Show/Hide toolbar using showToolbar as in the following code snippet**
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+N> To set up the **server-backed PDF Viewer** in the app.vue file, include the following `serviceUrl`:
+**serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"**
+Within the `template`, configure the PDF Viewer by adding the `:serviceUrl="serviceUrl"` attribute inside the
element.
+
+{% previewsample "Document-Processing/code-snippet/pdfviewer/vue/toolbar/toolbar-method-cs1/index.html" %}
+
+## Show/Hide the built-in toolbaritem
+
+The PDF Viewer has an option to show or hide these grouped items in the built-in toolbar.
+
+* **Show/Hide toolbaritem using toolbarSettings as in the following code snippet.**
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+N> To set up the **server-backed PDF Viewer** in the app.vue file, include the following `serviceUrl`:
+**serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"**
+Within the `template`, configure the PDF Viewer by adding the `:serviceUrl="serviceUrl"` attribute inside the
element.
+
+{% previewsample "Document-Processing/code-snippet/pdfviewer/vue/toolbar/toolbar-items-cs1/index.html" %}
+
+* **Show/Hide toolbaritem using showToolbaritem as in the following code snippet**
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+N> To set up the **server-backed PDF Viewer** in the app.vue file, include the following `serviceUrl`:
+**serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"**
+Within the `template`, configure the PDF Viewer by adding the `:serviceUrl="serviceUrl"` attribute inside the
element.
+
+ {% previewsample "Document-Processing/code-snippet/pdfviewer/vue/toolbar/toolbar-items-method-cs1/index.html" %}
+
+
+## Customize Built-In Toolbar
+
+PDF Viewer allows you to customize(add, show, hide, enable, and disable) existing items in a toolbar.
+
+* Add - New items can defined by [**CustomToolbarItemModel**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/customToolbarItemModel/) and with existing items in [**ToolbarSettings**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/toolbarSettings/) property. Newly added item click action can be defined in [`toolbarclick`](https://ej2.syncfusion.com/vue/documentation/api/toolbar/clickEventArgs/).
+
+* Show, Hide - Existing items can be shown or hidden using the [`ToolbarSettings`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/toolbarSettings/) property. Pre-defined toolbar items are available with [`ToolbarItem`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/toolbarItem/).
+
+* Enable, Disable - Toolbar items can be enabled or disable using [`enabletoolbaritem`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/toolbar/#enabletoolbaritem)
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (Standalone)" %}
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (Standalone)" %}
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight html tabtitle="Composition API (Server-Backed)" %}
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (Server-Backed)" %}
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+>Note : Default value of toolbar items is ['OpenOption', 'PageNavigationTool','MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption','UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm']
+### Align Property
+
+The align property is used to specify the alignment of a toolbar item within the toolbar.
+
+`Left`: Aligns the item to the left side of the toolbar.
+`Right`: Aligns the item to the right side of the toolbar.
+
+### Tooltip Property
+
+The tooltip property is used to set the tooltip text for a toolbar item. Tooltip provides additional information when a user hovers over the item.
+
+### CssClass Property
+
+The cssClass property is used to apply custom CSS classes to a toolbar item. It allows custom styling of the toolbar item.
+
+### Prefix Property
+
+The prefix property is used to set the CSS class or icon that should be added as a prefix to the existing content of the toolbar item.
+
+### ID Property
+
+The id property within a CustomToolbarItemModel is a compulsory attribute that plays a vital role in toolbar customization. It serves as a unique identifier for each toolbar item, facilitating distinct references and interactions.
+
+When defining or customizing toolbar items, it is mandatory to assign a specific and descriptive id to each item.
+These properties are commonly used when defining custom toolbar items with the `CustomToolbarItemModel` in the context of Syncfusion® PDF Viewer. When configuring the toolbar using the `ToolbarSettings` property, you can include these properties to customize the appearance and behavior of each toolbar item.
+
+N> When customizing toolbar items, you have the flexibility to include either icons or text based on your design preference.
+
+[View sample in GitHub](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples/tree/master/How%20to/Customize%20existing%20toolbar)
+
+## Custom Toolbar
+
+The PDF Viewer provides API for user interactions options provided in it's built-in toolbar. Using this we can create our own User Interface for toolbar actions in application level by hiding the built-in toolbar. The following steps are used to create the custom toolbar for PDF Viewer,
+
+**Step 1:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/getting-started) to create simple PDF Viewer sample.
+
+**Step 2:** Now, add an HTML div element in template to act as the custom toolbar PDF Viewer using the following code.
+
+
+{% tabs %}
+{% highlight html tabtitle="Standalone" %}
+
+
+