SyncfusionExamples · Dhakshin-SF4509 · Jul 8, 2026 · Jul 8, 2026 · Jul 8, 2026 · Jul 8, 2026
diff --git a/javascript/pdf-bookmark-index/README.md b/javascript/pdf-bookmark-index/README.md
@@ -0,0 +1,22 @@
+# How to Get Bookmark Page Index from PDF Using JavaScript
+
+This project is a complete working application to get bookmark page index from PDF file using JavaScript.
+
+## Getting Started
+
+To get started you need to clone the `pdf-bookmark-index` repository.
+
+```
+git clone https://github.com/SyncfusionExamples/javascript-pdf-examples.git
+```
+
+## Running
+
+You can run the application by simply opening the `index.html` file in any web browser.
+
+## Resources
+
+You can also refer the below resources to know more details about Javascript PDF Library.
+
+* [JavaScript PDF Library Demos](https://document.syncfusion.com/demos/pdf/javascript-es5/#/tailwind3/pdf/default.html)
+* [JavaScript PDF Library Documentation](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/overview)
diff --git a/javascript/pdf-bookmark-index/index.html b/javascript/pdf-bookmark-index/index.html
@@ -0,0 +1,47 @@
+<head>
+    <!-- Syncfusion JavaScript PDF Library (CDN) -->
+    <script src="https://cdn.syncfusion.com/ej2/33.2.12/dist/ej2.min.js"></script>
+</head>
+<div class="container py-4">
+    <h1 class="h4 mb-3">Get Bookmark Page Index from PDF</h1>
+    <button id="indexBtn" class="btn btn-primary">Get Bookmark Index</button>
+</div>
+
+<script>
+    // Add Bookmark functionality
+    var indexBtn = new ej.buttons.Button({}, '#indexBtn');
+    indexBtn.element.onclick = getBookmarkIndex;
+    //Method to add bookmark on PDF
+    function getBookmarkIndex() {
+        const templateUrl = 'https://cdn.syncfusion.com/content/pdf-resources/bookmarks.pdf';
+        readFromUrl(templateUrl)
+            .then(function (pdfBytes) {
+                // Create a new PDF document instance
+                let document = new ej.pdf.PdfDocument(pdfBytes);
+                // Get bookmarks
+                var bookmarks = document.bookmarks;
+                // Get the first bookmark (or any specific one)
+                var bookmark = bookmarks.at(1);
+                // Get the page index of the bookmark's destination
+                var pageIndex = bookmark.destination.pageIndex;
+                // Print the Bookmark index
+                console.log('Bookmark Index: ' + pageIndex);
+                // Destroy the document instance to release memory
+                document.destroy();
+            })
+    }
+
+    // Fetch helper
+    function readFromUrl(url) {
+        return fetch(url, { cache: 'no-cache' })
+            .then(function (res) {
+                if (!res.ok) {
+                    throw new Error('Failed to fetch ' + url + ': ' + res.status + ' ' + res.statusText);
+                }
+                return res.arrayBuffer();
+            })
+            .then(function (buf) {
+                return new Uint8Array(buf);
+            });
+    }
+</script>
diff --git a/javascript/pdf-export-annotations/README.md b/javascript/pdf-export-annotations/README.md
@@ -0,0 +1,22 @@
+# How to Export Annotations from a PDF in JavaScript
+
+This project is a complete working application to export annotation from PDF using JavaScript.
+
+## Getting Started
+
+To get started you need to clone the `pdf-export-annotations` repository.
+
+```
+git clone https://github.com/SyncfusionExamples/javascript-pdf-examples.git
+```
+
+## Running
+
+You can run the application by simply opening the `index.html` file in any web browser.
+
+## Resources
+
+You can also refer the below resources to know more details about Javascript PDF Library.
+
+* [JavaScript PDF Library Demos](https://document.syncfusion.com/demos/pdf/javascript-es5/#/tailwind3/pdf/default.html)
+* [JavaScript PDF Library Documentation](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/overview)
diff --git a/javascript/pdf-export-annotations/index.html b/javascript/pdf-export-annotations/index.html
@@ -0,0 +1,45 @@
+<head>
+    <!-- Syncfusion JavaScript PDF Library (CDN) -->
+    <script src="https://cdn.syncfusion.com/ej2/33.2.12/dist/ej2.min.js"></script>
+</head>
+<div class="container py-4">
+    <h1 class="h4 mb-3">Export Annotations from PDF</h1>
+    <button id="exportBtn" class="btn btn-primary">Export Annotations</button>
+</div>
+
+<script>
+    // Export Annotation functionality
+    var exportBtn = new ej.buttons.Button({}, '#exportBtn');
+    exportBtn.element.onclick = exportAnnotations;
+    //Method to export annotation on PDF
+    function exportAnnotations() {
+        const templateUrl = 'https://cdn.syncfusion.com/content/pdf-resources/Annotation.pdf';
+        readFromUrl(templateUrl)
+            .then(function (pdfBytes) {
+                // Create a new PDF document instance
+                let document = new ej.pdf.PdfDocument(pdfBytes);
+                // Sets export data format as JSON for annotation export settings
+                let settings = new ej.pdf.PdfAnnotationExportSettings();
+                settings.exportAppearance = true;
+                settings.dataFormat = ej.pdf.DataFormat.json;
+                // Export annotations to JSON format
+                document.exportAnnotations('ExportAnnotations.json', settings);
+                // Destroy the document instance to release memory
+                document.destroy();
+            })
+    }
+
+    // Fetch helper
+    function readFromUrl(url) {
+        return fetch(url, { cache: 'no-cache' })
+            .then(function (res) {
+                if (!res.ok) {
+                    throw new Error('Failed to fetch ' + url + ': ' + res.status + ' ' + res.statusText);
+                }
+                return res.arrayBuffer();
+            })
+            .then(function (buf) {
+                return new Uint8Array(buf);
+            });
+    }
+</script>
diff --git a/javascript/pdf-fill-form/README.md b/javascript/pdf-fill-form/README.md
@@ -0,0 +1,22 @@
+# How to Fill Form Fields in an Existing PDF Document in JavaScript
+
+This project is a complete working application to fill form fields in an existing PDF document using JavaScript.
+
+## Getting Started
+
+To get started you need to clone the `pdf-fill-form` repository.
+
+```
+git clone https://github.com/SyncfusionExamples/javascript-pdf-examples.git
+```
+
+## Running
+
+You can run the application by simply opening the `index.html` file in any web browser.
+
+## Resources
+
+You can also refer the below resources to know more details about Javascript PDF Library.
+
+* [JavaScript PDF Library Demos](https://document.syncfusion.com/demos/pdf/javascript-es5/#/tailwind3/pdf/default.html)
+* [JavaScript PDF Library Documentation](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/overview)
diff --git a/javascript/pdf-fill-form/index.html b/javascript/pdf-fill-form/index.html
@@ -0,0 +1,90 @@
+<head>
+    <!-- Syncfusion JavaScript PDF Library (CDN) -->
+    <script src="https://cdn.syncfusion.com/ej2/33.2.12/dist/ej2.min.js"></script>
+    <!-- Syncfusion components styles (CDN) -->
+    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/33.2.12/material.css">
+</head>
+
+<div class="container py-4">
+    <h1 class="h4 mb-3">PDF Forms</h1>
+</div>
+<button id="editForm" class="btn btn-primary" style="margin: 1%;">Generate PDF</button>
+
+<script>
+    // Create and initialize the PDF creation button
+    var editForm = new ej.buttons.Button();
+    editForm.appendTo('#editForm');
+    // Generate an PDF Form when the button is clicked
+    editForm.element.onclick = editFormFields;
+
+    function editFormFields() {
+        fetchAsUint8Array(
+            'https://cdn.syncfusion.com/content/pdf-resources/form-filling-document.pdf'
+        )
+            .then(function (pdfBytes) {
+                // Create a PDF document instance from the loaded PDF bytes
+                var pdf = new ej.pdf.PdfDocument(pdfBytes);
+                var form = pdf.form;
+                // Fill the Date text box field
+                var dateField = form.fieldAt(0);
+                if (dateField) {
+                    dateField.text = '07/07/2026';
+                    dateField.setAppearance(true);
+                }
+                // Fill the Name text box field
+                var nameField = form.fieldAt(1);
+                if (nameField) {
+                    nameField.text = 'John Allister';
+                    nameField.setAppearance(true);
+                }
+                // Fill the Email text box field
+                var mailField = form.fieldAt(2);
+                if (mailField) {
+                    mailField.text = 'allister.john@example.com';
+                    mailField.setAppearance(true);
+                }
+                // Fill the Gender radio button field
+                var genderField = form.fieldAt(3);
+                if (genderField) {
+                    // Select the option at index 2 (Female)
+                    genderField.selectedIndex = 2;
+                    genderField.setAppearance(true);
+                }
+                // Fill the ListBox/Dropdown field
+                var dropdownField = form.fieldAt(4);
+                if (dropdownField) {
+                    // Select the item at index 4
+                    dropdownField.selectedIndex = 4;
+                    dropdownField.setAppearance(true);
+                }
+                // Update the CheckBox field
+                var checkboxField = form.fieldAt(5);
+                if (checkboxField) {
+                    // Set tooltip text
+                    checkboxField.toolTip = 'Check Box Field';
+                    checkboxField.setAppearance(true);
+                }
+                // Save the filled PDF document
+                pdf.save('FillForm.pdf');
+                // Release PDF resources
+                pdf.destroy();
+            })
+            .catch(function (err) {
+                console.error(err);
+                alert('Failed to create fillable form PDF');
+            })
+    };
+    //   Fetch URL and return Uint8Array
+    function fetchAsUint8Array(url) {
+        return fetch(url, { cache: 'no-cache' })
+            .then(function (res) {
+                if (!res.ok) {
+                    throw new Error('Failed to fetch ' + url + ': ' + res.status + ' ' + res.statusText);
+                }
+                return res.arrayBuffer();
+            })
+            .then(function (buf) {
+                return new Uint8Array(buf);
+            });
+    }
+</script>
diff --git a/javascript/pdf-form-fillings/README.md b/javascript/pdf-form-fillings/README.md
@@ -0,0 +1,22 @@
+# How to Create Fillable PDF Forms in JavaScript
+
+This project is a complete working application to create fillable PDF forms using JavaScript.
+
+## Getting Started
+
+To get started you need to clone the `pdf-form-fillings` repository.
+
+```
+git clone https://github.com/SyncfusionExamples/javascript-pdf-examples.git
+```
+
+## Running
+
+You can run the application by simply opening the `index.html` file in any web browser.
+
+## Resources
+
+You can also refer the below resources to know more details about Javascript PDF Library.
+
+* [JavaScript PDF Library Demos](https://document.syncfusion.com/demos/pdf/javascript-es5/#/tailwind3/pdf/default.html)
+* [JavaScript PDF Library Documentation](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/overview)