SyncfusionExamples · Dhakshin-SF4509 · Jul 15, 2026 · Jul 15, 2026 · Jul 16, 2026 · Jul 17, 2026
diff --git a/javascript/pdf-add-annotations/README.md b/javascript/pdf-add-annotations/README.md
@@ -0,0 +1,22 @@
+# How to Add Annotation in PDF in JavaScript
+
+This project is a complete working application to add annotations in PDF using JavaScript.
+
+## Getting Started
+
+To get started you need to clone the `pdf-add-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-add-annotations/index.html b/javascript/pdf-add-annotations/index.html
@@ -0,0 +1,43 @@
+<head>
+    <!-- Syncfusion JavaScript PDF Library (CDN) -->
+    <script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js"></script>
+    <link href="https://cdn.syncfusion.com/ej2/34.1.29/ej2-buttons/styles/material.css" rel="stylesheet">
+</head>
+<div class="container py-4" style="margin: 5%;">
+    <h1 class="h4 mb-3">Add Annotations in PDF</h1>
+    <button id="addBtn" class="btn btn-primary">Add Annotations</button>
+</div>
+
+<script>
+    // Create the "Add Annotations" button
+    var addBtn = new ej.buttons.Button({ cssClass: 'e-primary' }, '#addBtn');
+    // Call the method when the button is clicked
+    addBtn.element.onclick = addAnnotations;
+    // Create a PDF document and add a popup annotation
+    function addAnnotations() {
+        // Create a new PDF document
+        var document = new ej.pdf.PdfDocument();
+        // Add a page to the document
+        var page = document.addPage();
+        // Creates a new line annotation.
+        var lineAnnotation = new ej.pdf.PdfLineAnnotation({ x: 180, y: 620 }, { x: 300, y: 620 }, {
+            text: 'Line Annotation',
+            author: 'Syncfusion',
+            color: { r: 255, g: 0, b: 0 },
+            innerColor: { r: 255, g: 255, b: 0 },
+            lineEndingStyle: new ej.pdf.PdfAnnotationLineEndingStyle({ begin: ej.pdf.PdfLineEndingStyle.circle, end: ej.pdf.PdfLineEndingStyle.diamond }),
+            opacity: 0.5
+        });
+        // Assigns the leader line
+        lineAnnotation.leaderExt = 0;
+        lineAnnotation.leaderLine = 0;
+        // Assigns the line caption type
+        lineAnnotation.caption = new ej.pdf.PdfAnnotationCaption({ cap: true, type: ej.pdf.PdfLineCaptionType.inline });
+        // Adds annotation to the page
+        page.annotations.add(lineAnnotation);
+        // Save and download the PDF.
+        document.save('Annotations.pdf');
+        // Release resources
+        document.destroy();
+    }
+</script>
diff --git a/javascript/pdf-add-layers/index.html b/javascript/pdf-add-layers/index.html
@@ -1,6 +1,7 @@
 <head>
     <!-- Syncfusion JavaScript PDF Library (CDN) -->
-    <script src="https://cdn.syncfusion.com/ej2/33.2.12/dist/ej2.min.js"></script>
+    <script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js"></script>
+    <link href="https://cdn.syncfusion.com/ej2/34.1.29/ej2-buttons/styles/material.css" rel="stylesheet">
 </head>
 <div class="container py-4">
     <h1 class="h4 mb-3">Add Layers</h1>
@@ -9,7 +10,7 @@ <h1 class="h4 mb-3">Add Layers</h1>
 
 <script>
     // Add Layer functionality
-    var addBtn = new ej.buttons.Button({}, '#addBtn');
+    var addBtn = new ej.buttons.Button({ cssClass: 'e-primary' }, '#addBtn');
     addBtn.element.onclick = function () {
         // Create a new PDF document
         var doc = new ej.pdf.PdfDocument();

diff --git a/javascript/pdf-bookmark-index/index.html b/javascript/pdf-bookmark-index/index.html
@@ -1,6 +1,7 @@
 <head>
     <!-- Syncfusion JavaScript PDF Library (CDN) -->
-    <script src="https://cdn.syncfusion.com/ej2/33.2.12/dist/ej2.min.js"></script>
+    <script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js"></script>
+    <link href="https://cdn.syncfusion.com/ej2/34.1.29/ej2-buttons/styles/material.css" rel="stylesheet">
 </head>
 <div class="container py-4">
     <h1 class="h4 mb-3">Get Bookmark Page Index from PDF</h1>
@@ -9,7 +10,7 @@ <h1 class="h4 mb-3">Get Bookmark Page Index from PDF</h1>
 
 <script>
     // Add Bookmark functionality
-    var indexBtn = new ej.buttons.Button({}, '#indexBtn');
+    var indexBtn = new ej.buttons.Button({ cssClass: 'e-primary' }, '#indexBtn');
     indexBtn.element.onclick = getBookmarkIndex;
     //Method to add bookmark on PDF
     function getBookmarkIndex() {

diff --git a/javascript/pdf-bookmark-sample/index.html b/javascript/pdf-bookmark-sample/index.html
@@ -1,6 +1,7 @@
 <head>
     <!-- Syncfusion JavaScript PDF Library (CDN) -->
-    <script src="https://cdn.syncfusion.com/ej2/33.2.12/dist/ej2.min.js"></script>
+    <script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js"></script>
+    <link href="https://cdn.syncfusion.com/ej2/34.1.29/ej2-buttons/styles/material.css" rel="stylesheet">
 </head>
 <div class="container py-4">
     <h1 class="h4 mb-3">Add and Remove Bookmarks</h1>
@@ -10,7 +11,7 @@ <h1 class="h4 mb-3">Add and Remove Bookmarks</h1>
 
 <script>
     // Add Bookmark functionality
-    var addBtn = new ej.buttons.Button({}, '#addBtn');
+    var addBtn = new ej.buttons.Button({ cssClass: 'e-primary' }, '#addBtn');
     addBtn.element.onclick = addBookmarks;
     //Method to add bookmark on PDF
     function addBookmarks() {
@@ -92,7 +93,7 @@ <h1 class="h4 mb-3">Add and Remove Bookmarks</h1>
     }
 
     // Remove Bookmark functionality
-    var removeBtn = new ej.buttons.Button({}, '#removeBtn');
+    var removeBtn = new ej.buttons.Button({ cssClass: `e-primary`}, '#removeBtn');
     removeBtn.element.onclick = removeBookmark;
     var templateUrl = 'https://cdn.syncfusion.com/content/pdf-resources/bookmarks.pdf';
     // Method to remove bookmark from existing PDF

diff --git a/javascript/pdf-digital-signature/index.html b/javascript/pdf-digital-signature/index.html
@@ -1,6 +1,7 @@
 <head>
     <!-- Syncfusion JavaScript PDF Library (CDN) -->
-    <script src="https://cdn.syncfusion.com/ej2/33.2.12/dist/ej2.min.js"></script>
+    <script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js"></script>
+    <link href="https://cdn.syncfusion.com/ej2/34.1.29/ej2-buttons/styles/material.css" rel="stylesheet">
 </head>
 
 <div class="container py-4">
@@ -10,7 +11,7 @@ <h1 class="h4 mb-3">Digital signature</h1>
 
 <script>
     // Initialize the Sign PDF button
-    var signBtn = new ej.buttons.Button();
+    var signBtn = new ej.buttons.Button({ cssClass: 'e-primary' });
     signBtn.appendTo('#signBtn');
     // Digitally sign the PDF when the button is clicked
     signBtn.element.onclick = function () {

diff --git a/javascript/pdf-draw-text/README.md b/javascript/pdf-draw-text/README.md
@@ -0,0 +1,22 @@
+# How to Draw Text with Various Formatting in a PDF using JavaScript
+
+This project is a complete working application to draw text with various formatting in a PDF document using JavaScript.
+
+## Getting Started
+
+To get started you need to clone the `pdf-draw-text` 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-draw-text/index.html b/javascript/pdf-draw-text/index.html
@@ -0,0 +1,83 @@
+<head>
+    <!-- Syncfusion JavaScript PDF Library (CDN) -->
+    <script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js"></script>
+    <link href="https://cdn.syncfusion.com/ej2/34.1.29/ej2-buttons/styles/material.css" rel="stylesheet">
+</head>
+<div class="container py-4" style="margin: 5%;">
+    <h1 class="h4 mb-3">Draw Text</h1>
+    <button id="drawText" class="btn btn-primary">Generate PDF</button>
+</div>
+
+<script>
+    // Initialize a new Button instance
+    var button = new ej.buttons.Button({ cssClass: `e-primary` });
+    // Append the button to the DOM element with id 'drawText'
+    button.appendTo('#drawText');
+    // Font URLs
+    var inputData = 'https://cdn.syncfusion.com/content/pdf-resources/noto-naskh-arabic-regular.ttf';
+    // Add click event handler to the button
+    button.element.onclick = async function () {
+        // Load Arabic font bytes
+        const arabicFontBytes = await fetchAsUint8Array(inputData);
+        // Create PDF document and page
+        const document = new ej.pdf.PdfDocument();
+        const page = document.addPage();
+        const graphics = page.graphics;
+        const bounds = graphics.clientSize;
+        // Common colors
+        const headingBrush = new ej.pdf.PdfBrush({ r: 126, g: 70, b: 19 });
+        const greenBrush = new ej.pdf.PdfBrush({ r: 0, g: 255, b: 0 });
+        const blueBrush = new ej.pdf.PdfBrush({ r: 0, g: 0, b: 255 });
+        const redBrush = new ej.pdf.PdfBrush({ r: 255, g: 0, b: 0 });
+        // Fonts
+        const headingFont = document.embedFont(ej.pdf.PdfFontFamily.helvetica, 20, ej.pdf.PdfFontStyle.bold);
+        const standardFont = document.embedFont(ej.pdf.PdfFontFamily.helvetica, 13, ej.pdf.PdfFontStyle.regular);
+        // Embedded TrueType font for Arabic text
+        const arabicFont = new ej.pdf.PdfTrueTypeFont(arabicFontBytes, 13);
+        // CJK font for Japanese text
+        const cjkFont = new ej.pdf.PdfCjkStandardFont(ej.pdf.PdfCjkFontFamily.heiseiKakuGothicW5, 13, ej.pdf.PdfFontStyle.bold);
+        //-------------------------------------------------------------------------
+        // Font Types Section
+        //-------------------------------------------------------------------------
+        graphics.drawString("Font types", headingFont, { x: 200, y: 50, width: bounds.width, height: bounds.height }, headingBrush);
+
+        // Standard font text
+        graphics.drawString("Hello World - Standard font type", standardFont, { x: 10, y: 100, width: bounds.width, height: bounds.height }, greenBrush);
+        // Arabic text using embedded TrueType font
+        graphics.drawString("سنبدأ بنظرة عامة مفاهيمية على مستند PDF بسيط. تم تصميم هذا الفصل ليكون توجيهًا مختصرًا قبل الغوص في مستند حقيقي وإنشاءه من البداية.\nيمكن تقسيم ملف PDF إلى أربعة أجزاء: الرأس والجسم والجدول الإسناد الترافقي والمقطورة. يضع الرأس الملف كملف PDF ، حيث يحدد النص المستند المرئي ، ويسرد جدول الإسناد الترافقي موقع كل شيء في الملف ، ويوفر المقطع الدعائي تعليمات حول كيفية بدء قراءة الملف. - TrueType Font type",
+            arabicFont, { x: 10, y: 130, width: bounds.width, height: bounds.height }, blueBrush
+        );
+        // Japanese text using CJK font
+        graphics.drawString("こんにちは世界 - CJK Font type", cjkFont, { x: 10, y: 250, width: bounds.width, height: bounds.height }, redBrush);
+        //-------------------------------------------------------------------------
+        // Text Alignment Section
+        //-------------------------------------------------------------------------
+        graphics.drawString("Alignment types", headingFont, { x: 200, y: 280, width: bounds.width, height: bounds.height }, headingBrush);
+        // Right-to-left text format
+        let textFormat = new ej.pdf.PdfStringFormat(ej.pdf.PdfTextAlignment.right, ej.pdf.PdfVerticalAlignment.bottom);
+        textFormat.wordSpacing = 2;
+        textFormat.characterSpacing = 1;
+        textFormat.textDirection = ej.pdf.PdfTextDirection.rightToLeft;
+        textFormat.lineLimit = false;
+        textFormat.noClip = true;
+        graphics.drawString("JavaScript PDF Library - Alignment Right and Bottom", standardFont, { x: 10, y: 150, width: 400, height: 200 }, blueBrush, textFormat);
+        // Left-top alignment
+        textFormat = new ej.pdf.PdfStringFormat(ej.pdf.PdfTextAlignment.left, ej.pdf.PdfVerticalAlignment.top);
+        graphics.drawString("JavaScript PDF Library - Alignment Left and Top", standardFont, { x: 10, y: 380, width: 400, height: 200 }, blueBrush, textFormat);
+        // Save and clean up
+        document.save("DrawText.pdf");
+        document.destroy();
+    };
+
+    // Helper: fetch font as 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-export-annotations/index.html b/javascript/pdf-export-annotations/index.html
@@ -1,6 +1,7 @@
 <head>
     <!-- Syncfusion JavaScript PDF Library (CDN) -->
-    <script src="https://cdn.syncfusion.com/ej2/33.2.12/dist/ej2.min.js"></script>
+    <script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js"></script>
+    <link href="https://cdn.syncfusion.com/ej2/34.1.29/ej2-buttons/styles/material.css" rel="stylesheet">
 </head>
 <div class="container py-4">
     <h1 class="h4 mb-3">Export Annotations from PDF</h1>
@@ -9,7 +10,7 @@ <h1 class="h4 mb-3">Export Annotations from PDF</h1>
 
 <script>
     // Export Annotation functionality
-    var exportBtn = new ej.buttons.Button({}, '#exportBtn');
+    var exportBtn = new ej.buttons.Button({ cssClass: 'e-primary' }, '#exportBtn');
     exportBtn.element.onclick = exportAnnotations;
     //Method to export annotation on PDF
     function exportAnnotations() {

diff --git a/javascript/pdf-extract-image/index.html b/javascript/pdf-extract-image/index.html
@@ -1,6 +1,7 @@
 <head>
     <!-- Syncfusion JavaScript PDF Library (CDN) -->
-    <script src="https://cdn.syncfusion.com/ej2/33.2.12/dist/ej2.min.js"></script>
+    <script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js"></script>
+    <link href="https://cdn.syncfusion.com/ej2/34.1.29/ej2-buttons/styles/material.css" rel="stylesheet">
 </head>
 <div class="container py-4">
     <h1 class="h4 mb-3">Extract Image from PDF document</h1>
@@ -10,7 +11,7 @@ <h1 class="h4 mb-3">Extract Image from PDF document</h1>
 <script>
     // Define the source PDF document for image extraction.
     var templateUrl = 'https://cdn.syncfusion.com/content/pdf-resources/image-template.pdf';
-    var extractBtn = new ej.buttons.Button();
+    var extractBtn = new ej.buttons.Button({ cssClass: 'e-primary' });
     extractBtn.appendTo('#extractbtn');
     // Extract images from PDF
     extractBtn.element.onclick = function () {

diff --git a/javascript/pdf-extract-text/index.html b/javascript/pdf-extract-text/index.html
@@ -1,6 +1,7 @@
 <head>
     <!-- Syncfusion JavaScript PDF Library (CDN) -->
-    <script src="https://cdn.syncfusion.com/ej2/33.2.12/dist/ej2.min.js"></script>
+    <script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js"></script>
+    <link href="https://cdn.syncfusion.com/ej2/34.1.29/ej2-buttons/styles/material.css" rel="stylesheet">
 </head>
 <div class="container py-4">
     <h1 class="h4 mb-3">Extract Text from PDF document</h1>
@@ -10,7 +11,7 @@ <h1 class="h4 mb-3">Extract Text from PDF document</h1>
 <script>
     // Template PDF URL
     var templateURL = 'https://cdn.syncfusion.com/content/pdf-resources/pdf-succinctly.pdf';
-    var extractBtn = new ej.buttons.Button();
+    var extractBtn = new ej.buttons.Button({ cssClass: 'e-primary' });
     extractBtn.appendTo('#extractbtn');
     //  Extract Text Button Click
     extractBtn.element.onclick = function () {

diff --git a/javascript/pdf-fill-form/index.html b/javascript/pdf-fill-form/index.html
@@ -1,6 +1,7 @@
 <head>
     <!-- Syncfusion JavaScript PDF Library (CDN) -->
-    <script src="https://cdn.syncfusion.com/ej2/33.2.12/dist/ej2.min.js"></script>
+    <script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js"></script>
+    <link href="https://cdn.syncfusion.com/ej2/34.1.29/ej2-buttons/styles/material.css" rel="stylesheet">
     <!-- Syncfusion components styles (CDN) -->
     <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/33.2.12/material.css">
 </head>
@@ -12,7 +13,7 @@ <h1 class="h4 mb-3">PDF Forms</h1>
 
 <script>
     // Create and initialize the PDF creation button
-    var editForm = new ej.buttons.Button();
+    var editForm = new ej.buttons.Button({ cssClass: 'e-primary' });
     editForm.appendTo('#editForm');
     // Generate an PDF Form when the button is clicked
     editForm.element.onclick = editFormFields;

diff --git a/javascript/pdf-flow-text/README.md b/javascript/pdf-flow-text/README.md
@@ -0,0 +1,22 @@
+# How to Flow Text Across Pages in PDF in JavaScript
+
+This project is a complete working application to flow text across pages in PDF using JavaScript.
+
+## Getting Started
+
+To get started you need to clone the `pdf-flow-text` 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)