SyncfusionExamples · Dhakshin-SF4509 · Aug 18, 2026 · Aug 18, 2026 · Aug 18, 2026
diff --git a/javascript/pdf-add-form/README.md b/javascript/pdf-add-form/README.md
@@ -0,0 +1,22 @@
+# How to Add Form Fields to an Existing PDF in JavaScript
+
+This project is a complete working application to add form fields to an existing PDF in JavaScript
+
+## Getting Started
+
+To get started you need to clone the `pdf-add-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-add-form/index.html b/javascript/pdf-add-form/index.html
@@ -0,0 +1,175 @@
+<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">
+    <!-- Syncfusion components styles (CDN) -->
+    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/33.2.12/material.css">
+</head>
+<div class="container py-4" style="margin: 5%;">
+    <h1 class="h4 mb-3">Add Form fields to Existing PDF</h1>
+    <button id="addForm" class="btn btn-primary" style="margin: 1%;">Generate PDF</button>
+</div>
+<script>
+    // Create and initialize the PDF creation button
+    var addForm = new ej.buttons.Button({ cssClass: 'e-primary' });
+    addForm.appendTo('#addForm');
+    addForm.element.onclick = addFormFields;
+    // Template PDF URL
+    var templateURL = 'https://cdn.syncfusion.com/content/pdf-resources/pdf-succinctly.pdf';
+    function addFormFields() {
+        // Fetch PDF bytes using Promise
+        readFromPdfResources(templateURL)
+            .then(function (pdfBytes) {
+                // Create PDF document and page
+                const document = new ej.pdf.PdfDocument(pdfBytes);
+                const page = document.addPage()
+                const graphics = page.graphics;
+                // Fonts
+                const font = document.embedFont(
+                    ej.pdf.PdfFontFamily.helvetica,
+                    20,
+                    ej.pdf.PdfFontStyle.regular
+                );
+                const radioFont = document.embedFont(
+                    ej.pdf.PdfFontFamily.helvetica,
+                    13,
+                    ej.pdf.PdfFontStyle.regular
+                );
+                const comboFont = document.embedFont(
+                    ej.pdf.PdfFontFamily.helvetica,
+                    10,
+                    ej.pdf.PdfFontStyle.regular
+                );
+                // Common styles
+                const black = { r: 0, g: 0, b: 0 };
+                const white = { r: 255, g: 255, b: 255 };
+                const brush = new ej.pdf.PdfBrush(black);
+                const solidBorder = new ej.pdf.PdfInteractiveBorder({
+                    width: 1,
+                    style: ej.pdf.PdfBorderStyle.solid
+                });
+                // Name field
+                graphics.drawString('Name:', font, { x: 10, y: 58, width: 300, height: 400 }, brush);
+                const nameField = new ej.pdf.PdfTextBoxField(page, 'Name', {
+                    x: 100,
+                    y: 60,
+                    width: 200,
+                    height: 22
+                });
+                document.form.add(nameField);
+                // Gender field
+                graphics.drawString('Gender:', font, { x: 10, y: 98, width: 300, height: 400 }, brush);
+                graphics.drawString('Male', radioFont, { x: 100, y: 105, width: 300, height: 400 }, brush);
+                graphics.drawString('Female', radioFont, { x: 150, y: 105, width: 300, height: 400 }, brush);
+                graphics.drawString('Other', radioFont, { x: 220, y: 105, width: 300, height: 400 }, brush);
+                const genderField = new ej.pdf.PdfRadioButtonListField(page, 'Gender', {
+                    items: [
+                        { name: 'Male', bounds: { x: 130, y: 108, width: 14, height: 10 } },
+                        { name: 'Female', bounds: { x: 195, y: 108, width: 14, height: 10 } },
+                        { name: 'Other', bounds: { x: 255, y: 108, width: 14, height: 10 } }
+                    ],
+                    selectedIndex: 1
+                });
+                document.form.add(genderField);
+                // Mail field
+                graphics.drawString('Mail:', font, { x: 10, y: 138, width: 300, height: 400 }, brush);
+                const mailField = new ej.pdf.PdfTextBoxField(page, 'Name', {
+                    x: 100,
+                    y: 140,
+                    width: 200,
+                    height: 22
+                });
+                document.form.add(mailField);
+                // State dropdown
+                graphics.drawString('State:', font, { x: 10, y: 178, width: 300, height: 400 }, brush);
+                const stateField = new ej.pdf.PdfComboBoxField(
+                    page,
+                    'State',
+                    { x: 100, y: 180, width: 200, height: 22 },
+                    {
+                        items: [
+                            { text: 'California', value: 'CA' },
+                            { text: 'Washington D.C', value: 'DC' },
+                            { text: 'London', value: 'LN' }
+                        ],
+                        color: black,
+                        backColor: white,
+                        borderColor: black,
+                        border: solidBorder,
+                        selectedIndex: 0,
+                        font: comboFont
+                    }
+                );
+                document.form.add(stateField);
+                // Date of birth field
+                graphics.drawString('DOB:', font, { x: 10, y: 218, width: 300, height: 400 }, brush);
+                const dateField = new ej.pdf.PdfTextBoxField(page, 'DateField', {
+                    x: 100,
+                    y: 220,
+                    width: 200,
+                    height: 22
+                });
+                // Default date value
+                dateField.text = '18/08/2003';
+                // Date format validation
+                const format = 'yyyy-mm-dd';
+                dateField.actions.format =
+                    new ej.pdf.PdfJavaScriptAction(`AFDate_FormatEx("${format}");`);
+                dateField.actions.keyPressed =
+                    new ej.pdf.PdfJavaScriptAction(`AFDate_KeystrokeEx("${format}"):`);
+                dateField.actions.validate =
+                    new ej.pdf.PdfJavaScriptAction(`AFDate_Validate("${format}");`);
+                document.form.add(dateField);
+                // Terms and conditions checkbox
+                graphics.drawString('T&C', font, { x: 10, y: 258, width: 300, height: 400 }, brush);
+                const checkboxField = new ej.pdf.PdfCheckBoxField(
+                    'AcceptTerms',
+                    { x: 100, y: 262, width: 14, height: 14 },
+                    page,
+                    {
+                        toolTip: 'Accept the terms and conditions',
+                        backColor: white,
+                        borderColor: black,
+                        border: solidBorder,
+                        checked: true
+                    }
+                );
+                document.form.add(checkboxField);
+                // Submit button
+                const buttonField = new ej.pdf.PdfButtonField(
+                    page,
+                    'Submit',
+                    { x: 10, y: 300, width: 120, height: 28 },
+                    {
+                        toolTip: 'Submit form',
+                        color: white,
+                        backColor: { r: 0, g: 122, b: 204 },
+                        borderColor: black,
+                        border: solidBorder,
+                        text: 'Submit',
+                        highlightMode: ej.pdf.PdfHighlightMode.push
+                    }
+                );
+                // Generate button appearance
+                buttonField.setAppearance(true);
+                document.form.add(buttonField);
+                // Save PDF
+                document.save('FormCreation.pdf');
+                // Release resources
+                document.destroy();
+            });
+    }
+    //   Fetch PDF from URL and return Uint8Array
+    function readFromPdfResources(url) {
+        return fetch(url)
+            .then(function (res) {
+                if (!res.ok) {
+                    throw new Error('Failed to fetch PDF: ' + res.status + ' ' + res.statusText);
+                }
+                return res.arrayBuffer();
+            })
+            .then(function (buf) {
+                return new Uint8Array(buf);
+            });
+    }
+</script>
diff --git a/javascript/pdf-import-annotations/README.md b/javascript/pdf-import-annotations/README.md
@@ -0,0 +1,22 @@
+# How to Import Annotations into a PDF in JavaScript
+
+This project is a complete working application to import annotation into PDF using JavaScript.
+
+## Getting Started
+
+To get started you need to clone the `pdf-import-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-import-annotations/index.html b/javascript/pdf-import-annotations/index.html
@@ -0,0 +1,52 @@
+<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">Import Annotations to PDF</h1>
+    <button id="importBtn" class="btn btn-primary">Import Annotations</button>
+</div>
+<script>
+    // Create the Import Annotations button
+    var importBtn = new ej.buttons.Button({ cssClass: 'e-primary' }, '#importBtn');
+    // Import annotations when the button is clicked
+    importBtn.element.onclick = importAnnotations;
+    // Import annotations into a PDF document
+    function importAnnotations() {
+        Promise.all([
+            fetchAsUint8Array(
+                'https://cdn.syncfusion.com/content/pdf-resources/ImportAnnotations.pdf'
+            ),
+            fetchAsUint8Array(
+                'https://cdn.syncfusion.com/content/pdf-resources/ImportAnnotations.json'
+            )
+        ])
+            .then(function ([pdfBytes, jsonData]) {
+                // Load the PDF document
+                let document = new ej.pdf.PdfDocument(pdfBytes);
+                // Import annotations from the JSON file
+                document.importAnnotations(jsonData, ej.pdf.DataFormat.json);
+                // Save the updated PDF document
+                document.save('ImportAnnotation.pdf');
+                // Dispose the document
+                document.destroy();
+            });
+    }
+    // Fetch a file as a 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-import-export-form/README.md b/javascript/pdf-import-export-form/README.md
@@ -0,0 +1,22 @@
+# How to Import and Export PDF Form Data (FDF, XFDF, JSON) in JavaScript
+
+This project is a complete working application to import and export PDF form data (FDF, XFDF, JSON) in JavaScript
+
+## Getting Started
+
+To get started you need to clone the `pdf-import-export-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-import-export-form/index.html b/javascript/pdf-import-export-form/index.html
@@ -0,0 +1,86 @@
+<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">
+    <!-- Syncfusion components styles (CDN) -->
+    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/33.2.12/material.css">
+</head>
+<div class="container py-4" style="margin: 5%;">
+    <h1 class="h4 mb-3">Export Forms Data</h1>
+    <button id="importForm" class="btn btn-primary" style="margin: 1%;">Import Form Data</button>
+    <button id="exportForm" class="btn btn-primary" style="margin: 1%;">Export Form Data</button>
+</div>
+<script>
+    // Create the Import Form Data button
+    var importForm = new ej.buttons.Button({ cssClass: 'e-primary' });
+    importForm.appendTo('#importForm');
+    // Import form data when the button is clicked
+    importForm.element.onclick = importFormFields;
+    // Import JSON data into a PDF form
+    function importFormFields() {
+        Promise.all([
+            fetchAsUint8Array(
+                'https://cdn.syncfusion.com/content/pdf-resources/form-filling-document.pdf'
+            ),
+            fetchAsUint8Array(
+                'https://cdn.syncfusion.com/content/pdf-resources/ExportedFormData.json'
+            )
+        ])
+            .then(function ([pdfBytes, formData]) {
+                // Load the PDF document
+                const document = new ej.pdf.PdfDocument(pdfBytes);
+                // Import the form data
+                document.importFormData(formData, ej.pdf.DataFormat.json);
+                // Save the updated PDF document
+                document.save('ImportedForm.pdf');
+                // Dispose the document
+                document.destroy();
+            })
+            .catch(function (err) {
+                console.error('Import error:', err);
+                alert('Error: ' + err.message);
+            });
+    }
+    // Create the Export Form Data button
+    var exportForm = new ej.buttons.Button({ cssClass: 'e-primary' });
+    exportForm.appendTo('#exportForm');
+    // Export form data when the button is clicked
+    exportForm.element.onclick = exportFormFields;
+    // Export PDF form data to a JSON file
+    function exportFormFields() {
+        fetchAsUint8Array(
+            'https://cdn.syncfusion.com/content/pdf-resources/filled-form.pdf'
+        )
+            .then(function (pdfBytes) {
+                // Load the PDF document
+                const document = new ej.pdf.PdfDocument(pdfBytes);
+                // Create export settings
+                var settings = new ej.pdf.PdfFormFieldExportSettings();
+                settings.dataFormat = ej.pdf.DataFormat.json;
+                // Export the form data
+                document.exportFormData('ExportedFormData.json', settings);
+                // Dispose the document
+                document.destroy();
+            })
+            .catch(function (err) {
+                console.error(err);
+                alert('Failed to create fillable form PDF');
+            });
+    }
+    // Fetch a file as a 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>