diff --git a/Document-Processing/PDF/PDF-Library/javascript/Annotations.md b/Document-Processing/PDF/PDF-Library/javascript/Annotations.md
new file mode 100644
index 000000000..a050e9f7d
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Library/javascript/Annotations.md
@@ -0,0 +1,1270 @@
+---
+title: Annotation in TypeScript PDF library | Syncfusion
+description: This section explains how to create, modify or remove different type of interactive Annotation by using TypeScript PDF library
+platform: document-processing
+control: PDF
+documentation: UG
+---
+# Annotation in TypeScript PDF library
+
+Syncfusion® JavaScript PDF library provides support for interactive annotations. You can add, delete and modify the annotation from the PDF documents.
+
+## Adding annotations to a PDF document
+
+This example demonstrates how to add annotations to a PDF document using the `PdfAnnotation` class. Adding annotations allows users to include comments, highlights, shapes, and other interactive elements within a PDF, enhancing collaboration and document review.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+import {PdfDocument, PdfPage, PdfPopupAnnotation, PdfPopupIcon, PdfAnnotationBorder} from '@syncfusion/ej2-pdf';
+
+// Creates a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Adds a new page to the PDF
+let page: PdfPage = document.addPage();
+// Creates a new popup annotation
+let popup = new PdfPopupAnnotation(
+ 'Test popup annotation',
+ { x: 10, y: 40, width: 30, height: 30 },
+ {
+ author: 'Syncfusion',
+ subject: 'General',
+ color: { r: 255, g: 255, b: 0 },
+ icon: PdfPopupIcon.newParagraph,
+ open: true
+ });
+popup.border = new PdfAnnotationBorder({width: 4, hRadius: 20, vRadius: 30});
+// Adds annotation to the page
+page.annotations.add(popup);
+// Saves and download the PDF document
+document.save('output.pdf');
+// Destroy the document
+document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a popup annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+import {PdfDocument, PdfPage, PdfPopupAnnotation, PdfPopupIcon, PdfAnnotationBorder} from '@syncfusion/ej2-pdf';
+
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data, password);
+// Access the first page
+let page: PdfPage = document.getPage(0);
+// Creates a new popup annotation
+let popup = new PdfPopupAnnotation(
+ 'Test popup annotation',
+ { x: 10, y: 40, width: 30, height: 30 },
+ {
+ author: 'Syncfusion',
+ subject: 'General',
+ color: { r: 255, g: 255, b: 0 },
+ icon: PdfPopupIcon.newParagraph,
+ open: true
+ });
+popup.border = new PdfAnnotationBorder({width: 4, hRadius: 20, vRadius: 30});
+// Adds annotation to the page
+page.annotations.add(popup);
+// Saves and download the PDF document
+document.save('output.pdf');
+// Destroy the document
+document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Supported annotation types
+
+### File Link Annotation
+
+This example demonstrates how to add a file link annotation to a PDF page using the `PdfFileLinkAnnotation` class. A file link annotation allows linking to an external file from within a PDF document, enabling users to access related resources directly.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+import {PdfDocument, PdfPage, PdfFileLinkAnnotation} from '@syncfusion/ej2-pdf';
+
+// Creates a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Adds a new page to the PDF
+let page: PdfPage = document.addPage();
+// Creates a file link annotation
+let fileLink = new PdfFileLinkAnnotation(
+ { x: 100, y: 150, width: 120, height: 18 },
+ 'logo.png',
+ {
+ text: 'Open attachment',
+ author: 'Syncfusion',
+ subject: 'File Link Annotation',
+ color: { r: 0, g: 0, b: 255 },
+ action: "app.alert('Launching file');"
+ });
+// Adds annotation to the page
+page.annotations.add(fileLink);
+// Saves and download the PDF document
+document.save('output.pdf');
+// Destroy the document
+document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a file link annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+import {PdfDocument, PdfPage, PdfFileLinkAnnotation} from '@syncfusion/ej2-pdf';
+
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data, password);
+// Access the first page
+let page: PdfPage = document.getPage(0);
+// Creates a file link annotation
+let fileLink = new PdfFileLinkAnnotation(
+ { x: 100, y: 150, width: 120, height: 18 },
+ 'logo.png',
+ {
+ text: 'Open attachment',
+ author: 'Syncfusion',
+ subject: 'File Link Annotation',
+ color: { r: 0, g: 0, b: 255 },
+ action: "app.alert('Launching file');"
+ });
+// Adds annotation to the page
+page.annotations.add(fileLink);
+// Saves and download the PDF document
+document.save('output.pdf');
+// Destroy the document
+document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+### Free Text Annotation
+
+This example demonstrates how to add a free text annotation to a PDF page using the `PdfFreeTextAnnotation` class. A free text annotation allows placing text directly on a PDF page, enabling users to add comments or notes that remain visible without requiring interaction.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+import {PdfDocument, PdfPage, PdfFreeTextAnnotation, PdfTextAlignment, PdfAnnotationBorder, PdfBorderStyle, PdfFreeTextAnnotation, PdfLineEndingStyle, PdfStandardFont, PdfFontFamily, PdfFontStyle} from '@syncfusion/ej2-pdf';
+
+// Creates a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Adds a new page to the PDF
+let page: PdfPage = document.addPage();
+// Create new free text annotation
+let freeText = new PdfFreeTextAnnotation({ x: 250, y: 260, width: 180, height: 80 },
+ {
+ text: 'Free Text with Callout',
+ annotationIntent: PdfAnnotationIntent.freeTextCallout,
+ calloutLines: [{ x: 200, y: 320 }, { x: 260, y: 300 }, { x: 260, y: 300 }],
+ lineEndingStyle: PdfLineEndingStyle.openArrow,
+ font: new PdfStandardFont(PdfFontFamily.helvetica, 9, PdfFontStyle.italic),
+ textMarkUpColor: { r: 40, g: 40, b: 40 },
+ innerColor: { r: 240, g: 248, b: 255 },
+ borderColor: { r: 0, g: 0, b: 0 },
+ textAlignment: PdfTextAlignment.left,
+ opacity: 1,
+ border: new PdfAnnotationBorder({ width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid })
+ });
+// Adds annotation to the page
+page.annotations.add(freeText);
+// Saves and download the PDF document
+document.save('output.pdf');
+// Destroy the document
+document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a free text annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+import {PdfDocument, PdfPage, PdfFreeTextAnnotation, PdfTextAlignment, PdfAnnotationBorder, PdfBorderStyle, PdfFreeTextAnnotation, PdfLineEndingStyle, PdfStandardFont, PdfFontFamily, PdfFontStyle} from '@syncfusion/ej2-pdf';
+
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data, password);
+// Access the first page
+let page: PdfPage = document.getPage(0);
+// Create new free text annotation
+let freeText = new PdfFreeTextAnnotation({ x: 250, y: 260, width: 180, height: 80 },
+ {
+ text: 'Free Text with Callout',
+ annotationIntent: PdfAnnotationIntent.freeTextCallout,
+ calloutLines: [{ x: 200, y: 320 }, { x: 260, y: 300 }, { x: 260, y: 300 }],
+ lineEndingStyle: PdfLineEndingStyle.openArrow,
+ font: new PdfStandardFont(PdfFontFamily.helvetica, 9, PdfFontStyle.italic),
+ textMarkUpColor: { r: 40, g: 40, b: 40 },
+ innerColor: { r: 240, g: 248, b: 255 },
+ borderColor: { r: 0, g: 0, b: 0 },
+ textAlignment: PdfTextAlignment.left,
+ opacity: 1,
+ border: new PdfAnnotationBorder({ width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid })
+ });
+// Adds annotation to the page
+page.annotations.add(freeText);
+// Saves and download the PDF document
+document.save('output.pdf');
+// Destroy the document
+document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+### Line Annotation
+
+This example demonstrates how to add a line annotation to a PDF page using the `PdfLineAnnotation` class. A line annotation allows drawing straight lines between two points on a PDF page, often used to highlight connections or indicate measurements.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+import {PdfDocument, PdfPage, PdfLineAnnotation, PdfAnnotationLineEndingStyle, PdfLineEndingStyle, PdfAnnotationCaption, PdfLineCaptionType} from '@syncfusion/ej2-pdf';
+
+// Creates a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Adds a new page to the PDF
+let page: PdfPage = document.addPage();
+// Creates a new line annotation.
+let lineAnnotation: PdfLineAnnotation = new PdfLineAnnotation({ x: 80, y: 420 }, { x: 150, y: 420 }, {
+ text: 'Line Annotation',
+ author: 'Syncfusion',
+ color: { r: 255, g: 0, b: 0 },
+ innerColor: { r: 255, g: 255, b: 0 },
+ lineEndingStyle: new PdfAnnotationLineEndingStyle({ begin: PdfLineEndingStyle.circle, end: PdfLineEndingStyle.diamond }),
+ opacity: 0.5
+});
+// Assigns the leader line
+lineAnnotation.leaderExt = 0;
+lineAnnotation.leaderLine = 0;
+// Assigns the line caption type
+lineAnnotation.caption = new PdfAnnotationCaption({ cap: true, type: PdfLineCaptionType.inline });
+// Adds annotation to the page
+page.annotations.add(lineAnnotation);
+// Saves and download the PDF document
+document.save('output.pdf');
+// Destroy the document
+document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a line annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+import {PdfDocument, PdfPage, PdfLineAnnotation, PdfAnnotationLineEndingStyle, PdfLineEndingStyle, PdfAnnotationCaption, PdfLineCaptionType} from '@syncfusion/ej2-pdf';
+
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data, password);
+// Access the first page
+let page: PdfPage = document.getPage(0);
+// Creates a new line annotation.
+let lineAnnotation: PdfLineAnnotation = new PdfLineAnnotation({ x: 80, y: 420 }, { x: 150, y: 420 }, {
+ text: 'Line Annotation',
+ author: 'Syncfusion',
+ color: { r: 255, g: 0, b: 0 },
+ innerColor: { r: 255, g: 255, b: 0 },
+ lineEndingStyle: new PdfAnnotationLineEndingStyle({ begin: PdfLineEndingStyle.circle, end: PdfLineEndingStyle.diamond }),
+ opacity: 0.5
+});
+// Assigns the leader line
+lineAnnotation.leaderExt = 0;
+lineAnnotation.leaderLine = 0;
+// Assigns the line caption type
+lineAnnotation.caption = new PdfAnnotationCaption({ cap: true, type: PdfLineCaptionType.inline });
+// Adds annotation to the page
+page.annotations.add(lineAnnotation);
+// Saves and download the PDF document
+document.save('output.pdf');
+// Destroy the document
+document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+### Rubber stamp Annotation
+
+This example demonstrates how to add a rubber stamp annotation to a PDF page using the `PdfRubberStampAnnotation` class. A rubber stamp annotation allows applying predefined or custom stamp to visually indicate the status or purpose of a document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+import {PdfDocument, PdfPage, PdfRubberStampAnnotation, PdfRubberStampAnnotationIcon} from '@syncfusion/ej2-pdf';
+
+// Creates a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Adds a new page to the PDF
+let page: PdfPage = document.addPage();
+// Creates a new rubber stamp annotation
+let stamp: PdfRubberStampAnnotation = new PdfRubberStampAnnotation({ x: 40, y: 60, width: 80, height: 20 },
+ {
+ icon: PdfRubberStampAnnotationIcon.draft,
+ text: 'Text Properties Rubber Stamp Annotation'
+ });
+// Adds annotation to the page
+page.annotations.add(stamp);
+// Saves and download the PDF document
+document.save('output.pdf');
+// Destroy the document
+document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a free text annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+import {PdfDocument, PdfPage, PdfRubberStampAnnotation, PdfRubberStampAnnotationIcon} from '@syncfusion/ej2-pdf';
+
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data, password);
+// Access the first page
+let page: PdfPage = document.getPage(0);
+// Creates a new rubber stamp annotation
+let stamp: PdfRubberStampAnnotation = new PdfRubberStampAnnotation({ x: 40, y: 60, width: 80, height: 20 },
+ {
+ icon: PdfRubberStampAnnotationIcon.draft,
+ text: 'Text Properties Rubber Stamp Annotation'
+ });
+// Adds annotation to the page
+page.annotations.add(stamp);
+// Saves and download the PDF document
+document.save('output.pdf');
+// Destroy the document
+document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+### Ink Annotation
+
+This example demonstrates how to add an ink annotation to a PDF page using the `PdfInkAnnotation` class. An ink annotation allows drawing freehand marks or sketches directly on a PDF page.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+import {PdfDocument, PdfPage, PdfInkAnnotation} from '@syncfusion/ej2-pdf';
+
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Add a new page to the PDF
+let page: PdfPage = document.addPage();
+// Create an ink annotation
+let annotation = new PdfInkAnnotation(
+ { x: 50, y: 100, width: 200, height: 150 },
+ [
+ { x: 60, y: 120 },
+ { x: 120, y: 180 },
+ { x: 200, y: 160 }
+ ],
+ {
+ text: 'Ink',
+ author: 'Syncfusion',
+ subject: 'Ink Annotation',
+ color: { r: 0, g: 0, b: 255 },
+ thickness: 2,
+ opacity: 0.8,
+ pointsCollection: [
+ [
+ { x: 60, y: 120 },
+ { x: 90, y: 130 },
+ { x: 110, y: 140 }
+ ],
+ [
+ { x: 120, y: 180 },
+ { x: 150, y: 175 }
+ ]
+ ]
+ }
+);
+// Add annotation to the page
+page.annotations.add(annotation);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a ink annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+import {PdfDocument, PdfPage, PdfInkAnnotation} from '@syncfusion/ej2-pdf';
+
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data, password);
+// Access the first page
+let page: PdfPage = document.getPage(0);
+// Create an ink annotation
+let annotation = new PdfInkAnnotation(
+ { x: 50, y: 100, width: 200, height: 150 },
+ [
+ { x: 60, y: 120 },
+ { x: 120, y: 180 },
+ { x: 200, y: 160 }
+ ],
+ {
+ text: 'Ink',
+ author: 'Syncfusion',
+ subject: 'Ink Annotation',
+ color: { r: 0, g: 0, b: 255 },
+ thickness: 2,
+ opacity: 0.8,
+ pointsCollection: [
+ [
+ { x: 60, y: 120 },
+ { x: 90, y: 130 },
+ { x: 110, y: 140 }
+ ],
+ [
+ { x: 120, y: 180 },
+ { x: 150, y: 175 }
+ ]
+ ]
+ }
+);
+// Add annotation to the page
+page.annotations.add(annotation);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+### Pop-up Annotation
+
+This example demonstrates how to add a popup annotation to a PDF document using the `PdfPopupAnnotation` class. A popup annotation allows you to display additional information or comments within the PDF at a specified position and size.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfPage, PdfPopupAnnotation, PdfPopupIcon, PdfAnnotationState, PdfAnnotationStateModel} from '@syncfusion/ej2-pdf';
+
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Adds a new page to the PDF
+ let page: PdfPage = document.addPage();
+ // Create a new popup annotation
+ let annotation = new PdfPopupAnnotation('Review this paragraph',
+ {x: 10, y: 40, width: 30, height: 30},
+ {
+ author: 'Reviewer',
+ subject: 'General',
+ color: { r: 255, g: 255, b: 0 },
+ icon: PdfPopupIcon.comment,
+ open: true,
+ state: PdfAnnotationState.accepted,
+ stateModel: PdfAnnotationStateModel.review
+ }
+ );
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a popup annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfPage, PdfPopupAnnotation, PdfPopupIcon, PdfAnnotationState, PdfAnnotationStateModel} from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ let annotation = new PdfPopupAnnotation('Review this paragraph',
+ {x: 10, y: 40, width: 30, height: 30},
+ {
+ author: 'Reviewer',
+ subject: 'General',
+ color: { r: 255, g: 255, b: 0 },
+ icon: PdfPopupIcon.comment,
+ open: true,
+ state: PdfAnnotationState.accepted,
+ stateModel: PdfAnnotationStateModel.review
+ }
+ );
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+### File Attachment Annotation
+
+This example demonstrates how to add a file attachment annotation to a PDF page using the `PdfAttachmentAnnotation` class. A file attachment annotation allows embedding external files within a PDF document, enabling users to include supporting documents or resources for easy access.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfPage, PdfAttachmentAnnotation, PdfAttachmentIcon, PdfAnnotationBorder, PdfBorderStyle} from '@syncfusion/ej2-pdf';
+
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Adds a new page to the PDF
+ let page: PdfPage = document.addPage();
+ // Create a new attachment annotation
+ let annotation = new PdfAttachmentAnnotation(
+ { x: 300, y: 200, width: 30, height: 30 },
+ 'Nature.jpg',
+ imageData,
+ { text: 'Attachment', icon: PdfAttachmentIcon.pushPin, color: { r: 255, g: 0, b: 0 }, opacity: 1,
+ border: new PdfAnnotationBorder({width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid})}
+ );
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a attachment annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfPage, PdfAttachmentAnnotation, PdfAttachmentIcon, PdfAnnotationBorder, PdfBorderStyle} from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Create a new attachment annotation
+ let annotation = new PdfAttachmentAnnotation(
+ { x: 300, y: 200, width: 30, height: 30 },
+ 'Nature.jpg',
+ imageData,
+ { text: 'Attachment', icon: PdfAttachmentIcon.pushPin, color: { r: 255, g: 0, b: 0 }, opacity: 1,
+ border: new PdfAnnotationBorder({width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid})}
+ );
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+### Sound Annotation
+
+This example demonstrates how to access a sound annotation to a PDF page using the `PdfSoundAnnotation` class.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfPage, PdfSoundAnnotation} from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Access the annotation at index 0
+ let annotation: PdfSoundAnnotation = page.annotations.at(0) as PdfSoundAnnotation;
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+### URI Annotation
+
+This example demonstrates how to add a URI annotation to a PDF page using the `PdfUriAnnotation` class. A URI annotation allows linking to a web address or online resource from within a PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfPage, PdfUriAnnotation} from '@syncfusion/ej2-pdf';
+
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Adds a new page to the PDF
+ let page: PdfPage = document.addPage();
+ // Create a new URI annotation
+ let annotation: PdfUriAnnotation = new PdfUriAnnotation({x: 100, y: 150, width: 200, height: 100}, 'http://www.google.com');
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a URI annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfPage, PdfUriAnnotation} from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Create a new URI annotation
+ let annotation: PdfUriAnnotation = new PdfUriAnnotation({x: 100, y: 150, width: 200, height: 100}, 'http://www.google.com');
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+### Document Link Annotation
+
+This example demonstrates how to add a document link annotation to a PDF page using the `PdfDocumentLinkAnnotation` class. A document link annotation allows creating clickable links that navigate to a specific page or location within the same PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfPage, PdfDocumentLinkAnnotation, PdfDestinationMode, PdfBorderStyle} from '@syncfusion/ej2-pdf';
+
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Adds a new page to the PDF
+ let page: PdfPage = document.addPage();
+ // Create new document link annotation
+ let annotation = new PdfDocumentLinkAnnotation(
+ { x: 80, y: 100, width: 120, height: 18 },
+ new PdfDestination({page , location: { x: 0, y: 0 }, mode: PdfDestinationMode.fitToPage}),
+ { color: { r: 0, g: 128, b: 0 }, opacity: 1,
+ border: new PdfAnnotationBorder({width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid})}
+ );
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a document link annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfPage, PdfDocumentLinkAnnotation, PdfDestinationMode, PdfBorderStyle} from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Create new document link annotation
+ let annotation = new PdfDocumentLinkAnnotation(
+ { x: 80, y: 100, width: 120, height: 18 },
+ new PdfDestination({page , location: { x: 0, y: 0 }, mode: PdfDestinationMode.fitToPage}),
+ { color: { r: 0, g: 128, b: 0 }, opacity: 1,
+ border: new PdfAnnotationBorder({width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid})}
+ );
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+### Redaction Annotation
+
+This example demonstrates how to add a redaction annotation to a PDF page using the `PdfRedactionAnnotation` class. A redaction annotation allows marking areas of a PDF for permanent removal of sensitive content, ensuring confidentiality and compliance with privacy requirements.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfPage, PdfRedactionAnnotation, PdfFontFamily, PdfFontStyle } from '@syncfusion/ej2-pdf';
+
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Adds a new page to the PDF
+ let page: PdfPage = document.addPage();
+ // Create a new redaction annotation
+ let annotation: PdfRedactionAnnotation = new PdfRedactionAnnotation({x: 100, y: 100, width: 100, height: 100},
+ { borderColor: {r: 255, g: 0, b: 0},
+ repeatText: true,
+ overlayText: 'Sample Overlay',
+ font: document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular),
+ textColor: {r: 0, g: 0, b: 0},
+ appearanceFillColor: {r: 255, g: 255, b: 255}
+ });
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a document link annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfPage, PdfRedactionAnnotation, PdfFontFamily, PdfFontStyle } from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Create a new redaction annotation
+ let annotation: PdfRedactionAnnotation = new PdfRedactionAnnotation({x: 100, y: 100, width: 100, height: 100},
+ { borderColor: {r: 255, g: 0, b: 0},
+ repeatText: true,
+ overlayText: 'Sample Overlay',
+ font: document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular),
+ textColor: {r: 0, g: 0, b: 0},
+ appearanceFillColor: {r: 255, g: 255, b: 255}
+ });
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+### Watermark Annotation
+
+This example demonstrates how to add a watermark annotation to a PDF page using the `PdfWatermarkAnnotation` class. A watermark annotation allows overlaying text or images on a PDF page, typically used for branding, confidentiality notices, or document status indicators.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfPage, PdfWatermarkAnnotation} from '@syncfusion/ej2-pdf';
+
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Adds a new page to the PDF
+ let page: PdfPage = document.addPage();
+ // Create a new water mark annotation
+ let annotation: PdfWatermarkAnnotation = new PdfWatermarkAnnotation('Water Mark', {x: 50, y: 100, width: 100, height: 50});
+ // Set the color of the annotation
+ annotation.color = {r: 0, g: 0, b: 0};
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a watermark annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfPage, PdfWatermarkAnnotation} from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Create a new water mark annotation
+ let annotation: PdfWatermarkAnnotation = new PdfWatermarkAnnotation('Water Mark', {x: 50, y: 100, width: 100, height: 50});
+ // Set the color of the annotation
+ annotation.color = {r: 0, g: 0, b: 0};
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+### Text Markup Annotation
+
+This example demonstrates how to add a text markup annotation to a PDF page using the `PdfTextMarkupAnnotation` class. A text markup annotation allows highlighting, underlining, or striking out text within a PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfPage, PdfTextMarkupAnnotation, PdfTextMarkupAnnotationType, PdfAnnotationBorder, PdfBorderStyle} from '@syncfusion/ej2-pdf';
+
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Adds a new page to the PDF
+ let page: PdfPage = document.addPage();
+ // Create a new text markup annotation
+ // Create a new text markup annotation
+ let annotation = new PdfTextMarkupAnnotation('Water Mark', {x: 0, y: 0, width: 0, height: 0}, {
+ boundsCollection: [{x: 50, y: 200, width: 120, height: 14}, {x: 50, y: 215, width: 90, height: 14}],
+ textMarkupType: PdfTextMarkupAnnotationType.underline, author: 'Syncfusion', subject: 'Annotation',
+ textMarkUpColor: {r: 0, g: 128, b: 255}, innerColor: {r: 0, g: 0, b: 255}, opacity: 0.5,
+ border: new PdfAnnotationBorder({width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid})
+ });
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a text markup annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfPage, PdfTextMarkupAnnotation, PdfTextMarkupAnnotationType, PdfAnnotationBorder, PdfBorderStyle} from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Create a new text markup annotation
+ // Create a new text markup annotation
+ let annotation = new PdfTextMarkupAnnotation('Water Mark', {x: 0, y: 0, width: 0, height: 0}, {
+ boundsCollection: [{x: 50, y: 200, width: 120, height: 14}, {x: 50, y: 215, width: 90, height: 14}],
+ textMarkupType: PdfTextMarkupAnnotationType.underline, author: 'Syncfusion', subject: 'Annotation',
+ textMarkUpColor: {r: 0, g: 128, b: 255}, innerColor: {r: 0, g: 0, b: 255}, opacity: 0.5,
+ border: new PdfAnnotationBorder({width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid})
+ });
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Cloud border style Annotation
+
+### PdfRectangleAnnotation
+
+This example demonstrates how to add a rectangle annotation to a PDF page using the `PdfRectangleAnnotation` class. A rectangle annotation allows drawing rectangular shapes on a PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfPage, PdfRectangleAnnotation, PdfAnnotationBorder, PdfBorderStyle} from '@syncfusion/ej2-pdf';
+
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Adds a new page to the PDF
+ let page: PdfPage = document.addPage();
+ // Create a new square annotation with bounds
+ let annotation = new PdfRectangleAnnotation({ x: 50, y: 80, width: 200, height: 100 }, {
+ text: 'Rect', author: 'Syncfusion', subject: 'Rectangle Annotation',
+ color: { r: 255, g: 0, b: 0 },
+ innerColor: { r: 255, g: 240, b: 240 },
+ opacity: 0.6,
+ border: new PdfAnnotationBorder({width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid})
+ });
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a rectangle annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfPage, PdfRectangleAnnotation, PdfAnnotationBorder, PdfBorderStyle} from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Create a new square annotation with bounds
+ let annotation = new PdfRectangleAnnotation({ x: 50, y: 80, width: 200, height: 100 }, {
+ text: 'Rect', author: 'Syncfusion', subject: 'Rectangle Annotation',
+ color: { r: 255, g: 0, b: 0 },
+ innerColor: { r: 255, g: 240, b: 240 },
+ opacity: 0.6,
+ border: new PdfAnnotationBorder({width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid})
+ });
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+### Polygon Annotation
+
+This example demonstrates how to add a polygon annotation to a PDF page using the `PdfPolygonAnnotation` class. A polygon annotation allows drawing multi-sided shapes on a PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfPage, PdfPolygonAnnotation, PdfAnnotationBorder, PdfBorderStyle } from '@syncfusion/ej2-pdf';
+
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Adds a new page to the PDF
+ let page: PdfPage = document.addPage();
+ // Create a new polygon annotation with bounds
+ let annotation = new PdfPolygonAnnotation(
+ [{ x: 100, y: 300 }, { x: 150, y: 200 }, { x: 300, y: 200 }, { x: 350, y: 300 }, { x: 300, y: 400 }, { x: 150, y: 400 }],
+ {
+ text: 'Polygon', author: 'Syncfusion', subject: 'Polygon Annotation',
+ color: { r: 0, g: 128, b: 255 },
+ innerColor: { r: 220, g: 240, b: 255 },
+ opacity: 0.7,
+ border: new PdfAnnotationBorder({width: 2, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid})
+ });
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a polygon annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfPage, PdfPolygonAnnotation, PdfAnnotationBorder, PdfBorderStyle } from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Create a new polygon annotation with bounds
+ let annotation = new PdfPolygonAnnotation(
+ [{ x: 100, y: 300 }, { x: 150, y: 200 }, { x: 300, y: 200 }, { x: 350, y: 300 }, { x: 300, y: 400 }, { x: 150, y: 400 }],
+ {
+ text: 'Polygon', author: 'Syncfusion', subject: 'Polygon Annotation',
+ color: { r: 0, g: 128, b: 255 },
+ innerColor: { r: 220, g: 240, b: 255 },
+ opacity: 0.7,
+ border: new PdfAnnotationBorder({width: 2, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid})
+ });
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+### PdfCircleAnnotation
+
+This example demonstrates how to add a circle annotation to a PDF page using the `PdfCircleAnnotation` class. A circle annotation allows drawing circular or oval shapes on a PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfPage, PdfCircleAnnotation, PdfAnnotationBorder, PdfBorderStyle, PdfMeasurementUnit, PdfCircleMeasurementType} from '@syncfusion/ej2-pdf';
+
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Adds a new page to the PDF
+ let page: PdfPage = document.addPage();
+ // Create a new circle annotation with circle bounds
+ let annotation = new PdfCircleAnnotation({ x: 50, y: 100, width: 120, height: 120 }, {
+ text: 'Diameter',
+ author: 'Syncfusion',
+ color: {r: 255, g: 0, b: 0},
+ innerColor: {r: 255, g: 255, b: 200},
+ opacity: 0.9,
+ border: new PdfAnnotationBorder({width: 2, hRadius: 0, vRadius: 0, style: PdfBorderStyle.dashed, dash: [3, 2]}),
+ measure: { unit: PdfMeasurementUnit.centimeter, type: PdfCircleMeasurementType.diameter }
+ });
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a circle annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfPage, PdfCircleAnnotation, PdfAnnotationBorder, PdfBorderStyle, PdfMeasurementUnit, PdfCircleMeasurementType} from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Create a new circle annotation with circle bounds
+ let annotation = new PdfCircleAnnotation({ x: 50, y: 100, width: 120, height: 120 }, {
+ text: 'Diameter',
+ author: 'Syncfusion',
+ color: {r: 255, g: 0, b: 0},
+ innerColor: {r: 255, g: 255, b: 200},
+ opacity: 0.9,
+ border: new PdfAnnotationBorder({width: 2, hRadius: 0, vRadius: 0, style: PdfBorderStyle.dashed, dash: [3, 2]}),
+ measure: { unit: PdfMeasurementUnit.centimeter, type: PdfCircleMeasurementType.diameter }
+ });
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+### PdfEllipseAnnotation
+
+This example demonstrates how to add an ellipse annotation to a PDF page using the `PdfEllipseAnnotation` class. An ellipse annotation allows drawing elliptical shapes on a PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfPage, PdfEllipseAnnotation, PdfAnnotationBorder, PdfBorderStyle} from '@syncfusion/ej2-pdf';
+
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Adds a new page to the PDF
+ let page: PdfPage = document.addPage();
+ // Create a new ellipse annotation with bounds
+ let annotation = new PdfEllipseAnnotation({ x: 80, y: 120, width: 160, height: 100 }, {
+ text: 'Ellipse', author: 'Syncfusion', subject: 'Ellipse Annotation',
+ color: {r: 0, g: 128, b: 255},
+ innerColor: {r: 220, g: 240, b: 255},
+ opacity: 0.7,
+ border: new PdfAnnotationBorder({width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid})
+ });
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a ellipse annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfPage, PdfEllipseAnnotation, PdfAnnotationBorder, PdfBorderStyle} from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Create a new ellipse annotation with bounds
+ let annotation = new PdfEllipseAnnotation({ x: 80, y: 120, width: 160, height: 100 }, {
+ text: 'Ellipse', author: 'Syncfusion', subject: 'Ellipse Annotation',
+ color: {r: 0, g: 128, b: 255},
+ innerColor: {r: 220, g: 240, b: 255},
+ opacity: 0.7,
+ border: new PdfAnnotationBorder({width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid})
+ });
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Measurement Annotations
+
+This example demonstrates how to access a measurement annotation from a PDF page using the `PdfLineAnnotation` class. A measurement annotation allows defining and displaying dimensions such as distances or lengths within a PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfPage, PdfLineAnnotation, PdfMeasurementUnit} from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Access the annotation at index 0
+ let annotation: PdfLineAnnotation = page.annotations.at(0) PdfLineAnnotation;
+ // Sets the measurement unit of line measurement annoation as centimeter
+ annotation.unit = PdfMeasurementUnit.centimeter;
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Modifying the annotations
+
+This example demonstrates how to modify an existing annotation in a PDF page using the PdfAnnotation class. Modifying annotations allows updating properties such as position, color, content, or appearance, enabling customization and refinement of the document’s interactive elements.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfPage, PdfPopupAnnotation} from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Get the first annotation of the page
+ let annotation: PdfPopupAnnotation = page.annotations.at(0) as PdfPopupAnnotation;
+ // Modified its properties
+ annotation.text ='Popup annotation';
+ annotation.color = {r: 0, g: 128, b: 255};
+ annotation.opacity = 0.5;
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Removing annotations from an existing PDF
+
+This example demonstrates how to remove an annotation from a PDF page using the PdfAnnotationCollection class. Removing annotations allows deleting comments, shapes, or other interactive elements from a PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfPage, PdfAnnotation} from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Access first annotation from the PDF page
+ let annotation: PdfAnnotation = page.annotations.at(0);
+ // Remove an annotation from the collection
+ page.annotations.remove(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Flatten annotation
+
+This example demonstrates how to flatten annotations in a PDF document using the PdfAnnotation class. Flattening annotations converts interactive elements such as comments, highlights, and shapes into static content.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfLineAnnotation} from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Get the first page
+ let page: PdfPage = document.getPage(0) as PdfPage;
+ // Get the first annotation of the page
+ let annotation: PdfLineAnnotation = page.annotations.at(0) as PdfLineAnnotation;
+ // Sets the boolean flag indicating whether the annotation have been flattened or not.
+ annotation.flatten = true;
+ // Destroy the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Importing annotations
+
+This example demonstrates how to import annotations into a PDF document using the PdfDocument. `importAnnotations` method.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, DataFormat} from '@syncfusion/ej2-pdf';
+
+ // Load the base PDF document from resources
+ let pdfDocument: PdfDocument = new PdfDocument(data, password);
+ // Imports annotations from to the PDF document.
+ document.importAnnotations('annotations.json', DataFormat.json);
+ // Save the PDF document
+ pdfDocument.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Exporting annotations
+
+This example demonstrates how to export annotations from a PDF document using the PdfDocument.exportAnnotations method.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, Uint8Array} from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Exports the annotations from the PDF document.
+ let data: Uint8Array = document.exportAnnotations();
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Bookmarks.md b/Document-Processing/PDF/PDF-Library/javascript/Bookmarks.md
new file mode 100644
index 000000000..6f1fdea13
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Library/javascript/Bookmarks.md
@@ -0,0 +1,190 @@
+---
+title: Bookmarks in TypeScript PDF library | Syncfusion
+description: This section explains how to add, modify and remove bookmarks in the PDF document by using TypeScript PDF library
+platform: document-processing
+control: PDF
+documentation: UG
+---
+# Bookmarks in TypeScript PDF library
+
+Essential® PDF provides support to insert, remove and modify the bookmarks in the PDF Document.
+
+## Adding Bookmarks in a PDF
+
+This example demonstrates how to add bookmarks to a PDF document using the `PdfBookmark` class. Bookmarks provide an easy way to navigate through different sections of a PDF file.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfPage, PdfBookmarkBase, PdfDestination} from '@syncfusion/ej2-pdf';
+
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add page
+ let page: PdfPage = document.addPage();
+ // Get the bookmarks
+ let bookmarks: PdfBookmarkBase = document.bookmarks;
+ // Add a new outline to the PDF document
+ let bookmark: PdfBookmark = bookmarks.add('Introduction');
+ // Sets destination to the bookmark
+ bookmark.destination = new PdfDestination(page, {x: 100, y: 200});
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Adding Bookmarks in an existing PDF document
+
+This example demonstrates how to add bookmarks to an existing PDF document using the `PdfBookmark` class. This allows you to enhance navigation in already created PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfPage, PdfBookmarkBase, PdfDestination} from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Get page
+ let page: PdfPage = document.getPage(0);
+ // Get the bookmarks
+ let bookmarks: PdfBookmarkBase = document.bookmarks;
+ // Gets the bookmark at the specified index
+ let bookmark: PdfBookmark = bookmarks.at(0) as PdfBookmark;
+ // Set the destination
+ bookmark.destination = new PdfDestination(page, {x: 100, y: 200});
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Inserting Bookmarks in an existing PDF
+
+This example demonstrates how to insert bookmarks at a specific position in an existing PDF document using the `PdfBookmark` class. This feature allows precise control over bookmark order.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfPage, PdfBookmarkBase, PdfDestination} from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Get the first page
+ let page: PdfPage = document.getPage(0) as PdfPage;
+ // Get the bookmarks
+ let bookmarks: PdfBookmarkBase = document.bookmarks;
+ // Add a new outline to the PDF document
+ let bookmark: PdfBookmark = bookmarks.add('Introduction', 1);
+ // Sets destination to the bookmark
+ bookmark.destination = new PdfDestination(page, {x: 100, y: 200});
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Removing Bookmarks from an existing PDF
+
+This example demonstrates how to remove bookmarks from an existing PDF document using the `PdfBookmark` class.
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfPage, PdfBookmarkBase} from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Get the first page
+ let page: PdfPage = document.getPage(0) as PdfPage;
+ // Get the bookmarks
+ let bookmarks: PdfBookmarkBase = document.bookmarks;
+ // Remove specified bookmark from the document.
+ bookmarks.remove('Introduction');
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Removing Bookmark from the document at the specified index
+
+This example demonstrates how to remove bookmarks from the document at the specific index using the `PdfBookmark` class.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfPage, PdfBookmarkBase, PdfDestination} from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Get the first page
+ let page: PdfPage = document.getPage(0) as PdfPage;
+ // Get the bookmarks
+ let bookmarks: PdfBookmarkBase = document.bookmarks;
+ // Remove the bookmark from the document at the index 1.
+ bookmarks.remove(1);
+ // Sets destination to the bookmark
+ bookmark.destination = new PdfDestination(page, {x: 10, 10});
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Removing all the Bookmark from the collection
+
+This example demonstrates how to removes all the bookmarks from the collection using the `PdfBookmark` class.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfPage, PdfBookmarkBase} from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Get the bookmarks
+ let bookmarks: PdfBookmarkBase = document.bookmarks;
+ // Remove all the bookmark from the collection.
+ bookmarks.clear();
+ // Get count after removal of all outlines.
+ let count: number = bookmarks.count;
+ // Save the document
+ document.save('Output.pdf');
+ // Destroy the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Bookmark page index in an existing PDF document
+
+This example demonstrates how to retrieve the page index associated with a bookmark in an existing PDF document using the `PdfBookmark` class. This helps identify the exact location of the bookmark.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfBookmarkBase} from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Get bookmarks
+ let bookmarks: PdfBookmarkBase = document.bookmarks;
+ // Get bookmark at the specified index
+ let pageIndex: number = bookmarks.destination.pageIndex;
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-angular.md b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-angular.md
new file mode 100644
index 000000000..4da892b11
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-angular.md
@@ -0,0 +1,118 @@
+---
+layout: post
+title: Create or Generate PDF file in Angular | Syncfusion
+description: Learn how to create a PDF file in Angular with easy steps using Syncfusion TypeScript PDF library without depending on Adobe
+platform: document-processing
+control: PDF
+documentation: ug
+keywords: angular create pdf, angular generate pdf, angular pdf library, ej2 pdf angular, TypeScript
+---
+
+# Create or Generate PDF file in Angular application
+
+The Syncfusion® TypeScript PDF library is used to create, read, and edit PDF documents. This library also offers functionality to merge, split, stamp, fill forms, and secure PDF files.
+
+This guide explains how to integrate the TypeScript PDF library into an Angular application.
+
+## Setup Angular Environment
+
+You can use the [`Angular CLI`](https://github.com/angular/angular-cli) to setup your Angular applications.
+To install the latest Angular CLI globally use the following command.
+
+```bash
+npm install -g @angular/cli
+```
+
+N> Use the command **npm install --save @angular/cli@12.0.2** to install the Angular CLI version 12.0.2
+
+## Create an Angular Application
+
+Start a new Angular application using the Angular CLI command as follows.
+
+```bash
+ng new my-app
+cd my-app
+```
+## Create a PDF document using TypeScript
+
+* **Add script reference** : Add the required scripts using the CDN inside the `` of `src/index.cshtml` as follows:
+
+{% tabs %}
+{% highlight c# tabtitle="index.html" %}
+
+
+ ...
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+* Add a simple button to `app.component.html` and attach a click handler that uses the TypeScript PDF API to create a new PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.html" %}
+
+
+
+ PDF creation example
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+* Include the following namespaces in `app.component.ts` file.
+
+{% tabs %}
+{% highlight c# tabtitle="~/app.component.ts" %}
+
+import { NgModule } from '@angular/core';
+import { PdfDocument, PdfPage, PdfStandardFont, PdfPen, PdfBrush } from '@syncfusion/ej2-pdf';
+
+{% endhighlight %}
+{% endtabs %}
+
+* Include the following code example in the click event of the button in `app.component.ts` to generate a PDF document.
+
+{% tabs %}
+{% highlight html tabtitle="app.component.ts" %}
+
+document.getElementById('normalButton').onclick = (): void => {
+ // Create a new PDF document
+ const document = new PdfDocument();
+ // Add a new page
+ const page: PdfPage = document.addPage();
+ // Get graphics from the page
+ const graphics: PdfGraphics = page.graphics;
+ // Set font
+ const font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 36, PdfFontStyle.regular);
+ // Create a new black brush
+ const brush = new PdfBrush({r: 0, g: 0, b: 0});
+ // Draw text
+ graphics.drawString('Hello World!!!', font, {x: 20, y: 20, width: graphics.clientSize.width - 20, height: 60}, brush);
+ // Save and download PDF
+ document.save('Output.pdf');
+ // Destroy the PDF document instance
+ document.destroy();
+ });
+};
+
+{% endhighlight %}
+{% endtabs %}
+
+## Run the application
+
+Use the following command to run the application in browser.
+
+```javascript
+ng serve --open
+```
+
+By executing the program, you will get the PDF document as follows.
+
+
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-asp-net-core.md b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-asp-net-core.md
new file mode 100644
index 000000000..34da2975e
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-asp-net-core.md
@@ -0,0 +1,84 @@
+---
+layout: post
+title: Create or Generate PDF in ASP.NET Core | Syncfusion
+description: Learn how to create or generate a PDF file in ASP.NET Core applications with easy steps using Syncfusion JavaScript PDF library without depending on Adobe.
+platform: document-processing
+control: PDF
+documentation: ug
+keywords: .net core create pdf, edit pdf, merge, pdf form, fill form, digital sign, table, javascript, dotnet core pdf, asp generate pdf, aspx generate pdf
+---
+
+# Create or Generate PDF in ASP.NET Core
+
+The Syncfusion® JavaScript PDF library is used to create, read, and edit PDF documents. This library also offers functionality to merge, split, stamp, forms, and secure PDF files.
+
+This guide explains how to integrate the JavaScript PDF library into an ASP.NET Core application.
+
+## Integrate PDF library into an ASP.NET Core application
+
+1. Start Visual Studio and select **Create a new project**.
+2. In the **Create a new project** dialog, select **ASP.NET Core Web App**.
+
+3. In the **Configure your new project** dialog, enter the project name and select **Next**.
+
+4. In the **Additional information** dialog, select a .NET LTS version (for example, **.NET 8.0 (Long-term Support)**) and then select **Create**.
+
+
+5. **Add script reference** : Add the required scripts using the CDN inside the `` of `~/Views/Shared/_Layout.cshtml` as follows:
+
+{% tabs %}
+{% highlight c# tabtitle="~/_Layout.cshtml" %}
+
+
+ ...
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+6. **Create a PDF document** : Add the script in `~/Views/Home/Index.cshtml` by creating a button and attaching a click event that uses the JavaScript PDF API to generate a PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="~/Index.cshtml" %}
+
+
+
Create PDF document
+
Click the button to generate and download a PDF.
+
+
+
+@section Scripts {
+
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+7. **Build the project** : Click on Build > Build Solution or press Ctrl + Shift + B to build the project.
+
+8. **Run the project** : Click the Start button (green arrow) or press F5 to run the app.
+
+By executing the program, you will generate the following PDF document.
+
+
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-asp-net-mvc.md b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-asp-net-mvc.md
new file mode 100644
index 000000000..704a1524c
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-asp-net-mvc.md
@@ -0,0 +1,84 @@
+---
+layout: post
+title: Create or Generate PDF file in ASP.NET Core MVC | Syncfusion
+description: Learn how to create a PDF file in ASP.NET Core MVC with easy steps using Syncfusion JavaScript PDF library without depending on Adobe
+platform: document-processing
+control: PDF
+documentation: ug
+keywords: MVC, javascript, pdf
+---
+
+# Create or Generate PDF file in ASP.NET Core MVC
+
+The Syncfusion® JavaScript PDF library is used to create, read, and edit PDF documents. This library also offers functionality to merge, split, stamp, fill forms, and secure PDF files.
+
+This guide explains how to integrate the JavaScript PDF library into an ASP.NET Core MVC application.
+
+## Integrate PDF library into an ASP.NET MVC application
+
+1. Start Visual Studio and select **Create a new project**.
+2. Create a new ASP.NET MVC Web Application project.
+
+3. Choose the target framework.
+
+4. Select Web Application pattern (MVC) for the project and then select **Create** button.
+
+
+5. **Add script reference** : Add the required scripts using the CDN inside the `` of `~/Views/Shared/_Layout.cshtml` as follows:
+
+{% tabs %}
+{% highlight c# tabtitle="~/_Layout.cshtml" %}
+
+
+ ...
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+6. **Create a PDF document** : Add the script in `~/Views/Home/Index.cshtml` by creating a button and attaching a click event that uses the JavaScript PDF API to generate a PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="~/Index.cshtml" %}
+
+
+
Create PDF document
+
Click the button to generate and download a PDF.
+
+
+
+@section Scripts {
+
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+7. **Build the project** : Click on Build > Build Solution or press Ctrl + Shift + B to build the project.
+
+8. **Run the project** : Click the Start button (green arrow) or press F5 to run the app.
+
+By executing the program, you will generate the following PDF document.
+
+
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-javascript.md b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-javascript.md
new file mode 100644
index 000000000..abcbb4807
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-javascript.md
@@ -0,0 +1,84 @@
+---
+layout: post
+title: Create or Generate PDF file in JavaScript | Syncfusion
+description: Learn how to create a PDF file in JavaScript with easy steps using Syncfusion JavaScript PDF library without depending on Adobe
+platform: document-processing
+control: PDF
+documentation: ug
+keywords: javascript, pdf, script
+---
+
+# Create or Generate PDF file in JavaScript
+
+The Essential JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers.
+
+## Component Initialization with CDN link for script and style reference
+
+**Step 1:** Create an app folder `my-app` for the Essential JS 2 JavaScript components.
+
+**Step 2:** The Essential JS 2 component's global scripts and styles are already hosted in the below CDN link formats.
+
+**Syntax:**
+> Script: `https://cdn.syncfusion.com/ej2/{Version}/dist/{PACKAGE_NAME}.min.js`
+>
+> Styles: `https://cdn.syncfusion.com/ej2/{Version}/{PACKAGE_NAME}/styles/material.css`
+
+**Example:**
+> Script: [`https://cdn.syncfusion.com/ej2/31.2.15/dist/ej2.min.js`](https://cdn.syncfusion.com/ej2/31.2.15/dist/ej2.min.js)
+>
+> Styles: [`https://cdn.syncfusion.com/ej2/31.2.15/ej2-base/styles/material.css`](https://cdn.syncfusion.com/ej2/31.2.15/ej2-base/styles/material.css)
+
+**Step 3:** Create a HTML page (index.html) in `my-app` location and add the CDN link references.
+
+{% tabs %}
+{% highlight ts tabtitle="index.html" %}
+
+
+ ...
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 4:** **Create a PDF document** : Add the script in `index.html` by creating a button and attaching a click event that uses the JavaScript PDF API to generate a PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="~/Index.html" %}
+
+
+
Create PDF document
+
Click the button to generate and download a PDF.
+
+
+
+@section Scripts {
+
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+By executing the program, you will get the PDF document as follows.
+
+
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-react.md b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-react.md
new file mode 100644
index 000000000..10cf44a3a
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-react.md
@@ -0,0 +1,77 @@
+---
+layout: post
+title: Create or Generate PDF file in React | Syncfusion
+description: Learn how to create a PDF file in React with easy steps using Syncfusion JavaScript PDF library without depending on Adobe
+control: PDF
+platform: document-processing
+documentation: ug
+keywords: javascript, pdf, script, react
+---
+
+# Create or Generate PDF file in React
+
+The Syncfusion® JavaScript PDF library is used to create, read, and edit PDF documents. This library also offers functionality to merge, split, stamp, fill forms, and secure PDF files.
+
+This guide explains how to integrate the JavaScript PDF library into an React application.
+
+## Add script reference
+
+* Add the required scripts using the CDN inside the `` of `public/index.html` using the following code.
+
+```
+
+ ...
+
+
+
+```
+
+**Create a PDF document** : Add the script in `App.jsx` by creating a button and attaching a click event that uses the JavaScript PDF API to generate a PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="~/App.jsx" %}
+
+import React from 'react';
+
+export default function App() {
+ const createPdf = () => {
+ // Create a new PDF document
+ let pdf = new ej.pdf.PdfDocument();
+ // Add a new page
+ let page: ej.pdf.PdfPage = document.addPage();
+ // Get graphics from the page
+ let graphics: ej.pdf.PdfGraphics = page.graphics;
+ // Set font
+ let font: ej.pdf.PdfStandardFont = pdf.embedFont(ej.pdf.PdfFontFamily.helvetica, 36, ej.pdf.PdfFontStyle.regular);
+ // Create a new black brush
+ let brush = new ej.pdf.PdfBrush({r: 0, g: 0, b: 0});
+ // Draw text
+ graphics.drawString('Hello World!!!', font, {x: 20, y: 20, width: graphics.clientSize.width - 20, height: 60}, brush);
+ // Save and download PDF
+ pdf.save('Output.pdf');
+ // Destroy the PDF document instance
+ pdf.destroy();
+ };
+
+ return (
+
+
+
+ );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Run the application
+
+Now run the `npm run dev` command in the console to start the development server. This command compiles your code and serves the application locally, opening it in the browser.
+
+```
+npm run dev
+```
+By executing the program, you will get the PDF document as follows.
+
+
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-typescript.md b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-typescript.md
new file mode 100644
index 000000000..6fa6aee6a
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-typescript.md
@@ -0,0 +1,92 @@
+---
+layout: post
+title: Create or Generate PDF file in TypeScript | Syncfusion
+description: Learn how to create a PDF file in TypeScript with easy steps using Syncfusion TypeScript PDF library without depending on Adobe
+platform: document-processing
+control: PDF
+documentation: ug
+keywords: pdf, script, typescript
+---
+
+# Create or Generate PDF file in TypeScript
+
+The Syncfusion® TypeScript PDF library is used to create, read, and edit PDF documents. This library also offers functionality to merge, split, stamp, fill forms, and secure PDF files.
+
+This guide explains how to integrate the TypeScript PDF library into an TypeScript application.
+
+## Dependencies
+
+The following list of dependencies are required to use the `TypeScript PDF library` component in your application.
+
+```typescript
+|-- @syncfusion/ej2-compression
+|-- @syncfusion/ej2-base
+```
+
+## Create a PDF document using TypeScript.
+
+* Add a simple button to `index.html` and attach a click handler that uses the TypeScript PDF API to create a new PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.html" %}
+
+
+
+ Button onclick Example
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+* Include the following namespaces in `index.ts` file.
+
+{% tabs %}
+{% highlight html tabtitle="index.ts" %}
+
+import { PdfDocument, PdfPage, PdfStandardFont, PdfPen, PdfBrush } from '@syncfusion/ej2-pdf';
+
+{% endhighlight %}
+{% endtabs %}
+
+* Include the following code example in the click event of the button in `index.ts` to generate a PDF document
+
+{% tabs %}
+{% highlight html tabtitle="index.ts" %}
+
+document.getElementById('normalButton').onclick = (): void => {
+// Create a new PDF document
+ let pdf = new PdfDocument();
+ // Add a new page
+ let page: PdfPage = document.addPage();
+ // Get graphics from the page
+ let graphics: PdfGraphics = page.graphics;
+ // Set font
+ let font: PdfStandardFont = pdf.embedFont(PdfFontFamily.helvetica, 36, PdfFontStyle.regular);
+ // Create a new black brush
+ let brush = new PdfBrush({r: 0, g: 0, b: 0});
+ // Draw text
+ graphics.drawString('Hello World!!!', font, {x: 20, y: 20, width: graphics.clientSize.width - 20, height: 60}, brush);
+ // Save and download PDF
+ pdf.save('Output.pdf');
+ // Destroy the PDF document instance
+ pdf.destroy();
+};
+
+{% endhighlight %}
+{% endtabs %}
+
+* **Run the application**
+
+The quickstart project is configured to compile and run in the browser. Use the following command to start the application:
+
+```javascript
+npm start
+```
+
+By executing the program, you will get the PDF document as follows.
+
+
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-vue.md b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-vue.md
new file mode 100644
index 000000000..3433aeb7f
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-vue.md
@@ -0,0 +1,106 @@
+---
+layout: post
+title: Create or Generate PDF file in Vue | Syncfusion
+description: Learn how to create a PDF file in Vue with easy steps using Syncfusion JavaScript PDF library without depending on Adobe
+control: PDF
+platform: document-processing
+documentation: ug
+keywords: pdf, script, vue, javascript
+---
+
+# Create or Generate PDF file in Vue application
+
+The Syncfusion® JavaScript PDF library is used to create, read, and edit PDF documents. This library also offers functionality to merge, split, stamp, fill forms, and secure PDF files.
+
+This guide explains how to integrate the JavaScript PDF library into an Vue application.
+
+## Setting up the Vue 2 project
+
+To generate a Vue 2 project using Vue-CLI, use the [Vue create](https://cli.vuejs.org/#getting-started) command. Follow these steps to install Vue CLI and create a new project:
+
+```bash
+npm install -g @vue/cli
+vue create quickstart
+cd quickstart
+```
+
+or
+
+```bash
+yarn global add @vue/cli
+vue create quickstart
+cd quickstart
+```
+
+When creating a new project, choose the option `Default ([Vue 2] babel, es-lint)` from the menu.
+
+
+
+Once the `quick start` project is set up with default settings, proceed to add Syncfusion® components to the project.
+
+* **Add script reference** : Add the required scripts using the CDN inside the `` of `index.html` as follows:
+
+{% tabs %}
+{% highlight c# tabtitle="~/index.html" %}
+
+
+ ...
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+* **Create a PDF document** : Add the script in `App.vue` by creating a button and attaching a click event that uses the JavaScript PDF API to generate a PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="~/App.vue" %}
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Run the project
+
+To run the project, use the following command:
+
+```bash
+npm run serve
+```
+or
+
+```bash
+yarn run serve
+```
+
+By executing the program, you will generate the following PDF document.
+
+
diff --git a/Document-Processing/PDF/PDF-Library/javascript/DigitalSignature.md b/Document-Processing/PDF/PDF-Library/javascript/DigitalSignature.md
new file mode 100644
index 000000000..ce0811814
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Library/javascript/DigitalSignature.md
@@ -0,0 +1,396 @@
+---
+title: Digital Signature in TypeScript PDF library | Syncfusion
+description: This section explains how to create a digital signature in the PDF document by using TypeScript PDF library
+platform: document-processing
+control: PDF
+documentation: UG
+---
+# Digital Signature in TypeScript PDF library
+
+Essential® PDF provides support to create, validate, and manage digital signatures in PDF documents, ensuring authenticity, integrity, and security.
+
+## Adding a digital signature
+
+This example demonstrates how to add a digital signature to a PDF document using the `PdfSignature` class. Digital signatures ensure document authenticity and integrity by applying cryptographic standards.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+import {PdfDocument, PdfPage, PdfForm, PdfSignatureField, DigestAlgorithm, CryptographicStandard} from '@syncfusion/ej2-pdf';
+
+// Load the document
+let document: PdfDocument = new PdfDocument()
+// Get the first page of the document
+let page: PdfPage = document.addPage();
+// Access the PDF form
+let form: PdfForm = document.form;
+// Create a new signature field
+let field: PdfSignatureField = new PdfSignatureField(page, 'Signature', {
+ x: 10,
+ y: 10,
+ width: 100,
+ height: 50
+});
+// Create a new signature using PFX data and private key
+let sign: PdfSignature = PdfSignature.create(
+ {
+ cryptographicStandard: CryptographicStandard.cms,
+ digestAlgorithm: DigestAlgorithm.sha256
+ },
+ certData,
+ password
+);
+// Set the signature to the field
+field.setSignature(sign);
+// Add the field into PDF form
+form.add(field);
+// Save the document
+document.save('output.pdf');
+// Destroy the document
+document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a digital signature in an existing PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+import {PdfDocument, PdfPage, PdfForm, PdfSignatureField, DigestAlgorithm, CryptographicStandard} from '@syncfusion/ej2-pdf';
+
+// Load the document
+let document: PdfDocument = new PdfDocument(data, password)
+// Get the first page of the document
+let page: PdfPage = document.getPage(0);
+// Access the PDF form
+let form: PdfForm = document.form;
+// Create a new signature field
+let field: PdfSignatureField = new PdfSignatureField(page, 'Signature', {
+ x: 10,
+ y: 10,
+ width: 100,
+ height: 50
+});
+// Create a new signature using PFX data and private key
+let sign: PdfSignature = PdfSignature.create(
+ {
+ cryptographicStandard: CryptographicStandard.cms,
+ digestAlgorithm: DigestAlgorithm.sha256
+ },
+ certData,
+ password
+);
+// Set the signature to the field
+field.setSignature(sign);
+// Add the field into PDF form
+form.add(field);
+// Save the document
+document.save('output.pdf');
+// Destroy the document
+document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create PDF Signature with External Signing
+
+Essential® PDF provides support to create a new PDF signature using a callback function for external signing, enabling secure and flexible digital signature workflows.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+import {PdfDocument, PdfPage, PdfForm, PdfSignatureField, DigestAlgorithm, CryptographicStandard} from '@syncfusion/ej2-pdf';
+
+// Load the document
+let document: PdfDocument = new PdfDocument(data, passw);
+// Gets the first page of the document
+let page: PdfPage = document.getPage(0);
+// Access the PDF form
+let form: PdfForm = document.form;
+// Create a new signature field
+let field: PdfSignatureField = new PdfSignatureField(page, 'Signature', { x: 10, y: 10, width: 100, height: 50 });
+// Define a callback function used for external signing
+let externalSignatureCallback = (
+ data: Uint8Array,
+ options: {
+ algorithm: DigestAlgorithm,
+ cryptographicStandard: CryptographicStandard,
+ }
+): { signedData: Uint8Array; timestampData?: Uint8Array } => {
+ // Implement external signing logic here
+ return new Uint8Array(); // Placeholder return
+};
+// Create a new signature using external signing
+let signature: PdfSignature = PdfSignature.create(externalSignatureCallback, {
+ cryptographicStandard: CryptographicStandard.cms,
+ algorithm: DigestAlgorithm.sha256,
+});
+// Set the signature to the field
+field.setSignature(signature);
+// Add the field into PDF form
+form.add(field);
+// Save the document
+document.save('output.pdf');
+// Destroy the document
+document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create Signature with Public Certificates for External Signing
+
+This example demonstrates how to create a new PDF signature using the `PdfSignature` class with public certificates for external signing. External signing allows you to implement custom signing logic outside the PDF library while maintaining compliance with cryptographic standards.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+import {PdfDocument, PdfPage, PdfForm, PdfSignatureField, DigestAlgorithm, CryptographicStandard} from '@syncfusion/ej2-pdf';
+
+// Load the document
+let document: PdfDocument = new PdfDocument(data);
+// Gets the first page of the document
+let page: PdfPage = document.getPage(0);
+// Access the PDF form
+let form: PdfForm = document.form;
+// Create a new signature field
+let field: PdfSignatureField = new PdfSignatureField(page, 'Signature', { x: 10, y: 10, width: 100, height: 50 });
+// Define a callback function used for external signing
+let externalSignatureCallback = (
+ data: Uint8Array,
+ options: {
+ algorithm: DigestAlgorithm,
+ cryptographicStandard: CryptographicStandard
+ }
+): { signedData: Uint8Array; timestampData?: Uint8Array } => {
+ // Implement external signing logic here
+ return new Uint8Array(); // Placeholder return
+};
+// Create a new signature using external signing with public certificate collection
+let signature: PdfSignature = PdfSignature.create(
+ externalSignatureCallback,
+ publicCertificates,
+ {
+ cryptographicStandard: CryptographicStandard.cms,
+ algorithm: DigestAlgorithm.sha256
+ }
+);
+// Set the signature to the field
+field.setSignature(signature);
+// Add the field into PDF form
+form.add(field);
+// Save the document
+document.save('output.pdf');
+// Destroy the document
+document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create Signature Using PFX Data and Private Key
+
+This example demonstrates how to create a new PDF signature using the `PdfSignature` class with PFX certificate data and a private key. This approach is commonly used for digital signing when you have access to a personal certificate file and its password.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+import {PdfDocument, PdfPage, PdfForm, PdfSignatureField, DigestAlgorithm, CryptographicStandard} from '@syncfusion/ej2-pdf';
+
+// Load the document
+let document: PdfDocument = new PdfDocument(data, password);
+// Get the first page of the document
+let page: PdfPage = document.getPage(0);
+// Access the PDF form
+let form: PdfForm = document.form;
+// Create a new signature field
+let field: PdfSignatureField = new PdfSignatureField(page, 'Signature', { x: 10, y: 10, width: 100, height: 50 });
+// Create a new signature using PFX data and private key
+let sign: PdfSignature = PdfSignature.create(
+ {
+ cryptographicStandard: CryptographicStandard.cms,
+ digestAlgorithm: DigestAlgorithm.sha256
+ },
+ certData,
+ password
+);
+// Set the signature to the field
+field.setSignature(sign);
+// Add the field into PDF form
+form.add(field);
+// Save the document
+document.save('output.pdf');
+// Destroy the document
+document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Retrieve the Signed Date of a PDF Signature
+
+This example demonstrates how to retrieve the signed date of a PDF signature using the `getSignedDate()` method of the `PdfSignature` class. This property helps identify when the document was digitally signed.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+import {PdfDocument, PdfPage, PdfForm, PdfSignatureField, DigestAlgorithm, CryptographicStandard} from '@syncfusion/ej2-pdf';
+
+// Load the document
+let document: PdfDocument = new PdfDocument(data, password);
+// Get the first page of the document
+let page: PdfPage = document.getPage(0);
+// Access the PDF form
+let form: PdfForm = document.form;
+// Create a new signature field
+let field: PdfSignatureField = new PdfSignatureField(page, 'Signature', { x: 10, y: 10, width: 100, height: 50 });
+// Create a new signature using PFX data and private key
+let sign: PdfSignature = PdfSignature.create(
+ {
+ cryptographicStandard: CryptographicStandard.cms,
+ digestAlgorithm: DigestAlgorithm.sha256
+ },
+ certData,
+ password
+);
+// Set the signature to the field
+field.setSignature(sign);
+// Get the signed date
+sign.getSignedDate();
+// Add the field into PDF form
+form.add(field);
+// Save the document
+document.save('output.pdf');
+// Destroy the document
+document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Get Certificate Information from a PDF Signature
+
+This example demonstrates how to retrieve the certificate information of a PDF signature using the `getCertificateInformation()` method of the `PdfSignature` class. This information includes details about the signer’s certificate used for digital signing.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+import {PdfDocument, PdfPage, PdfForm, PdfSignatureField, DigestAlgorithm,PdfCertificateInformation, CryptographicStandard} from '@syncfusion/ej2-pdf';
+
+// Load the document
+let document: PdfDocument = new PdfDocument(data, password);
+// Get the first page of the document
+let page: PdfPage = document.getPage(0);
+// Access the PDF form
+let form: PdfForm = document.form;
+// Create a new signature field
+let field: PdfSignatureField = new PdfSignatureField(page, 'Signature', { x: 10, y: 10, width: 100, height: 50 });
+// Create a new signature using PFX data and private key
+let sign: PdfSignature = PdfSignature.create(
+ {
+ cryptographicStandard: CryptographicStandard.cms,
+ digestAlgorithm: DigestAlgorithm.sha256
+ },
+ certData,
+ password
+);
+// Set the signature to the field
+field.setSignature(sign);
+// Get the certificate information of the signature
+let certificateInfo: PdfCertificateInformation = sign.getCertificateInformation();
+// Add the field into PDF form
+form.add(field);
+// Save the document
+document.save('output.pdf');
+// Destroy the document
+document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Get Digital Signature Configuration Options
+
+This example demonstrates how to retrieve the configuration options of a digital signature in a PDF document using the `getSignatureOptions()` method of the `PdfSignature` class. These options include details such as the cryptographic standard and digest algorithm used for signing.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+import {PdfDocument, PdfPage, PdfForm, PdfSignatureField, DigestAlgorithm, CryptographicStandard} from '@syncfusion/ej2-pdf';
+
+// Load the document
+let document: PdfDocument = new PdfDocument(data, password);
+// Get the first page of the document
+let page: PdfPage = document.getPage(0);
+// Access the PDF form
+let form: PdfForm = document.form;
+// Get the signature field
+let field: PdfSignatureField = form.fieldAt(0) as PdfSignatureField;
+// Get the PDF signature
+let signature: PdfSignature = field.getSignature();
+// Get the signature options
+let options: PdfSignatureOptions = signature.getSignatureOptions();
+// Get the cryptographic standard of the signature
+let cryptographicStandard: CryptographicStandard = options.cryptographicStandard;
+// Destroy the document
+document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Replace Empty Signature with Externally Signed Data
+
+This example demonstrates how to replace an empty signature field in a PDF document with externally signed data using the `replaceEmptySignature()` method of the `PdfSignature` class. This method allows embedding externally signed content, certificates, and optional timestamp data into the PDF.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+import {PdfDocument, PdfPage, PdfForm, PdfSignatureField, DigestAlgorithm, CryptographicStandard} from '@syncfusion/ej2-pdf';
+
+// Load the document
+let document: PdfDocument = new PdfDocument('data');
+// Get the first page of the document
+let page: PdfPage = document.getPage(0);
+// Access the PDF form
+let form: PdfForm = document.form;
+// Create a new signature field
+let field: PdfSignatureField = new PdfSignatureField(page, 'Signature', { x: 10, y: 10, width: 100, height: 50 });
+// Placeholder for signed data
+let signedData: Uint8Array;
+// Define a callback function used for external signing
+let externalSignatureCallback = (
+ data: Uint8Array,
+ options: {
+ algorithm: DigestAlgorithm;
+ cryptographicStandard: CryptographicStandard;
+ }
+): void => {
+ // Implement external signing logic here
+ signedData = new Uint8Array(); // Placeholder return
+};
+// Create a new signature using external signing with public certificate collection
+let signature: PdfSignature = PdfSignature.create(
+ {
+ cryptographicStandard: CryptographicStandard.cms,
+ algorithm: DigestAlgorithm.sha256
+ },
+ externalSignatureCallback,
+ publicCertificates
+);
+// Set the signature to the field
+field.setSignature(signature);
+// Add the field into PDF form
+form.add(field);
+// Save the document data
+let data: Uint8Array = document.save();
+// Destroy the document
+document.destroy();
+// Replace the empty signature with externally signed hash and certificates
+let signedDocumentData: Uint8Array = PdfSignature.replaceEmptySignature(
+ data,
+ 'Signature',
+ signedData,
+ DigestAlgorithm.sha256,
+ publicCertificates
+);
+// Destroy the document
+document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/javascript/EJ2-images/Helloworld.png b/Document-Processing/PDF/PDF-Library/javascript/EJ2-images/Helloworld.png
new file mode 100644
index 000000000..003ad9420
Binary files /dev/null and b/Document-Processing/PDF/PDF-Library/javascript/EJ2-images/Helloworld.png differ
diff --git a/Document-Processing/PDF/PDF-Library/javascript/FormFields.md b/Document-Processing/PDF/PDF-Library/javascript/FormFields.md
new file mode 100644
index 000000000..2c8131876
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Library/javascript/FormFields.md
@@ -0,0 +1,866 @@
+---
+title: Form Fields in TypeScript PDF library | Syncfusion
+description: This section explains how to create a digital signature in the PDF document by using the TypeScript PDF library
+platform: document-processing
+control: PDF
+documentation: UG
+---
+# Form Fields in TypeScript PDF library
+
+An interactive form, sometimes referred to as an AcroForm is a collection of fields for gathering information. A PDF document can contain any number of fields appearing on any combination of pages, all of that make a single, globally interactive form spanning the entire document.
+
+## Creating a new PDF form
+
+Essential® PDF allows you to create and manage the form in PDF document by using `PdfForm` class. The `PdfForm` class represents the entire field collection of the form.
+
+### Adding the text box field
+
+This example demonstrates how to add a text box field to a PDF document using the `PdfTextBoxField` class. A text box field allows users to enter text data in interactive PDF forms.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+import {PdfDocument, PdfPage, PdfForm, PdfTextBoxField, PdfStandardFont} from '@syncfusion/ej2-pdf';
+
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+//Add the PDF page.
+let page: PdfPage = document.addPage();
+// Access the PDF form from the document
+let form: PdfForm = document.form;
+// Create a new text box field
+let field: PdfTextBoxField = new PdfTextBoxField(page, 'FirstName', {x: 10, y: 10, width: 100, height: 50});
+// Set the default text value for the text box
+field.text = 'John';
+// Apply a standard font (Helvetica) with size 10 to the text box
+field.font = new PdfStandardFont(PdfFontFamily.helvetica, 10);
+// Set the background color of the text box to red
+field.backColor = { r: 255, g: 0, b: 0 };
+// Set the border color of the text box to blue
+field.borderColor = { r: 0, g: 0, b: 255 };
+// Add a tooltip to the text box for user guidance
+field.toolTip = 'FirstName';
+// Set the text color inside the text box to green
+field.color = { r: 0, g: 255, b: 0 };
+// Add the configured text box field to the PDF form
+form.add(field);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a popup annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+import {PdfDocument, PdfPage, PdfForm, PdfTextBoxField, PdfStandardFont} from '@syncfusion/ej2-pdf';
+
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data, password);
+// Access the first page
+let page: PdfPage = document.getPage(0);
+// Access the PDF form from the document
+let form: PdfForm = document.form;
+// Create a new text box field
+let field: PdfTextBoxField = new PdfTextBoxField(page, 'FirstName', {x: 10, y: 10, width: 100, height: 50});
+// Set the default text value for the text box
+field.text = 'John';
+// Apply a standard font (Helvetica) with size 10 to the text box
+field.font = new PdfStandardFont(PdfFontFamily.helvetica, 10);
+// Set the background color of the text box to red
+field.backColor = { r: 255, g: 0, b: 0 };
+// Set the border color of the text box to blue
+field.borderColor = { r: 0, g: 0, b: 255 };
+// Add a tooltip to the text box for user guidance
+field.toolTip = 'FirstName';
+// Set the text color inside the text box to green
+field.color = { r: 0, g: 255, b: 0 };
+// Add the configured text box field to the PDF form
+form.add(field);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+### Adding the combo box field
+
+This example demonstrates how to add a combo box field to a PDF document using the `PdfComboBoxField` class. A combo box field provides a drop-down list for users to select predefined options.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+import {PdfDocument, PdfPage, PdfForm, PdfComboBoxField} from '@syncfusion/ej2-pdf';
+
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Add a page
+let page: PdfPage = document.addPage();
+// Access the PDF form
+let form: PdfForm = document.form;
+// Create a new combo box field
+let field: PdfComboBoxField = new PdfComboBoxField(page, 'list1', { x: 100, y: 60, width: 100, height: 50 });
+// Add list items to the field
+field.addItem(new PdfListFieldItem('English', 'English'));
+field.addItem(new PdfListFieldItem('French', 'French'));
+field.addItem(new PdfListFieldItem('German', 'German'));
+// Set the selected index
+field.selectedIndex = 2;
+// Set the flag indicating whether the combo box allows multiple selections
+field.multiSelect = true;
+// Add the field into PDF form
+form.add(field);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a popup annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+import {PdfDocument, PdfPage, PdfForm, PdfComboBoxField} from '@syncfusion/ej2-pdf';
+
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data, password);
+// Access the first page
+let page: PdfPage = document.getPage(0);
+// Access the PDF form
+let form: PdfForm = document.form;
+// Create a new combo box field
+let field: PdfComboBoxField = new PdfComboBoxField(page, 'list1', { x: 100, y: 60, width: 100, height: 50 });
+// Add list items to the field
+field.addItem(new PdfListFieldItem('English', 'English'));
+field.addItem(new PdfListFieldItem('French', 'French'));
+field.addItem(new PdfListFieldItem('German', 'German'));
+// Set the selected index
+field.selectedIndex = 2;
+// Set the flag indicating whether the combo box allows multiple selections
+field.multiSelect = true;
+// Add the field into PDF form
+form.add(field);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+### Adding the radio button field
+
+This example demonstrates how to add a radio button field to a PDF document using the `PdfRadioButtonListField` class. Radio buttons allow users to select one option from a group of choices.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+import {PdfDocument, PdfPage, PdfForm, PdfRadioButtonListField} from '@syncfusion/ej2-pdf';
+
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Add a page
+let page: PdfPage = document.addPage();
+// Access the PDF form
+let form: PdfForm = document.form;
+// Create a new radio button list field
+let field: PdfRadioButtonListField = new PdfRadioButtonListField(page, 'Age');
+// Create and add first item
+let first: PdfRadioButtonListItem = field.add('1-9', { x: 100, y: 140, width: 20, height: 20 });
+// Create and add second item
+let second: PdfRadioButtonListItem = field.add('10-49', { x: 100, y: 170, width: 20, height: 20 }, page);
+// Set selected index of the radio button list field
+field.selectedIndex = 0;
+// Add the field into PDF form
+form.add(field);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a popup annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+import {PdfDocument, PdfPage, PdfForm, PdfRadioButtonListField} from '@syncfusion/ej2-pdf';
+
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data, password);
+// Access the first page
+let page: PdfPage = document.getPage(0);
+// Access the PDF form
+let form: PdfForm = document.form;
+// Create a new radio button list field
+let field: PdfRadioButtonListField = new PdfRadioButtonListField(page, 'Age');
+// Create and add first item
+let first: PdfRadioButtonListItem = field.add('1-9', { x: 100, y: 140, width: 20, height: 20 });
+// Create and add second item
+let second: PdfRadioButtonListItem = field.add('10-49', { x: 100, y: 170, width: 20, height: 20 }, page);
+// Set selected index of the radio button list field
+field.selectedIndex = 0;
+// Add the field into PDF form
+form.add(field);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+### Adding the list box field
+
+This example demonstrates how to add a list box field to a PDF document using the `PdfListBoxField` class. A list box field displays multiple options, allowing users to select one or more items.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+import {PdfDocument, PdfPage, PdfForm, PdfListBoxField} from '@syncfusion/ej2-pdf';
+
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Add a page
+let page: PdfPage = document.addPage();
+// Access the PDF form
+let form: PdfForm = document.form;
+// Create a new list box field
+let field: PdfListBoxField = new PdfListBoxField(page, 'list1', { x: 100, y: 60, width: 100, height: 50 });
+// Add list items to the field
+field.addItem(new PdfListFieldItem('English', 'English'));
+field.addItem(new PdfListFieldItem('French', 'French'));
+// Set the selected index
+field.selectedIndex = 1;
+// Set the flag indicating whether the list box allows multiple selections
+field.multiSelect = true;
+// Add the field into PDF form
+form.add(field);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a popup annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+import {PdfDocument, PdfPage, PdfForm, PdfListBoxField} from '@syncfusion/ej2-pdf';
+
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data, password);
+// Access the first page
+let page: PdfPage = document.getPage(0);
+// Access the PDF form
+let form: PdfForm = document.form;
+// Create a new list box field
+let field: PdfListBoxField = new PdfListBoxField(page, 'list1', { x: 100, y: 60, width: 100, height: 50 });
+// Add list items to the field
+field.addItem(new PdfListFieldItem('English', 'English'));
+field.addItem(new PdfListFieldItem('French', 'French'));
+// Set the selected index
+field.selectedIndex = 1;
+// Set the flag indicating whether the list box allows multiple selections
+field.multiSelect = true;
+// Add the field into PDF form
+form.add(field);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+### Adding the check Box field
+
+This example demonstrates how to add a check box field to a PDF document using the `PdfCheckBoxField` class. Check boxes allow users to select or deselect options in a form.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+import {PdfDocument, PdfPage, PdfForm, PdfCheckBoxField} from '@syncfusion/ej2-pdf';
+
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Add a page
+let page: PdfPage = document.addPage();
+// Access the PDF form
+let form: PdfForm = document.form;
+// Create a new check box field
+let field: PdfCheckBoxField = new PdfCheckBoxField('CheckBox1', { x: 100, y: 40, width: 20, height: 20 }, page);
+// Set the checked flag as true
+field.checked = true;
+// Set the tooltip value
+field.toolTip = 'Checked';
+// Add the field into PDF form
+form.add(field);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a popup annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+import {PdfDocument, PdfPage, PdfForm, PdfCheckBoxField} from '@syncfusion/ej2-pdf';
+
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data, password);
+// Access the first page
+let page: PdfPage = document.getPage(0);
+// Access the PDF form
+let form: PdfForm = document.form;
+// Create a new check box field
+let field: PdfCheckBoxField = new PdfCheckBoxField('CheckBox1', { x: 100, y: 40, width: 20, height: 20 }, page);
+// Set the checked flag as true
+field.checked = true;
+// Set the tooltip value
+field.toolTip = 'Checked';
+// Add the field into PDF form
+form.add(field);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+### Adding the signature field
+
+This example demonstrates how to add a signature field to a PDF document using the `PdfSignatureField` class. A signature field enables users to digitally sign the PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+import {PdfDocument, PdfPage, PdfForm, PdfSignatureField, PdfInteractiveBorder} from '@syncfusion/ej2-pdf';
+
+// Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Add a page
+let page: PdfPage = document.addPage();
+// Add the signature field into PDF form
+document.form.add(
+ new PdfSignatureField(
+ page,
+ 'ApprovalSignature',
+ { x: 50, y: 260, width: 200, height: 40 },
+ {
+ toolTip: 'Sign here',
+ color: { r: 0, g: 0, b: 0 },
+ backColor: { r: 255, g: 255, b: 255 },
+ borderColor: { r: 0, g: 0, b: 0 },
+ border: new PdfInteractiveBorder({
+ width: 1,
+ style: PdfBorderStyle.solid
+ })
+ }
+ )
+);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a popup annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+import {PdfDocument, PdfPage, PdfForm, PdfSignatureField, PdfInteractiveBorder} from '@syncfusion/ej2-pdf';
+
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data, password);
+// Access the first page
+let page: PdfPage = document.getPage(0);
+// Add the signature field into PDF form
+document.form.add(
+ new PdfSignatureField(
+ page,
+ 'ApprovalSignature',
+ { x: 50, y: 260, width: 200, height: 40 },
+ {
+ toolTip: 'Sign here',
+ color: { r: 0, g: 0, b: 0 },
+ backColor: { r: 255, g: 255, b: 255 },
+ borderColor: { r: 0, g: 0, b: 0 },
+ border: new PdfInteractiveBorder({
+ width: 1,
+ style: PdfBorderStyle.solid
+ })
+ }
+ )
+);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+### Adding the button field
+
+This example demonstrates how to add a button field to a PDF document using the `PdfButtonField` class. Buttons can be configured to perform actions such as submitting a form or triggering JavaScript.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+import {PdfDocument, PdfPage, PdfForm, PdfButtonField, PdfHighlightMode, PdfBorderStyle, PdfInteractiveBorder} from '@syncfusion/ej2-pdf';
+
+/ Create a new PDF document
+let document: PdfDocument = new PdfDocument();
+// Add a page
+let page: PdfPage = document.addPage();
+// Add a button field into the PDF form
+document.form.add(
+ new PdfButtonField(
+ page,
+ 'Submit',
+ { x: 50, y: 560, width: 120, height: 28 },
+ {
+ toolTip: 'Submit form',
+ color: { r: 255, g: 255, b: 255 },
+ backColor: { r: 0, g: 122, b: 204 },
+ borderColor: { r: 0, g: 0, b: 0 },
+ border: new PdfInteractiveBorder({
+ width: 1,
+ style: PdfBorderStyle.solid
+ }),
+ text: 'Submit',
+ highlightMode: PdfHighlightMode.push
+ }
+ )
+);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
+
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a popup annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+import {PdfDocument, PdfPage, PdfForm, PdfButtonField, PdfHighlightMode, PdfBorderStyle, PdfInteractiveBorder} from '@syncfusion/ej2-pdf';
+
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data, password);
+// Access the first page
+let page: PdfPage = document.getPage(0);
+// Add a button field into the PDF form
+document.form.add(
+ new PdfButtonField(
+ page,
+ 'Submit',
+ { x: 50, y: 560, width: 120, height: 28 },
+ {
+ toolTip: 'Submit form',
+ color: { r: 255, g: 255, b: 255 },
+ backColor: { r: 0, g: 122, b: 204 },
+ borderColor: { r: 0, g: 0, b: 0 },
+ border: new PdfInteractiveBorder({
+ width: 1,
+ style: PdfBorderStyle.solid
+ }),
+ text: 'Submit',
+ highlightMode: PdfHighlightMode.push
+ }
+ )
+);
+// Save the document
+document.save('Output.pdf');
+// Close the document
+document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Filling form fields in an existing PDF Document
+
+Essential® PDF allows you to fill the form fields using PdfField class.
+
+### Filling the text box field
+
+This example demonstrates how to fill a text box field in a PDF document using the `text` property of the `PdfTextBoxField` class. The following code snippet illustrates how to set the text value for the field.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfPage, PdfTextBoxField} from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Access text box field
+ let field: PdfTextBoxField = document.form.fieldAt(0) as PdfTextBoxField;
+ // Sets the text value to text box field
+ field.text = 'Syncfusion';
+ // Sets the text alignment of form field as center
+ field.textAlignment = PdfTextAlignment.center;
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+### Filling the combo box field
+
+This example demonstrates how to fill a combo box field in a PDF document using the `selectedIndex` property of the `PdfComboBoxField` class. The following code snippet shows how to change the selected index in a combo box.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfPage, PdfComboBoxField} from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Access combobox field
+ let field: PdfComboBoxField = document.form.fieldAt(0) as PdfComboBoxField;
+ // Sets the selected index
+ field.selectedIndex = 2;
+ // Sets the flag indicates whether the list box allows multiple selections.
+ field.multiSelect = true;
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+### Filling the radio button field
+
+This example demonstrates how to fill a radio button field in a PDF document using the `selectedIndex` property of the `PdfRadioButtonListField` class. The following code snippet illustrates how to change the selected index in a radio button.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfPage, PdfRadioButtonListField} from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Access radio button list field
+ let field: PdfRadioButtonListField = document.form.fieldAt(0) as PdfRadioButtonListField;
+ // Sets the selected index
+ field.selectedIndex = 2;
+ // Added tool tip
+ field.toolTip = 'Radio button';
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+### Filling the list box field
+
+This example demonstrates how to fill a list box field in a PDF document using the `selectedIndex` property of the `PdfLoadedListBoxField` class. The following code snippet shows how to change the selected index in a list box.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfPage, PdfListBoxField} from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Access listbox field
+ let field: PdfListBoxField = document.form.fieldAt(2) as PdfListBoxField;
+ // Sets the selected index
+ field.selectedIndex = 2;
+ // Added tool tip
+ field.toolTip = 'ListBox Fields';
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+### Filling the check Box field
+
+This example demonstrates how to fill a check box field in a PDF document using the `Checked` property of the `PdfCheckBoxField` class. The following code snippet illustrates how to mark a checkbox as selected.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfPage, PdfCheckBoxField} from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Access checkbox field
+ let field: PdfCheckBoxField = document.form.fieldAt(2) as PdfCheckBoxField;
+ // Sets the tooltip value
+ field.toolTip = 'Checked';
+ // Added tool tip
+ field.toolTip = 'CheckBox Fields';
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+
+### Filling the signature field
+
+This example demonstrates how to fill a signature field in a PDF document using the `PdfSignatureField` class. The following code snippet illustrates how to create a signature using PFX data and assign it to the signature field.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfPage, PdfForm, PdfSignatureField} from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Access checkbox field
+ let field: PdfSignatureField = document.form.fieldAt(2) as PdfSignatureField;
+ // // Set custom value
+ field.setValue('Author', 'John');
+ // Added tool tip
+ field.toolTip = 'CheckBox Fields';
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Retrieving/Modifying the form fields
+
+### Modifying the existing form field in PDF document
+
+This example demonstrates how to modify an existing form field in a PDF document using the `PdfTextBoxField` class. The following code snippet illustrates how to update the text value, alignment, and default value of a text box field.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfPage, PdfTextBoxField} from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Access text box field
+ let field: PdfTextBoxField = document.form.fieldAt(0) as PdfTextBoxField;
+ // Sets the text value to text box field
+ field.text = 'Syncfusion';
+ // Sets the text alignment of form field as center
+ field.textAlignment = PdfTextAlignment.center;
+ // Sets the default value of the text box field
+ field.defaultValue = 'Syncfusion';
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Removing the form fields from existing PDF document
+
+This example demonstrates how to remove items from an existing form field in a PDF document using the `removeItemAt()` method of the `PdfField` class. The following code snippet illustrates how to access a form field and remove its first item.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfField} from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Access the form field at index 0
+ let field: PdfField = document.form.fieldAt(0);
+ // Remove the first item of the form field
+ field.removeItemAt(0);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Flattening form fields in a PDF
+
+This example demonstrates how to flatten form fields in a PDF document to make their values permanent and non-editable. Flattening removes the interactive elements while preserving the visual appearance of the filled data.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfField} from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Get the first field
+ let field: PdfField = document.form.fieldAt(0);
+ // Sets the boolean flag indicating whether the form field have been flattened or not.
+ field.flatten = true;
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Marking form fields as Read-Only
+
+This example demonstrates how to mark form fields as read-only by accessing them from the PdfFormFieldCollection and setting their ReadOnly property to true.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, PdfField} from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Access the form field at index 0
+ let field: PdfField = document.form.fieldAt(0);
+ // Sets a value indicating whether read only.
+ field.readOnly = true;
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Importing form fields
+
+### Importing FDF file to PDF
+
+This example demonstrates how to import form data from an FDF file into a PDF document using the `importFormData` method. Importing FDF data allows you to populate form fields in a PDF with values from an external data source.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument} from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Imports form data from to the PDF document.
+ document.importFormData('formData.fdf', DataFormat.fdf);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+### Importing XFDF file to PDF
+
+This example demonstrates how to import form data from an XFDF file into a PDF document using the `importFormData` method. Importing XFDF data allows you to populate form fields in a PDF with values from an external data source.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument} from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Imports form data from to the PDF document.
+ document.importFormData('formData.xfdf', DataFormat.xfdf);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Exporting form fields
+
+### Export PDF file to FDF
+
+This example demonstrates how to export form data from a PDF document to an FDF file using the `exportFormData` method. Exporting FDF data allows you to save the values of form fields in a lightweight format for reuse or integration with other systems.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, Uint8Array, PdfFormFieldExportSettings } from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Sets the form field data export settings with output data format.
+ let settings: PdfFormFieldExportSettings = new PdfFormFieldExportSettings();
+ settings.dataFormat = DataFormat.fdf;
+ // Export form field to fdf format
+ let fdf: Uint8Array = document.exportFormData(settings);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+### Export PDF file to XFDF
+
+This example demonstrates how to export form data from a PDF document to an XFDF file using the `exportFormData` method. Exporting XFDF data allows you to save the values of form fields in a lightweight format for reuse or integration with other systems.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import {PdfDocument, Uint8Array, PdfFormFieldExportSettings } from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Sets the form field data export settings with output data format.
+ let settings: PdfFormFieldExportSettings = new PdfFormFieldExportSettings();
+ settings.dataFormat = DataFormat.xfdf;
+ // Export form field to XFDF format
+ let xfdf: Uint8Array = document.exportFormData(settings);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/Asp-net-core-creation1.png b/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/Asp-net-core-creation1.png
new file mode 100644
index 000000000..86a0ddc0c
Binary files /dev/null and b/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/Asp-net-core-creation1.png differ
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/Asp-net-core-creation2.png b/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/Asp-net-core-creation2.png
new file mode 100644
index 000000000..3bd117c95
Binary files /dev/null and b/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/Asp-net-core-creation2.png differ
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/Asp-net-core-creation3.png b/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/Asp-net-core-creation3.png
new file mode 100644
index 000000000..af986a819
Binary files /dev/null and b/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/Asp-net-core-creation3.png differ
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/Asp-net-mvc-creation1.png b/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/Asp-net-mvc-creation1.png
new file mode 100644
index 000000000..6b3e72cee
Binary files /dev/null and b/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/Asp-net-mvc-creation1.png differ
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/Asp-net-mvc-creation2.png b/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/Asp-net-mvc-creation2.png
new file mode 100644
index 000000000..e1d721dd5
Binary files /dev/null and b/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/Asp-net-mvc-creation2.png differ
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/Asp-net-mvc-creation3.png b/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/Asp-net-mvc-creation3.png
new file mode 100644
index 000000000..54ae2d971
Binary files /dev/null and b/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/Asp-net-mvc-creation3.png differ
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/Output.png b/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/Output.png
new file mode 100644
index 000000000..0c42217b1
Binary files /dev/null and b/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/Output.png differ
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/vue2-terminal.png b/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/vue2-terminal.png
new file mode 100644
index 000000000..39beefaa2
Binary files /dev/null and b/Document-Processing/PDF/PDF-Library/javascript/Getting_started_images/vue2-terminal.png differ
diff --git a/Document-Processing/PDF/PDF-Library/javascript/HyperLinks.md b/Document-Processing/PDF/PDF-Library/javascript/HyperLinks.md
new file mode 100644
index 000000000..6f7577f96
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Library/javascript/HyperLinks.md
@@ -0,0 +1,196 @@
+---
+title: Hyperlinks in TypeScript PDF library | Syncfusion
+description: This section explains how to add a hyperlink in a new or existing PDF document by using the TypeScript PDF library
+platform: document-processing
+control: PDF
+documentation: UG
+---
+# Hyperlinks in TypeScript PDF library
+
+In PDF, hyperlinks can be added to allow the users to navigate to another part of PDF file, web page or any other external content.
+
+## Working with Web navigation
+
+This example demonstrates how to create a web link annotation in a PDF document using the `PdfTextWebLinkAnnotation` class. A web link annotation allows users to navigate to a specified URL directly from the PDF by clicking the annotated text.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfStringFormat, PdfStandardFont, PdfFontFamily, Size, PdfTextWebLinkAnnotation, PdfFontStyle } from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Access the first page
+ let page: PdfPage = document.addPage();
+ // Create a new PDF string format
+ const format: PdfStringFormat = new PdfStringFormat(PdfTextAlignment.left, PdfVerticalAlignment.top);
+ // Create a new standard font
+ const font: PdfStandardFont = new PdfStandardFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
+ // Get the text size
+ let size: Size = font.measureString('Syncfusion');
+ // Create a new text web link annotation
+ let annotation: PdfTextWebLinkAnnotation = new PdfTextWebLinkAnnotation({x: 50, y: 40, width: size.width, height: size.height}, {r: 0, g: 0, b: 0}, {r: 165, g: 42, b: 42}, 1);
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to add a text web link annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfStringFormat, PdfStandardFont, PdfFontFamily, Size, PdfTextWebLinkAnnotation, PdfFontStyle } from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Create a new PDF string format
+ const format: PdfStringFormat = new PdfStringFormat(PdfTextAlignment.left, PdfVerticalAlignment.top);
+ // Create a new standard font
+ const font: PdfStandardFont = new PdfStandardFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
+ // Get the text size
+ let size: Size = font.measureString('Syncfusion');
+ // Create a new text web link annotation
+ let annotation: PdfTextWebLinkAnnotation = new PdfTextWebLinkAnnotation({x: 50, y: 40, width: size.width, height: size.height}, {r: 0, g: 0, b: 0}, {r: 165, g: 42, b: 42}, 1);
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Working with internal document navigation
+
+This example demonstrates how to create internal navigation within a PDF document using destination-based annotations.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfStringFormat, PdfStandardFont, Size, PdfDocumentLinkAnnotation, PdfDestination, PdfDestinationMode } from '@syncfusion/ej2-pdf';
+
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a page
+ let page: PdfPage = document.addPage();
+ // Create a new PDF string format
+ const format: PdfStringFormat = new PdfStringFormat(PdfTextAlignment.left, PdfVerticalAlignment.top);
+ // Create a new standard font
+ const font: PdfStandardFont = new PdfStandardFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
+ // Get the text size
+ let size: Size = font.measureString('Syncfusion');
+ // Create a new text web link annotation
+ let annotation: PdfDocumentLinkAnnotation = new PdfDocumentLinkAnnotation({x: 50, y: 40, width: size.width, height: size.height}, {r: 0, g: 0, b: 0}, {r: 165, g: 42, b: 42}, 1);
+ // Initializes a new instance of the `PdfDestination` class.
+ let destination: PdfDestination = new PdfDestination();
+ // Sets the zoom factor.
+ destination.zoom = 20;
+ // Sets the page where the destination is situated.
+ destination.page = page;
+ // Sets the mode of the destination.
+ destination.mode = PdfDestinationMode.fitToPage;
+ // Sets the location of the destination.
+ destination.location = {x: 20, y: 20};;
+ // Sets the bounds of the destination.
+ destination.destinationBounds = {x: 20, y: 20, width: 100, height: 50};
+ // Sets destination to document link annotation.
+ annotation.destination = destination;
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet demonstrates how to add internal document navigation to a link annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfDocumentLinkAnnotation } from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Get the page
+ let page: PdfPage = document.getPage(0);
+ // Access the annotation at index 0
+ let annotation: PdfDocumentLinkAnnotation = document.getPage(0).annotations.at(0) as PdfDocumentLinkAnnotation;
+ // Initializes a new instance of the `PdfDestination` class.
+ let destination: PdfDestination = new PdfDestination();
+ // Sets the zoom factor.
+ destination.zoom = 20;
+ // Sets the page where the destination is situated.
+ destination.page = page;
+ // Sets the mode of the destination.
+ destination.mode = PdfDestinationMode.fitToPage;
+ // Sets the location of the destination.
+ destination.location = {x: 20, y: 20};;
+ // Sets the bounds of the destination.
+ destination.destinationBounds = {x: 20, y: 20, width: 100, height: 50};
+ // Sets destination to document link annotation.
+ annotation.destination = destination;
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Working with external document navigation
+
+This example demonstrates how to create external navigation in a PDF document using `PdfFileLinkAnnotation` annotations. External navigation allows users to open and navigate to another PDF or an external file from within the current document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfFileLinkAnnotation } from '@syncfusion/ej2-pdf';
+
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a page
+ let page: PdfPage = document.addPage();
+ // Create a new file link annotation
+ let annotation: PdfFileLinkAnnotation = new PdfFileLinkAnnotation({x: 10, y: 40, width: 30, height: 30}, 'image.png');
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet demonstrates how to add internal document navigation to a web link annotation in an existing PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfFileLinkAnnotation } from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Get the first page
+ let page: PdfPage = document.getPage(0) as PdfPage;
+ // Create a new file link annotation
+ let annotation: PdfFileLinkAnnotation = new PdfFileLinkAnnotation({x: 10, y: 40, width: 30, height: 30}, 'image.png');
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Images.md b/Document-Processing/PDF/PDF-Library/javascript/Images.md
new file mode 100644
index 000000000..bb0406515
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Library/javascript/Images.md
@@ -0,0 +1,148 @@
+---
+title: Images in TypeScript PDF library | Syncfusion
+description: This section explains how to add and replace images in a PDF document by using the TypeScript PDF library
+platform: document-processing
+control: PDF
+documentation: UG
+---
+
+# Images in TypeScript PDF library
+
+Essential® PDF supports both raster and vector images.
+
+Images are supported through the `PdfImage` class, which is an abstract base class that provides the common functionality for `PdfBitmap` class.
+
+## Inserting an image in a new document
+
+The following raster images are supported in Essential® PDF.
+
+* BMP
+* JPEG
+* JPEG with Exif standard
+* GIF
+* PNG
+* TIFF
+* ICO and ICON
+
+## Adding image in PDF document
+
+This example demonstrates how to add an image to a PDF document using the `PdfBitmap` class and the `draw` method of the `PdfImage` class. The image is loaded from a file and drawn at the specified coordinates on the page.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfImage, PdfGraphics, PdfBitmap } from '@syncfusion/ej2-pdf';
+
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a page
+ let page: PdfPage = document.addPage();
+ // Get graphics from the page
+ let graphics: PdfGraphics = page.graphics;
+ // Load the image
+ let image: PdfImage = new PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z');
+ // Draw the image.
+ image.draw(graphics, {x: 10, y: 10});
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Inserting an image in an existing document
+
+This example demonstrates how to insert an image into an existing PDF document using the `PdfBitmap` class and the `draw` method of the `PdfImage` class. The image is loaded from a file and rendered at the specified position on the selected page.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfGraphics, PdfImage, PdfBitmap } from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Access first page
+ let page: PdfPage = document.getPage(0);
+ // Get graphics from the page
+ let graphics: PdfGraphics = page.graphics;
+ // Load the image
+ let image: PdfImage = new PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z');
+ // Draw the image.
+ image.draw(graphics, {x: 10, y: 10});
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Clipping and graphics state
+
+This example demonstrates how to apply clipping and manage graphics state in a PDF document using the `PdfGraphics` class. The `save` and `restore` methods preserve the current graphics state, while the `setClip` method defines a clipping region to restrict drawing operations, ensuring precise control over rendering.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfGraphics, PdfImage, PdfBitmap, PdfGraphicsState, PdfFillMode } from '@syncfusion/ej2-pdf';
+
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a page
+ let page: PdfPage = document.addPage();
+ // Get graphics from the page
+ let graphics: PdfGraphics = page.graphics;
+ // Load the image— only the part within the clipping region will be visible
+ let image: PdfImage = new PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z');
+ // Save the current graphics state (to restore later)
+ let state: PdfGraphicsState = graphics.save();
+ graphics.setClip({x: 0, y: 0, width: 50, height: 12}, PdfFillMode.alternate );
+ // Draw the image.
+ image.draw(graphics, {x: 10, y: 10});
+ // Restore the graphics state to remove the clipping region
+ graphics.restore(state);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Applying transparency and rotation to the image
+
+This example demonstrates how to apply transparency and rotation to an image in a PDF document using the `PdfGraphics` class. Transparency can be controlled through the graphics state, while rotation is applied by transforming the graphics context before drawing the image, enabling advanced visual effects in the document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfGraphics, PdfImage, PdfBitmap, PdfGraphicsState } from '@syncfusion/ej2-pdf';
+
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a page
+ let page: PdfPage = document.addPage();
+ // Get graphics from the page
+ let graphics: PdfGraphics = page.graphics;
+ // Load the image— only the part within the clipping region will be visible
+ let image: PdfImage = new PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z');
+ // Save the current graphics state (to restore later)
+ let state: PdfGraphicsState = graphics.save();
+ //Translate the coordinate system to the required position
+ graphics.translateTransform({x: 100, y: 100});
+ //Apply transparency
+ graphics.setTransparency(0.5);
+ //Rotate the coordinate system
+ graphics.rotateTransform(-45);
+ // Draw the image.
+ image.draw(graphics,{x: 10, y: 20});
+ // Restore the graphics state to remove the clipping region
+ graphics.restore(state);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Layers.md b/Document-Processing/PDF/PDF-Library/javascript/Layers.md
new file mode 100644
index 000000000..63664f6c2
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Library/javascript/Layers.md
@@ -0,0 +1,171 @@
+---
+title: Layers in TypeScript PDF library | Syncfusion
+description: This section explains how to add a layer in a PDF document using the TypeScript PDF library to organize content and enhance document structure
+platform: document-processing
+control: PDF
+documentation: UG
+---
+
+# Layers in TypeScript PDF library
+
+Layers, also known as Option Content refers to sections of content in a PDF document that can be selectively viewed or hidden by document authors or consumers. This capability is useful in items such as CAD drawings, layered artwork, maps, and multi-language documents.
+
+Essential® PDF provides support to create, add and merge the layers into PDF document.
+
+## Adding Layers in a PDF document
+
+This example demonstrates how to add layers to a PDF document using the `PdfLayer` class. Layers allow you to organize content into separate, optional sections that can be shown or hidden by the user.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfLayerCollection, PdfLayer, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf';
+
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a page
+ let page: PdfPage = document.addPage();
+ // Access the collection of layers in the PDF document
+ let layers: PdfLayerCollection = document.layers;
+ // Add a new layer named 'Layer1' to the PDF document
+ let layer: PdfLayer = layers.add('Layer1');
+ // Create a graphics object for the newly added layer on the specified page
+ let graphics: PdfGraphics = layer.createGraphics(page);
+ // Translate the graphics origin to the specified coordinates (x: 100, y: 60)
+ graphics.translateTransform({ x: 100, y: 60 });
+ // Create a black pen with a thickness of 1 unit
+ let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1);
+ // Draw a line using the pen from point (200, 10) to point (300, 100)
+ graphics.drawLine(pen, { x: 200, y: 10 }, { x: 300, y: 100 });
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Adding annotation to layer
+
+This example demonstrates how to add an annotation to a specific layer in a PDF document using the `PdfLayer` class. Associating annotations with layers allows you to control their visibility dynamically.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfLayerCollection, PdfLayer, PdfGraphics, PdfAnnotation, PdfPen } from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Access the collection of layers in the document
+ let layers: PdfLayerCollection = document.layers;
+ // Add a new layer to the document with the name 'Layer1'
+ let layer: PdfLayer = layers.add('Layer1');
+ // Access the first annotation on the page
+ let annotation: PdfAnnotation = page.annotations.at(0);
+ // Assign the layer to the annotation
+ annotation.layer = layer;
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Nested Layers
+
+This example demonstrates how to create nested layers in a PDF document using the `PdfLayer` class. Nested layers enable hierarchical organization of content for better control and user experience.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+import { PdfDocument, PdfPen } from '@syncfusion/ej2-pdf';
+
+// Create a new PDF document
+let document = new PdfDocument();
+// Add a page
+let page = document.addPage();
+// Get the collection of layers
+let layers = document.layers;
+// Add a new layer named 'Layer1'
+let layer = layers.add('Layer1');
+// Create graphics for 'Layer1'
+let graphics = layer.createGraphics(page);
+// Add one child layers
+let childLayer1 = layer.layers.add('ChildLayer2');
+// Create graphics for 'ChildLayer2'
+graphics = childLayer1.createGraphics(page);
+// Apply translation transform
+graphics.translateTransform({ x: 100, y: 60 });
+// Create a black pen
+let pen = new PdfPen({ r: 0, g: 0, b: 0 }, 1);
+// Draw a line
+graphics.drawLine(pen, { x: 200, y: 10 }, { x: 300, y: 100 });
+// Save and destroy the document
+document.save('Output.pdf');
+document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Removing layers from an existing PDF document
+
+This example demonstrates how to remove layers from an existing PDF document using the `PdfLayerCollection` class. Removing unnecessary layers helps simplify the document structure.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfLayerCollection } from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Get the layer collection.
+ let layers: PdfLayerCollection = document.layers;
+ //Remove the layer
+ layers.removeAt(0);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Lock or Unlock layers
+
+This example demonstrates how to lock or unlock layers in a PDF document using the `PdfLayer` class. Locking layers prevents users from toggling their visibility, ensuring that critical content remains displayed.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfLayerCollection, PdfLayer, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf';
+
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a new section to the document
+ let section: PdfSection = document.addSection();
+ // Add a page to the section
+ let page: PdfPage = section.addPage();
+ // Access the collection of layers in the PDF document
+ let layers: PdfLayerCollection = document.layers;
+ // Add a new layer named 'Layer1' to the PDF document
+ let layer: PdfLayer = layers.add('Layer1');
+ // Create a graphics object for the newly added layer on the specified page
+ let graphics: PdfGraphics = layer.createGraphics(page);
+ //Set a lock state
+ layer.locked = true;
+ // Translate the graphics origin to the specified coordinates (x: 100, y: 60)
+ graphics.translateTransform({ x: 100, y: 60 });
+ // Create a black pen with a thickness of 1 unit
+ let pen: PdfPen = new PdfPen({ r: 0, g: 0, b: 0 }, 1);
+ // Draw a line using the pen from point (200, 10) to point (300, 100)
+ graphics.drawLine(pen, { x: 200, y: 10 }, { x: 300, y: 100 });
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Lists.md b/Document-Processing/PDF/PDF-Library/javascript/Lists.md
new file mode 100644
index 000000000..ec01a5871
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Library/javascript/Lists.md
@@ -0,0 +1,111 @@
+---
+title: Lists in TypeScript PDF library | Syncfusion
+description: This section explains how to work with lists in a PDF document using the TypeScript PDF library to display and manage items in a structured format
+platform: document-processing
+control: PDF
+documentation: UG
+---
+
+# Lists in TypeScript PDF library
+
+The Syncfusion® PDF allows you list the content in ordered and unordered list. The ordered list can be number or alphabets and the unordered list can be bullets, circles, and images.
+
+## Adding an ordered list
+
+This example demonstrates how to create an ordered list in a PDF document using the `PdfOrderedList` class. Ordered lists allow you to present items in a structured, sequential format, typically numbered or lettered, enhancing readability and organization within the PDF content.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+import { PdfDocument, PdfPage, PdfList, PdfStandardFont, PdfBrush, PdfStringFormat, PdfPen, PdfNumberStyle, PdfOrderedList, PdfListItemCollection } from '@syncfusion/ej2-pdf';
+
+// Load an existing document
+let document: PdfDocument = new PdfDocument(data, password);
+// Access the first page
+let page: PdfPage = document.getPage(0);
+// Assign the array of string items
+let products: string[] = ['Excel', 'Power', 'Point', 'Word', 'PDF'];
+// Create a new font for list
+let itemFont: PdfStandardFont = new PdfStandardFont(PdfFontFamily.helvetica, 10);
+// Create a new brush for list
+let itemBrush: PdfBrush = new PdfBrush({ r: 0, g: 255, b: 255 });
+// Create a new format for list
+let itemFormat: PdfStringFormat = new PdfStringFormat(PdfTextAlignment.center);
+// Create a new pen for list
+let itemPen: PdfPen = new PdfPen({ r: 0, g: 255, b: 0 }, 1);
+// Initialize a PdfNumberStyle for items
+let itemStyle: PdfNumberStyle = PdfNumberStyle.numeric;
+// Initialize a delimiter for the items
+let itemDelimiter: string = ')';
+// Add the items to list item collection by passing the array of products
+let items: PdfListItemCollection = new PdfListItemCollection(products);
+// Initialize the instance of ordered list and pass the item collection and optional settings
+let list: PdfOrderedList = new PdfOrderedList(items, {
+ font: itemFont,
+ format: itemFormat,
+ pen: itemPen,
+ brush: itemBrush,
+ indent: 30,
+ textIndent: 50,
+ style: itemStyle,
+ delimiter: itemDelimiter
+});
+// Draw the ordered list on the page
+list.draw(page, { x: 0, y: 20, width: 500, height: 700 });
+// Save the document
+document.save('output.pdf');
+// Destroy the document
+document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Adding an unordered list
+
+This example demonstrates how to create an unordered list in a PDF document using the `PdfUnorderedList` class. Unordered lists display items with bullet points instead of numbers, making them ideal for presenting non-sequential information in a clear and organized manner.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+import { PdfDocument, PdfPage, PdfList, PdfStandardFont, PdfBrush, PdfStringFormat, PdfPen, PdfNumberStyle, PdfUnorderedListStyle, PdfListItemCollection } from '@syncfusion/ej2-pdf';
+
+// Load the existing document
+let document: PdfDocument = new PdfDocument(data, password);
+// Access the first page
+let page: PdfPage = document.getPage(0);
+// Define the items in the unordered list
+let products: string[] = ['Excel', 'Power', 'Point', 'Word', 'PDF'];
+// Create a new font for list
+let itemFont: PdfStandardFont = new PdfStandardFont(PdfFontFamily.helvetica, 10);
+// Create a new brush for list
+let itemBrush: PdfBrush = new PdfBrush({ r: 0, g: 255, b: 255 });
+// Create a new format for list
+let itemFormat: PdfStringFormat = new PdfStringFormat(PdfTextAlignment.center);
+// Create a new pen for list
+let itemPen: PdfPen = new PdfPen({ r: 0, g: 255, b: 0 }, 1);
+// Initialise a PdfUnorderedListStyle
+let itemStyle: PdfUnorderedListStyle = PdfUnorderedListStyle.square;
+// Initialize a delimiter for the items
+let itemDelimiter: string = ')';
+// Add the items to list item collection by passing the array of products
+let items: PdfListItemCollection = new PdfListItemCollection(products);
+// Initialize the instance of the unordered list and pass the list item collection and settings
+let list: PdfUnorderedList = new PdfUnorderedList(items, {
+ font: itemFont,
+ format: itemFormat,
+ pen: itemPen,
+ brush: itemBrush,
+ indent: 30,
+ textIndent: 50,
+ style: itemStyle,
+ delimiter: itemDelimiter
+});
+// Draw the unordered list on the page
+list.draw(page, { x: 0, y: 20, width: 500, height: 700 });
+// Save the document
+document.save('output.pdf');
+// Destroy the document
+document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Open-and-save-PDF-files.md b/Document-Processing/PDF/PDF-Library/javascript/Open-and-save-PDF-files.md
new file mode 100644
index 000000000..a476c7b7d
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Library/javascript/Open-and-save-PDF-files.md
@@ -0,0 +1,89 @@
+---
+layout: post
+title: Open and save PDF files using JavaScript PDF library | Syncfusion
+description: Learn to load and save PDFs in Syncfusion JavaScript PDF library using data as base64 strings or byte arrays.
+platform: document-processing
+control: PDF
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Open and save PDF files in JavaScript PDF library
+
+## Opening an existing PDF document
+
+Open an existing PDF document using the `PdfDocument` class with the specified PDF data.
+
+```typescript
+// Load an existing PDF document from string data
+let document: PdfDocument = new PdfDocument(data);
+```
+
+The PdfDocument constructor can accept PDF data in either Base64 string or Uint8Array format. Here’s a quick example for both approaches:
+
+### Using Base64 String
+
+Open an existing PDF document using the `PdfDocument` class with the specified PDF data as Base64 string.
+
+```javascript
+let data: string = 'JVBERi0xLjcNJeLjz9MNCjEyNSAw...........TU3MTQNCiUlRU9GDQo=';
+// Load an existing PDF document from data as Base64 string
+let document: PdfDocument = new PdfDocument(data);
+```
+
+### Using Uint8Array
+
+Open an existing PDF document using the `PdfDocument` class with the specified PDF data as Uint8Array.
+
+```javascript
+let binaryData: Uint8Array = Uint8Array.from(data);
+// Load an existing PDF document from data as Uint8Array
+let document: PdfDocument = new PdfDocument(binaryData);
+```
+
+## Opening an Encrypted PDF document with password
+
+Open an encrypted PDF document using the `PdfDocument` class by providing the correct password.
+
+```javascript
+// Load an existing PDF document with password
+let document: PdfDocument = new PdfDocument(data, "password");
+```
+
+## Save and download a PDF document in browser environment
+
+Save and download the PDF document using the `save` method of `PdfDocument` class with the specified file name.
+
+```javascript
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+// To-Do some manipulation
+// Save and download the PDF document to the specified filename.
+document.save('output.pdf');
+```
+
+## Saving a PDF document to byte array
+
+Save the modified PDF document to the specified byte array using the `save` method available in `PdfDocument` class.
+
+```javascript
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+//To-Do some manipulation
+// Save and get PDF data as byte array.
+let data: Uint8Array = document.save();
+```
+
+## Closing a document
+
+After the document manipulation and save operation are completed, you should close the instance of `PdfDocument`, in order to release all the memory consumed by PDF DOM. The following code example illustrates how to destroy a `PdfDocument` instance.
+
+```javascript
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data);
+//To-Do some manipulation
+// Save the PDF document
+document.save('output.pdf');
+// Destroy the document
+document.destroy();
+```
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/javascript-es6/Overview.md b/Document-Processing/PDF/PDF-Library/javascript/Overview.md
similarity index 70%
rename from Document-Processing/PDF/PDF-Library/javascript-es6/Overview.md
rename to Document-Processing/PDF/PDF-Library/javascript/Overview.md
index d693fc73f..66f0b4596 100644
--- a/Document-Processing/PDF/PDF-Library/javascript-es6/Overview.md
+++ b/Document-Processing/PDF/PDF-Library/javascript/Overview.md
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
# Overview of the TypeScript PDF library control
-The Essential® TypeScript PDF library is a feature-rich, high-performance, non-UI PDF library written natively in TypeScript. It enables you to seamlessly integrate robust PDF functionalities into your TypeScript applications. The library allows users to read and manipulate PDF documents without requiring Adobe Acrobat.
+The Essential® TypeScript PDF Library is a powerful, high-performance, non-UI solution built natively in TypeScript. It provides seamless integration of advanced PDF functionalities into applications developed with TypeScript, JavaScript, Angular, React, Vue, ASP.NET Core, and ASP.NET MVC. With this library, you can easily read, create, and manipulate PDF documents—without relying on Adobe Acrobat.
## Key features
@@ -32,4 +32,14 @@ The following are the key features of this library.
* Digitally sign PDF documents for secure authentication.
* Extract or redact text from PDF files.
* Extract images from PDF documents.
-* Redact shapes to protect sensitive graphical content.
\ No newline at end of file
+* Redact shapes to protect sensitive graphical content.
+
+## Supported web platforms
+
+* ASP.NET core
+* ASP.NET MVC
+* Angular
+* React
+* Vue
+* JavaScript
+* TypeScript
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/javascript/PDF-document.md b/Document-Processing/PDF/PDF-Library/javascript/PDF-document.md
new file mode 100644
index 000000000..e244d4fbe
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Library/javascript/PDF-document.md
@@ -0,0 +1,148 @@
+---
+title: Document in TypeScript PDF library | Syncfusion
+description: This section explains how to set document settings and properties in a PDF file by using the TypeScript PDF library
+platform: document-processing
+control: PDF
+documentation: UG
+---
+# Document in TypeScript PDF library
+
+Essential® PDF provides support to create, read, and manipulate PDF documents, allowing you to generate high-quality, secure, and feature-rich PDF files programmatically.
+
+## Adding the document settings
+
+This example shows how to configure custom page settings before adding a page to a PDF document. It creates a `PdfPageSettings` instance, applies margins, page size and sets the orientation.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfPageSettings, PdfMargins, PdfPageOrientation, PdfStandardFont, PdfFontFamily, PdfFontStyle } from '@syncfusion/ej2-pdf';
+
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Create a new PDF page settings instance
+ let pageSettings: PdfPageSettings = new PdfPageSettings();
+ // Sets the margins
+ pageSettings.margins = new PdfMargins(40);
+ // Sets the page size
+ pageSettings.size ={width: 595, height: 842};;
+ // Sets the page orientation
+ pageSettings.orientation = PdfPageOrientation.landscape;
+ // Add a page
+ let page: PdfPage = document.addPage(pageSettings);
+ // Get graphics from the page
+ let graphics: PdfGraphics = page.graphics;
+ // Set font
+ let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
+ // Draw text
+ graphics.drawString('Hello World', font, {x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Creating sections in a PDF
+
+This example demonstrates how to create a section in a PDF document with custom page settings. It shows how to configure rotation, orientation, margins, and page size using `PdfPageSettings`. The `PdfSection` class is used to apply different page customizations within a single PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfPageSettings, PdfMargins, PdfPageOrientation, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf';
+
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Define page settings
+ let settings: PdfPageSettings = new PdfPageSettings();
+ settings.rotation = PdfRotationAngle.angle180;
+ settings.orientation = PdfPageOrientation.landscape;
+ settings.margins = new PdfMargins(40);
+ settings.size = {width: 595, height: 842};;
+ // Add a section to the document with the specified settings
+ let section: PdfSection = document.addSection(settings);
+ // Add a page
+ let page: PdfPage = section.addPage();
+ // Get graphics from the page
+ let graphics: PdfGraphics = page.graphics;
+ // Set font
+ let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
+ // Draw text
+ graphics.drawString('Hello World', font, {x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Working with document properties
+
+This example demonstrates how to create a PDF document, set its metadata properties such as title, author, subject, keywords, creator, producer, language, and dates, and then retrieve these properties using the `PdfDocumentInformation` class.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfDocumentInformation, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf';
+
+ // Create a PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Access the document information (metadata)
+ let documentProperties: PdfDocumentInformation = document.getDocumentInformation();
+ // Set document properties
+ documentProperties.title = "Sample PDF Document"; // Title of the PDF
+ documentProperties.author = "John Doe"; // Author name
+ documentProperties.subject = "PDF Metadata Example"; // Subject of the document
+ documentProperties.keywords = "PDF, Metadata, Example"; // Keywords for search
+ documentProperties.creator = "Syncfusion PDF Library"; // Application that created the PDF
+ documentProperties.producer = "Syncfusion PDF Engine"; // PDF producer
+ documentProperties.language = "en-US"; // Language of the document
+ documentProperties.creationDate = new Date(); // Creation date
+ documentProperties.modificationDate = new Date(); // Last modified date
+ // Add a page
+ let page: PdfPage = document.addPage();
+ // Get graphics from the page
+ let graphics: PdfGraphics = page.graphics;
+ // Set font
+ let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
+ // Draw text
+ graphics.drawString('Hello World', font, {x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Performing incremental update for PDF document
+
+The `isIncrementalUpdate` property allows you to check if the PDF document supports incremental updates, which can improve performance during modifications by appending changes rather than rewriting the entire document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf';
+
+ // Create a PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Disable incremental update to rewrite the entire file
+ document.fileStructure.isIncrementalUpdate = false;
+ // Add a page
+ let page: PdfPage = document.addPage();
+ // Get graphics from the page
+ let graphics: PdfGraphics = page.graphics;
+ // Set font
+ let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
+ // Draw text
+ graphics.drawString('Hello World', font, {x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Library/javascript/PDF-pages.md b/Document-Processing/PDF/PDF-Library/javascript/PDF-pages.md
new file mode 100644
index 000000000..56cd40327
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Library/javascript/PDF-pages.md
@@ -0,0 +1,279 @@
+---
+title: Pages in TypeScript PDF library | Syncfusion
+description: This section explains how to add, rearrange, remove pages, and detect empty pages in a PDF file by using the TypeScript PDF library
+platform: document-processing
+control: PDF
+documentation: UG
+---
+# Pages in TypeScript PDF library
+
+Essential® PDF provides support to add, remove, rearrange, and detect empty pages in PDF documents, enabling complete control over page management for creating dynamic and customized PDFs.
+
+## Adding a new page to the document
+
+The following code sample demonstrates how to add a `PdfPage` to a PDF document. When multiple pages are added, each new page is appended to the end of the document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf';
+
+ // Create a PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a page
+ let page: PdfPage = document.addPage();
+ // Get graphics from the page
+ let graphics: PdfGraphics = page.graphics;
+ // Set font
+ let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
+ // Draw text
+ graphics.drawString('Hello World', font, {x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Adding margin to the PDF pages
+
+The `PdfPageSettings` class is used to define properties such as margins, orientation, rotation, and page size. In this example, margins are set using the `PdfMargins` class to ensure consistent spacing around the page content. These settings can be applied when creating sections or pages in the PDF for precise layout control.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf';
+
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Define page settings
+ let settings: PdfPageSettings = new PdfPageSettings();
+ // Add margin
+ settings.margins = new PdfMargins(40);
+ // Add a section to the document with the specified settings
+ let section: PdfSection = document.addSection(settings);
+ // Add a page
+ let page: PdfPage = section.addPage();
+ // Get graphics from the page
+ let graphics: PdfGraphics = page.graphics;
+ // Set font
+ let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
+ // Draw text
+ graphics.drawString('Hello World', font, {x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Adding sections with different page settings
+
+This example demonstrates how to add sections with different page settings in a PDF document. It shows how to configure rotation, orientation, margins, and page size using `PdfPageSettings`. The `PdfSection` class is used to apply unique page customizations within a single PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf';
+
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Create a new PDF page settings instance
+ let pageSetting: PdfPageSettings = new PdfPageSettings();
+ // Sets the margins
+ pageSetting.margins = new PdfMargins(40);
+ // Sets the page size
+ pageSetting.size ={width: 595, height: 842};;
+ // Sets the page orientation
+ pageSetting.orientation = PdfPageOrientation.landscape;
+ // Add a page
+ let page: PdfPage = document.addPage(pageSetting);
+ // Get graphics from the page
+ let graphics: PdfGraphics = page.graphics;
+ // Set font
+ let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
+ // Draw text
+ graphics.drawString('Hello World', font, {x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
+ // Create a new PDF page settings instance
+ let pageSetting1: PdfPageSettings = new PdfPageSettings();
+ // Sets the margins
+ pageSetting1.margins = new PdfMargins(40);
+ // Sets the page size
+ pageSetting1.size ={width: 595, height: 842};;
+ // Sets the page orientation
+ pageSetting1.orientation = PdfPageOrientation.landscape;
+ // Add a page
+ let page1: PdfPage = document.addPage(pageSetting1);
+ // Get graphics from the page
+ let graphics1 = page1.graphics;
+ // Draw text
+ graphics1.drawString('Hello World', font, {x: 40, y: 60, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
+ // Save the PDF document
+ document.save('Output.pdf');
+ // Close and dispose the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Get number of pages from a PDF document
+
+This example demonstrates how to retrieve the total number of pages in a PDF document using the `pageCount` property of the `PdfDocument` class. The page count returns an integer value representing the number of pages currently in the document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument } from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Gets the page count
+ let count: number = document.pageCount;
+ // Destroy the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Importing pages from an existing document
+
+This example demonstrates how to import pages from an existing PDF document into a new PDF document using the `importPageRange` method of the `PdfDocument` class. This method allows you to specify a start and end index to copy a range of pages from the source document into the target document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument } from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Define start and end page indices
+ let startIndex = 0;
+ let endIndex = document.pageCount - 1;
+ // Import all pages from the loaded document into the new document
+ document.importPageRange(document, startIndex, endIndex);
+ // Save the new document
+ document.save('Output.pdf');
+ // Close the loaded document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Rearranging pages in an existing document
+
+This example demonstrates how to rearrange the pages in an existing PDF document using the `reorderPages` method of the `PdfDocument` class. The method accepts an array of page indices that defines the new order of pages within the document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument } from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Reorders the pages in the PDF document
+ document.reorderPages([3, 2, 1]);
+ // Save the document
+ document.save('output.pdf');
+ // Destroy the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Removing pages from a document
+
+This example demonstrates how to remove a page from a PDF document using the `removePage` method of the `PdfDocument` class. The method takes the zero-based index of the page to be removed, effectively deleting that page from the document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument } from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Removes the first page
+ document.removePage(0);
+ // Save the document
+ document.save('output.pdf');
+ // Destroy the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Rotating a PDF page
+
+This example demonstrates how to rotate a PDF page using the `rotation` property of the `PdfPageSettings` class. The property accepts a value from the `PdfRotationAngle` enumeration, such as angle180, to specify the rotation angle applied to the page.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle } from '@syncfusion/ej2-pdf';
+
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Create a new PDF page settings instance
+ let pageSetting : PdfPageSettings = new PdfPageSettings();
+ // Sets the page rotation
+ pageSetting.rotation = PdfRotationAngle.angle180;
+ // Add a page
+ let page: PdfPage = document.addPage(pageSetting);
+ // Get graphics from the page
+ let graphics: PdfGraphics = page.graphics;
+ // Set font
+ let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
+ // Draw text
+ graphics.drawString('Hello World', font, {x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
+ // Save the PDF document
+ let data = document.save('Output.pdf');
+ // Close and dispose the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Rotating an existing PDF page
+
+This example demonstrates how to rotate an existing PDF page using the `rotation` property of the `PdfPage` class. The property accepts a value from the `PdfRotationAngle` enumeration, such as angle180, to specify the rotation angle applied to the selected page.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle } from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Access first page
+ let page: PdfPage = document.getPage(0);
+ //Set the rotation for loaded page
+ page.rotation = PdfRotationAngle.angle180;
+ // Save the document
+ document.save('output.pdf');
+ // Destroy the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Splitting a PDF file to individual pages
+
+This example demonstrates how to split a PDF file into individual pages by importing a specific page from the source document using the `importPage` method of the `PdfDocument` class. The method takes the zero-based index of the page to be copied and adds it as a new page in the target document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle } from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Copy the second page and add it as third page
+ document.importPage(1);
+ // Save the output PDF
+ document.save('Output.pdf');
+ // Destroy the documents
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Redaction.md b/Document-Processing/PDF/PDF-Library/javascript/Redaction.md
new file mode 100644
index 000000000..e8000932b
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Library/javascript/Redaction.md
@@ -0,0 +1,147 @@
+---
+title: Redaction in TypeScript PDF library |Syncfusion
+description: This section explains how to redact content from an existing PDF document by using the TypeScript PDF library
+platform: document-processing
+control: PDF
+documentation: UG
+---
+# Redaction in TypeScript PDF library
+
+Redacting a PDF is the process of permanently removing sensitive or confidential information from PDF documents. Syncfusion® PDF library provides an easy way to redact PDF documents.
+
+## Removing sensitive content from the PDF document
+
+Redaction permanently removes confidential or sensitive information from a PDF. The `PdfRedactionAnnotation` class allows you to define areas to redact, ensuring the underlying text or image data is completely deleted from the document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+import { PdfDocument, PdfPage, PdfRedactionAnnotation } from '@syncfusion/ej2-pdf';
+
+// Load an existing PDF document
+let document: PdfDocument = new PdfDocument(data, password);
+// Get the first page
+let page: PdfPage = document.getPage(0) as PdfPage;
+// Create a new redaction annotation
+const annot: PdfRedactionAnnotation = new PdfRedactionAnnotation(
+ { x: 100, y: 100, width: 100, height: 100 },
+ {
+ borderColor: { r: 255, g: 0, b: 0 },
+ repeatText: true,
+ font: document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular),
+ textColor: { r: 0, g: 0, b: 0 },
+ appearanceFillColor: { r: 255, g: 255, b: 255 }
+ }
+);
+// Add annotation to the page
+page.annotations.add(annot);
+// Destroy the document
+document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Display text on the redacted area
+
+You can overlay custom text on the redacted region to indicate the reason for redaction or provide context. For example, adding "Confidential" or "Redacted" helps users understand why the content was removed.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfRedactionAnnotation } from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Create a new redaction annotation
+ const font: PdfFont = new PdfStandardFont(PdfFontFamily.timesRoman, 12);
+ const annotation: PdfRedactionAnnotation = new PdfRedactionAnnotation({x: 100, y: 100, width: 100, height: 100},{ borderColor: {r: 255, g: 0, b: 0},
+ repeatText: true,
+ overlayText: 'Sample Overlay',
+ font: document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular),
+ textColor: {r: 0, g: 0, b: 0},
+ appearanceFillColor: {r: 255, g: 255, b: 255} });
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Fill color on the redacted area
+
+You can apply a solid fill color to cover the redacted content. This is the most common approach for redaction.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfRedactionAnnotation } from '@syncfusion/ej2-pdf';
+
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a page
+ let page: PdfPage = document.addPage();
+ // Create a new redaction annotation with specified position and size
+ let annot: PdfRedactionAnnotation = new PdfRedactionAnnotation({ x: 100, y: 100, width: 300, height: 200 });
+ // Define multiple rectangular areas (bounds) within the annotation for redaction
+ annot.boundsCollection = [
+ { x: 50, y: 50, width: 100, height: 100 }, // First redaction area
+ { x: 200, y: 100, width: 60, height: 30 }, // Second redaction area
+ { x: 100, y: 400, width: 60, height: 30 } // Third redaction area
+ ];
+ // Set the overlay text that will appear on the redacted areas
+ annot.overlayText = "Confidential";
+ // Enable repeating the overlay text across the redacted region
+ annot.repeatText = true;
+ // Set the fill color for the redaction appearance (red)
+ annot.appearanceFillColor = { r: 255, g: 0, b: 0 };
+ // Set the color of the overlay text (blue)
+ annot.textColor = { r: 0, g: 0, b: 255 };
+ // Set the opacity level for the redaction annotation (50% transparent)
+ annot.opacity = 0.5;
+ // Set the inner color for the redaction area (green)
+ annot.innerColor = { r: 0, g: 255, b: 0 };
+ // Align the overlay text to the center of the redaction area
+ annot.textAlignment = PdfTextAlignment.center;
+ // Specify the author of the annotation
+ annot.author = "QA Tester";
+ // Specify the subject or purpose of the annotation
+ annot.subject = "Redaction Test";
+ // Add the configured redaction annotation to the page's annotations collection
+ page.annotations.add(annot);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Redaction appearance fill color
+
+Customize the appearance of the redacted area by applying specific fill colors. This helps maintain a consistent design or highlight redacted sections in a visually appealing way.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfRedactionAnnotation } from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ //Appearance Fill color
+ const annot = new PdfRedactionAnnotation({x: 100, y: 100, width: 100, height: 50});
+ annot.appearanceFillColor = {r: 255, g: 255, b: 0};
+ page.annotations.add(annot);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Shapes.md b/Document-Processing/PDF/PDF-Library/javascript/Shapes.md
new file mode 100644
index 000000000..12d303c92
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Library/javascript/Shapes.md
@@ -0,0 +1,508 @@
+---
+title: Shapes in TypeScript PDF library | Syncfusion
+description: This section explains how to add shapes such as lines, curves, paths, text, rectangles, pies, arcs, Beziers, and ellipses by using the TypeScript PDF library
+platform: document-processing
+control: PDF
+documentation: UG
+---
+# Shapes in TypeScript PDF library
+
+Essential® PDF has support for adding the below shapes.
+
+* Line
+* Curve
+* Path
+* Text
+* Rectangle
+* Pie
+* Arc
+* Bezier
+* Ellipse
+
+## Adding Shapes to a PDF document
+
+Essential® PDF supports adding shapes with different types of brushes like solid bush, gradient brush, tiling brush, and image brush along with various color spaces and transparency levels.
+
+### Polygon
+
+This example demonstrates how to draw a polygon shape in a PDF document using the `drawPolygon` method of the `PdfGraphics` class.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfPen } from '@syncfusion/ej2-pdf';
+
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a page
+ let page: PdfPage = document.addPage();
+ // Get graphics from the page
+ let graphics: PdfGraphics = page.graphics;
+ // Create a new pen
+ let pen: PdfPen = new PdfPen({r: 0, g: 0, b: 0}, 1);
+ // Define the polygon points
+ let points: Point[] = [{x: 10, y: 100}, {x: 10, y: 200}, {x: 100, y: 100}, {x: 100, y: 200}, {x: 55, y: 150}];
+ // Draw the polygon on the page graphics
+ graphics.drawPolygon(points, pen);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to draw a polygon in an existing PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfPen } from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Get graphics from the page
+ let graphics: PdfGraphics = page.graphics;
+ // Create a new pen
+ let pen: PdfPen = new PdfPen({r: 0, g: 0, b: 0}, 1);
+ // Define the polygon points
+ let points: Point[] = [{x: 10, y: 100}, {x: 10, y: 200}, {x: 100, y: 100}, {x: 100, y: 200}, {x: 55, y: 150}];
+ // Draw the polygon on the page graphics
+ graphics.drawPolygon(points, pen);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+### Line
+
+This example demonstrates how to draw a straight line in a PDF document using the `drawLine` method of the `PdfGraphics` class.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfPen } from '@syncfusion/ej2-pdf';
+
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a page
+ let page: PdfPage = document.addPage();
+ // Get graphics from the page
+ let graphics: PdfGraphics = page.graphics;
+ // Create a new pen
+ let pen: PdfPen = new PdfPen({r: 0, g: 0, b: 0}, 1);
+ // Draw a line on the page graphics
+ graphics.drawLine(pen, {x: 10, y: 200}, {x: 100, y: 100});
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to draw a line in an existing PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfPen } from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Get graphics from the page
+ let graphics: PdfGraphics = page.graphics;
+ // Create a new pen
+ let pen: PdfPen = new PdfPen({r: 0, g: 0, b: 0}, 1);
+ // Draw a line on the page graphics
+ graphics.drawLine(pen, {x: 10, y: 200}, {x: 100, y: 100});
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+### Path
+
+This example demonstrates how to draw a path in a PDF document using the `drawPath` method of the `PdfGraphics` class.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfPen, PdfPath } from '@syncfusion/ej2-pdf';
+
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a page
+ let page: PdfPage = document.addPage();
+ // Create a new path
+ let path: PdfPath = new PdfPath();
+ // Gets the graphics of the PDF page
+ let graphics: PdfGraphics = page.graphics;
+ // Create a new pen
+ let pen: PdfPen = new PdfPen({r: 0, g: 0, b: 0}, 1);
+ // Add lines to the path
+ path.addLine({x: 10, y: 50}, {x: 200, y: 250});
+ path.addLine({x: 10, y: 150}, {x: 220, y: 250});
+ path.addLine({x: 10, y: 200}, {x: 240, y: 250});
+ // Draw the path on the page graphics
+ graphics.drawPath(path, pen);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to draw path in an existing PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfPen, PdfPath } from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Create a new path
+ let path: PdfPath = new PdfPath();
+ // Gets the graphics of the PDF page
+ let graphics: PdfGraphics = page.graphics;
+ // Create a new pen
+ let pen: PdfPen = new PdfPen({r: 0, g: 0, b: 0}, 1);
+ // Add lines to the path
+ path.addLine({x: 10, y: 50}, {x: 200, y: 250});
+ path.addLine({x: 10, y: 150}, {x: 220, y: 250});
+ path.addLine({x: 10, y: 200}, {x: 240, y: 250});
+ // Draw the path on the page graphics
+ graphics.drawPath(path, pen);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+### Text
+
+This example demonstrates how to draw a text in a PDF document using the `drawString` method of the `PdfGraphics` class.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfStandardFont, PdfBrush } from '@syncfusion/ej2-pdf';
+
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a page
+ let page: PdfPage = document.addPage();
+ // Get graphics from the page
+ let graphics: PdfGraphics = page.graphics;
+ // Set font
+ let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
+ // Draw text
+ graphics.drawString('Hello World', font, {x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to draw text in an existing PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfStandardFont, PdfBrush } from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Get graphics from the page
+ let graphics: PdfGraphics = page.graphics;
+ // Set font
+ let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
+ // Draw text
+ graphics.drawString('Hello World', font, {x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+### Rectangle
+
+This example demonstrates how to draw a rectangle in a PDF document using the `drawRectangle` method of the `PdfGraphics` class.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf';
+
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a page
+ let page: PdfPage = document.addPage();
+ // Gets the graphics of the PDF page
+ let graphics: PdfGraphics = page.graphics;
+ // Create a new pen.
+ let pen: PdfPen = new PdfPen({r: 0, g: 0, b: 0}, 1);
+ // Draw a rectangle on the page graphics.
+ graphics.drawRectangle({x: 10, y: 20, width: 100, height: 200}, pen);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to draw rectangle in an existing PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Gets the graphics of the PDF page
+ let graphics: PdfGraphics = page.graphics;
+ // Create a new pen.
+ let pen: PdfPen = new PdfPen({r: 0, g: 0, b: 0}, 1);
+ // Draw a rectangle on the page graphics.
+ graphics.drawRectangle({x: 10, y: 20, width: 100, height: 200}, pen);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+### Pie
+
+This example demonstrates how to draw a pie in a PDF document using the `drawPie` method of the `PdfGraphics` class.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf';
+
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a page
+ let page: PdfPage = document.addPage();
+ // Gets the graphics of the PDF page
+ let graphics: PdfGraphics = page.graphics;
+ // Create a new pen
+ let pen: PdfPen = new PdfPen({r: 0, g: 0, b: 0}, 1);
+ // Draw a pie slice on the page graphics
+ graphics.drawPie({x: 10, y: 50, width: 200, height: 200}, 180, 60, pen);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to draw pie in an existing PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Gets the graphics of the PDF page
+ let graphics: PdfGraphics = page.graphics;
+ // Create a new pen
+ let pen: PdfPen = new PdfPen({r: 0, g: 0, b: 0}, 1);
+ // Draw a pie slice on the page graphics
+ graphics.drawPie({x: 10, y: 50, width: 200, height: 200}, 180, 60, pen);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+### Arc
+
+This example demonstrates how to draw a arc in a PDF document using the `drawArc` method of the `PdfGraphics` class.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf';
+
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a page
+ let page: PdfPage = document.addPage();
+ // Gets the graphics of the PDF page
+ let graphics: PdfGraphics = page.graphics;
+ // Create a new pen
+ let pen: PdfPen = new PdfPen({r: 0, g: 0, b: 0}, 1);
+ // Draw a arc slice on the page graphics
+ graphics.drawArc({x: 10, y: 20, width: 100, height: 200}, 20, 30, pen);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to draw arc in an existing PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Gets the graphics of the PDF page
+ let graphics: PdfGraphics = page.graphics;
+ // Create a new pen
+ let pen: PdfPen = new PdfPen({r: 0, g: 0, b: 0}, 1);
+ // Draw a aec slice on the page graphics
+ graphics.drawArc({x: 10, y: 20, width: 100, height: 200}, 20, 30, pen);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+### Bezier
+
+This example demonstrates how to draw a bezier in a PDF document using the `drawBezier` method of the `PdfGraphics` class.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf';
+
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a page
+ let page: PdfPage = document.addPage();
+ // Gets the graphics of the PDF page
+ let graphics: PdfGraphics = page.graphics;
+ // Create a new pen
+ let pen: PdfPen = new PdfPen({r: 0, g: 0, b: 0}, 1);
+ // Draw a Bezier curve on the page graphics
+ graphics.drawBezier({x: 50, y: 100}, {x: 200, y: 50}, {x: 100, y: 150}, {x: 150, y: 100}, pen);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to draw bezier in an existing PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Gets the graphics of the PDF page
+ let graphics: PdfGraphics = page.graphics;
+ // Create a new pen
+ let pen: PdfPen = new PdfPen({r: 0, g: 0, b: 0}, 1);
+ // Draw a Bezier curve on the page graphics
+ graphics.drawBezier({x: 50, y: 100}, {x: 200, y: 50}, {x: 100, y: 150}, {x: 150, y: 100}, pen);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% enhighlight %}
+{% endtabs %}
+
+### Ellipse
+
+This example demonstrates how to draw a ellipse in a PDF document using the `drawEllipse` method of the `PdfGraphics` class.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf';
+
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a page
+ let page: PdfPage = document.addPage();
+ // Gets the graphics of the PDF page
+ let graphics: PdfGraphics = page.graphics;
+ // Create a new pen
+ let pen: PdfPen = new PdfPen({r: 0, g: 0, b: 0}, 1);
+ // Draw an ellipse on the page graphics
+ graphics.drawEllipse({x: 10, y: 20, width: 100, height: 200}, pen);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+The following code snippet explains how to draw ellipse in an existing PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfGraphics, PdfPen } from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Access the first page
+ let page: PdfPage = document.getPage(0);
+ // Gets the graphics of the PDF page
+ let graphics: PdfGraphics = page.graphics;
+ // Create a new pen
+ let pen: PdfPen = new PdfPen({r: 0, g: 0, b: 0}, 1);
+ // Draw an ellipse on the page graphics
+ graphics.drawEllipse({x: 10, y: 20, width: 100, height: 200}, pen);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Supported-and-Unsupported-Features.md b/Document-Processing/PDF/PDF-Library/javascript/Supported-and-Unsupported-Features.md
new file mode 100644
index 000000000..bf4d6346d
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Library/javascript/Supported-and-Unsupported-Features.md
@@ -0,0 +1,557 @@
+---
+title: Supported and Unsupported EJ2 Features | Syncfusion
+description: This section explains about features available in Essential EJ2 PDF and their availability in different platforms.
+platform: document-processing
+control: PDF
+documentation: UG
+---
+# Supported and Unsupported EJ2 Features
+
+The following table shows the various features available in the Essential® EJ2 PDF and their availability in different platforms.
+
+
+
+
+
+Features
+EJ2
+
+
+
+
+
+
+Drawing Text
+Yes
+
+
+Text Formatting
+Yes
+
+
+Multilingual Support
+Yes
+
+
+Drawing RTL text
+Yes
+
+
+Drawing complex script text
+No
+
+
+Text Extraction
+Yes
+
+
+Unicode
+Yes
+
+
+Pagination
+No
+
+
+
+Graphics:
+
+
+
+
+
+Features
+EJ2
+
+
+
+
+Pen and Brush
+Yes
+
+
+Layers
+Yes
+
+
+Transparent Graphics
+Yes
+
+
+Color Spaces
+No
+
+
+Image Extraction
+Yes
+
+
+Enhanced Printing Support
+No
+
+
+Barcode
+No
+
+
+
+Document-level Operations:
+
+
+
+
+
+Features
+EJ2
+
+
+
+
+
+Merge Documents
+Yes
+
+
+
+Split Document
+Yes
+
+
+Overlay Documents
+No
+
+
+Import Pages
+Yes
+
+
+Stamp
+Yes
+
+
+Booklet
+Yes
+
+
+
+Document Settings:
+
+
+
+
+
+Features
+EJ2
+
+
+
+
+
+Custom Metadata
+No
+
+
+Document Properties
+Yes
+
+
+Page Orientation
+Yes
+
+
+Page Sizes
+Yes
+
+
+Viewer Preferences
+No
+
+
+Tagged PDF with section 508 compliant
+No
+
+
+
+Forms:
+
+
+
+
+
+Features
+EJ2
+
+
+
+
+Fields
+Yes
+
+
+
+Form Filling
+Yes
+
+
+
+Flatten
+Yes
+
+
+
+Import Form Data
+Yes
+
+
+
+Form Export
+Yes
+
+
+
+
+XFA Forms:
+
+
+
+
+
+Features
+EJ2
+
+
+
+
+Fields
+No
+
+
+Form Filling
+No
+
+
+
+
+Document Conversion:
+
+
+
+
+
+Features
+EJ2
+
+
+
+
+TIFF to PDF
+No
+
+
+HTML to PDF
+No
+
+
+RTF To PDF
+No
+
+
+DOC To PDF
+No
+
+
+Excel To PDF
+No
+
+
+PDF OCR
+No
+
+
+XPS to PDF
+No
+
+
+SVG to PDF
+No
+
+
+EMF to PDF
+No
+
+
+JPEG to PDF
+No
+
+
+PDF to JPEG
+No
+
+
+PDF to PDF/A-1b
+No
+
+
+
+
+PDF Standards:
+
+
+
+
+
+Features
+EJ2
+
+
+
+
+PDF/ A-1b Compliance
+No
+
+
+PDF/ A-2b Compliance
+No
+
+
+PDF/ A-3b Compliance
+No
+
+
+PDF/x1a: 2001 Compliance
+No
+
+
+ZUGFeRD Invoice
+No
+
+
+
+Fonts:
+
+
+
+
+
+Features
+EJ2
+
+
+
+
+Standard Fonts
+Yes
+
+
+CJK Fonts
+Yes
+
+
+TrueType Fonts
+Yes
+
+
+Unicode TrueType
+Yes
+
+
+
+Images:
+
+
+
+
+
+Features
+EJ2
+
+
+
+
+Scalar Images
+Yes
+
+
+Soft Mask
+Yes
+
+
+Vector Images
+Yes
+
+
+
+Watermarks
+Yes
+
+
+Raster images (JPEG and PNG)
+Yes
+
+
+
+Tables:
+
+
+
+
+
+Features
+EJ2
+
+
+
+
+ADO.Net Tables Support
+No
+
+
+Cell / Row / Column Formatting
+No
+
+
+Header
+No
+
+
+Pagination
+No
+
+
+
+Borders
+No
+
+
+
+RowSpan and ColumnSpan
+No
+
+
+
+Nested table
+No
+
+
+
+Cell Padding and Spacing
+No
+
+
+
+
+Page Level Operations:
+
+
+
+
+
+Features
+EJ2
+
+
+
+
+Headers and Footers
+No
+
+
+Page Label
+No
+
+
+Automatic Fields
+No
+
+
+
+Interactive Elements:
+
+
+
+
+
+Features
+EJ2
+
+
+
+
+3D-Annotation
+No
+
+
+
+Measurement Annotations
+Yes
+
+
+
+Action
+No
+
+
+
+Attachment
+No
+
+
+
+Bookmark
+Yes
+
+
+
+Hyperlink
+Yes
+
+
+
+Portfolio
+No
+
+
+
+Import Annotation Data
+Yes
+
+
+
+Export Annotation Data
+Yes
+
+
+
+
+Security:
+
+
+
+
+
+Features
+EJ2
+
+
+
+
+Digital Signature
+Yes
+
+
+Digital Signature with LTV
+No
+
+
+Validate Digital Signature
+No
+
+
+Encryption and Decryption
+No
+
+
+Redaction
+Yes
+
+
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Templates.md b/Document-Processing/PDF/PDF-Library/javascript/Templates.md
new file mode 100644
index 000000000..e33d2fef8
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Library/javascript/Templates.md
@@ -0,0 +1,72 @@
+---
+title: Templates in TypeScript PDF library | Syncfusion
+description: This section explains how to create a PDF template, which is a drawing surface where contents can be added, by using the TypeScript PDF library
+platform: document-processing
+control: PDF
+documentation: UG
+---
+# Templates in TypeScript PDF library
+
+A PDF template is a drawing surface, where contents can be added. All the elements that can be added to a PdfPage is supported in PdfTemplate as well. The template in turn can be drawn over the page or can be positioned at any part of the page.
+
+## Creating a new PDF template
+
+This example demonstrates how to create a new PDF template using the `PdfTemplate` class. A PDF template allows you to define reusable graphics or content that can be drawn on multiple pages or annotations within a PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfRubberStampAnnotation, PdfTemplate, PdfImage, PdfBitmap } from '@syncfusion/ej2-pdf';
+
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a page
+ let page: PdfPage = document.addPage();
+ // Create a new rubber stamp annotation
+ let annotation: PdfRubberStampAnnotation = new PdfRubberStampAnnotation ({x: 50, y: 100, width: 100, height: 50});
+ // Get the normal appearance of the annotation
+ let normalAppearance: PdfTemplate = annotation.appearance.normal;
+ // Create new image object by using JPEG image data as Base64 string format
+ let image: PdfImage = new PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z');
+ // Draw the image as the custom appearance for the annotation
+ normalAppearance.graphics.drawImage(image, {x: 10, y: 20});
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Creating templates from existing PDF document
+
+This example demonstrates how to create templates from an existing PDF document using the `PdfTemplate` class. A PDF template allows you to extract and reuse content from a PDF page or annotation, enabling consistent design and repeated elements across multiple pages.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfRubberStampAnnotation, PdfTemplate, PdfImage, PdfBitmap } from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Get the first page
+ let page: PdfPage = document.getPage(0) as PdfPage;
+ // Create a new rubber stamp annotation
+ let annotation: PdfRubberStampAnnotation = new PdfRubberStampAnnotation ({x: 50, y: 100, width: 100, height: 50});
+ // Get the normal appearance of the annotation
+ let normalAppearance: PdfTemplate = annotation.appearance.normal;
+ // Create new image object by using JPEG image data as Base64 string format
+ let image: PdfImage = new PdfBitmap('/9j/4AAQSkZJRgABAQEAkACQAAD/4....QB//Z');
+ // Draw the image as the custom appearance for the annotation
+ normalAppearance.graphics.drawImage(image, {x: 10, y: 20});
+ // Add annotation to the page
+ page.annotations.add(annotation);
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Text-Extraction.md b/Document-Processing/PDF/PDF-Library/javascript/Text-Extraction.md
new file mode 100644
index 000000000..c4e459ed7
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Library/javascript/Text-Extraction.md
@@ -0,0 +1,210 @@
+---
+title: Text Extraction in TypeScript PDF library | Syncfusion
+description: This section explains how to extract text and its bounds from a specific page or the entire PDF document by using the TypeScript PDF library
+platform: document-processing
+control: PDF
+documentation: UG
+---
+# Text Extraction in TypeScript PDF library
+
+Essential® PDF allows you to extract the text from a particular page or the entire PDF document.
+
+## Working with basic text extraction
+
+This example demonstrates how to extract text from a PDF page using the `PdfDataExtractor` class. Basic text extraction allows retrieving plain text content from a PDF document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, string, PdfDataExtractor } from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Initialize a new instance of the `PdfDataExtractor` class
+ let extractor: PdfDataExtractor = new PdfDataExtractor(document);
+ // Extract text content from the PDF document.
+ let text: string = extractor.extractText();
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Extract Text from Specific Page Range in a PDF Document
+
+This example demonstrates how to extract text from a PDF document by specifying a start and end page number. This approach allows you to retrieve text content from a defined range of pages for processing or analysis.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, string, PdfDataExtractor } from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Initialize a new instance of the `PdfDataExtractor` class
+ let extractor: PdfDataExtractor = new PdfDataExtractor(document);
+ // Extract text content from the PDF document.
+ let text: string = extractor.extractText({ startPageIndex: 0, endPageIndex: document.pageCount - 1 });
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Working with layout based text extraction
+
+This example demonstrates how to extract text from a PDF page using the `PdfDataExtractor` class with layout-based options.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, string, PdfDataExtractor } from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Initialize a new instance of the `PdfDataExtractor` class
+ let extractor: PdfDataExtractor = new PdfDataExtractor(document);
+ // Extracts text from the PDF Page based on its layout
+ let text: string = extractor.extractText({isLayout: true});
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Layout based text extraction may take additional processing time when compared to the normal extraction mode.
+
+## Text Extraction with Bounds
+
+### Working with Lines
+
+This example demonstrates how to extract text from a PDF page based on individual lines using the `extractTextLines` method. This approach provides a collection of `TextLine` objects, allowing precise access to text content line by line.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, TextLine, PdfDataExtractor } from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Initialize a new instance of the `PdfDataExtractor` class
+ let extractor: PdfDataExtractor = new PdfDataExtractor(document);
+ // Extracts text from the PDF Page based on its line
+ let textCollection: TextLine[] = extractor.extractTextLines({ startPageIndex: 0, endPageIndex: document.pageCount - 1});
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+### Working with words
+
+This example demonstrates how to extract words from a PDF document using the `extractTextLines` method. Each line contains a collection of `TextWord` objects.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, TextLine, TextWord, PdfDataExtractor, TextGlyph } from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Create a PdfDataExtractor instance for the given PDF document
+ let extractor: PdfDataExtractor = new PdfDataExtractor(document);
+ // Extract text lines from all pages in the document
+ let textCollection: TextLine[] = extractor.extractTextLines({
+ startPageIndex: 0,
+ endPageIndex: document.pageCount - 1
+ });
+ let page: PdfPage;
+ // Iterate through each extracted text line
+ for (let i: number = 0; i < textCollection.length; i++) {
+ // Get the page corresponding to the current text line
+ page = document.getPage(textCollection[i].pageIndex);
+ // Retrieve all words from the current text line
+ let wordCollection: TextWord[] = textCollection[i].words;
+ // Iterate through each word in the line
+ for (let j: number = 0; j < wordCollection.length; j++) {
+ let word: TextWord = wordCollection[j];
+ if (word) {
+ // Iterate through each glyph (character shape) in the word
+ for (let k: number = 0; k < word.glyphs.length; k++) {
+ let glyph: TextGlyph = word.glyphs[k];
+ // Draw a rectangle around the glyph's bounding box on the page
+ page.graphics.drawRectangle(
+ glyph.bounds[0], // X-coordinate
+ glyph.bounds[1], // Y-coordinate
+ glyph.bounds[2], // Width
+ glyph.bounds[3], // Height
+ new PdfPen([238, 130, 238], 1) // Violet-colored pen with thickness 1
+ );
+ }
+ }
+ }
+ }
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+### Working with characters
+
+This example demonstrates how to access individual characters from a PDF document using the `TextGlyph` class.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, TextLine, TextWord, PdfDataExtractor, TextGlyph } from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Create a PdfDataExtractor instance for the given PDF document
+ let extractor: PdfDataExtractor = new PdfDataExtractor(document);
+ // Extract text lines from all pages in the document
+ let textCollection: TextLine[] = extractor.extractTextLines({
+ startPageIndex: 0,
+ endPageIndex: document.pageCount - 1
+ });
+ let page: PdfPage;
+ // Iterate through each extracted text line
+ for (let i: number = 0; i < textCollection.length; i++) {
+ // Get the page corresponding to the current text line
+ page = document.getPage(textCollection[i].pageIndex);
+ // Retrieve all words from the current text line
+ let wordCollection: TextWord[] = textCollection[i].words;
+ // Iterate through each word in the line
+ for (let j: number = 0; j < wordCollection.length; j++) {
+ let word: TextWord = wordCollection[j];
+ if (word) {
+ // Iterate through each glyph (character shape) in the word
+ for (let k: number = 0; k < word.glyphs.length; k++) {
+ let glyph: TextGlyph = word.glyphs[k];
+ // Draw a rectangle around the glyph's bounding box on the page
+ page.graphics.drawRectangle(
+ glyph.bounds[0], // X-coordinate
+ glyph.bounds[1], // Y-coordinate
+ glyph.bounds[2], // Width
+ glyph.bounds[3], // Height
+ new PdfPen([238, 130, 238], 1) // Violet-colored pen with thickness 1
+ );
+ }
+ }
+ }
+ }
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Text.md b/Document-Processing/PDF/PDF-Library/javascript/Text.md
new file mode 100644
index 000000000..3df81b037
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Library/javascript/Text.md
@@ -0,0 +1,266 @@
+---
+title: Text in TypeScript PDF library | Syncfusion
+description: This section explains how to add text to a PDF by using different types of fonts, including TrueType fonts and standard fonts, with the TypeScript PDF library
+platform: document-processing
+control: PDF
+documentation: UG
+---
+# Text in TypeScript PDF library
+
+Essential® PDF provides support to add and format text in PDF documents using various font types, including TrueType and standard fonts, enabling precise control over text appearance and layout.
+
+## Drawing text in a new document
+
+This example demonstrates how to draw text in a new PDF document using the `drawString` method of the `PdfGraphics` class. The method allows you to specify the text content, font, brush, and position to render the text on a page within the document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf';
+
+ // Create a PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a page
+ let page: PdfPage = document.addPage();
+ // Get graphics from the page
+ let graphics: PdfGraphics = page.graphics;
+ // Set font
+ let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
+ // Draw text
+ graphics.drawString('Hello World', font, {x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Due to the inherent limitations of the PDF specification and the rendering capabilities of PDF libraries, emojis with skin tone modifiers are not supported in generated PDF documents. Only the base versions of emojis can be displayed. This limitation is common across most PDF libraries, as the PDF format does not explicitly support rendering skin tone variations in emojis.
+
+## The importance of saving and restoring graphics state in PDF content rendering
+
+This example demonstrates the importance of saving and restoring the graphics state when rendering PDF content using the `save` and `restore` methods of the `PdfGraphics` class. These methods ensure that any transformations, such as scaling, rotation, or color changes, applied to the graphics context do not affect subsequent drawing operations, maintaining consistent layout and design.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf';
+
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a page
+ let page: PdfPage = document.addPage();
+ // Get graphics from the page
+ let graphics: PdfGraphics = page.graphics;
+ // Save the current graphics state and apply transformations
+ graphics.save();
+ graphics.translateTransform({x: 100, y: 50});
+ graphics.rotateTransform(45);
+ // Set font
+ let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
+ // Draw text
+ graphics.drawString('Hello World', font, {x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Drawing text in an existing document
+
+This example demonstrates how to draw text in an existing PDF document using the `drawString` method of the `PdfGraphics` class. The method allows you to specify the text content, font, brush, and position to render the text on a selected page within the document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf';
+
+ // Load an existing PDF document
+ let document: PdfDocument = new PdfDocument(data, password);
+ // Access first page
+ let page: PdfPage = document.getPage(0);
+ // Set font
+ let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
+ // Draw text
+ page.graphics.drawString('Hello World', font, {x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Drawing text using different fonts
+
+Essential® PDF allows you to add text to the PDF document using the following types of fonts.
+
+1. Standard fonts
+2. TrueType fonts
+3. Chinese, Japanese and Korean (CJK) fonts
+
+### Draw text using standard fonts
+
+This example demonstrates how to draw text using standard fonts in a PDF document by utilizing the `drawString` method of the `PdfGraphics` class along with predefined font types from the `PdfStandardFont` class. Standard fonts such as Helvetica, TimesRoman, or Courier can be specified to render text with consistent and widely supported typography.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfStandardFont, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf';
+
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a page
+ let page: PdfPage = document.addPage();
+ // Set font
+ let font: PdfStandardFont = new PdfStandardFont(PdfFontFamily.helvetica, 10);
+ // Draw text
+ page.graphics.drawString('Hello World', font, {x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+### Draw Text using TrueType fonts
+
+This example demonstrates how to draw text using TrueType fonts in a PDF document by utilizing the `drawString` method of the `PdfGraphics` class along with a `PdfTrueTypeFont` instance. The TrueType font provides enhanced text rendering with support for custom font styles.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfTrueTypeFont, PdfBrush } from '@syncfusion/ej2-pdf';
+
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a page
+ let page: PdfPage = document.addPage();
+ // Set font
+ let font: PdfTrueTypeFont = new PdfTrueTypeFont('Arial.ttf', 10);
+ // Draw text
+ page.graphics.drawString('Hello World', font, {x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+### Draw text using CJK fonts
+
+This example demonstrates how to draw text using fonts in a PDF document by utilizing the `drawString` method of the `PdfGraphics` class along with a `PdfCjkStandardFont` instance. CJK fonts provide support for Chinese, Japanese, and Korean characters, ensuring accurate rendering of multilingual text in the document.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfCjkStandardFont, PdfBrush } from '@syncfusion/ej2-pdf';
+
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a page
+ let page: PdfPage = document.addPage();
+ // Set font
+ let font: PdfCjkStandardFont = new PdfCjkStandardFont(PdfCjkFontFamily.heiseiMinchoW3, 10);
+ // Draw text
+ page.graphics.drawString('こんにちは世界', font, {x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Drawing text using OpenType font
+
+This example demonstrates how to draw text using an OpenType font in a PDF document by utilizing the `drawString` method of the `PdfGraphics` class along with a `PdfTrueTypeFont` instance. OpenType fonts provide advanced typographic features and support for a wide range of characters.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfTrueTypeFont, PdfBrush } from '@syncfusion/ej2-pdf';
+
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a page
+ let page: PdfPage = document.addPage();
+ // Set font
+ let font: PdfTrueTypeFont = new PdfTrueTypeFont("Arial.otf", 10);
+ // Draw text
+ page.graphics.drawString('Syncfusion Essential PDF library used to create, read, and edit PDF files in any application', font, {x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Drawing text using different text alignment
+
+This example demonstrates how to draw text in a PDF document using different text alignment options by utilizing the `PdfStringFormat` class. The alignment can be set through the alignment property, which supports values such as Left, Center, and Right, allowing precise control over the positioning of text within the page or a defined rectangle.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfStandardFont, PdfStringFormat, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf';
+
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a page
+ let page: PdfPage = document.addPage();
+ // Create a string format object to define text layout
+ let format = new PdfStringFormat();
+ format.alignment = PdfTextAlignment.right; // Align text to the right
+ format.wordSpacing = 2; // Set word spacing
+ format.characterSpacing = 1; // Set character spacing
+ // Set font
+ let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
+ // Draw text
+ page.graphics.drawString('Syncfusion Essential PDF library', font, {x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
+
+## LineLimit, ClipPath, NoClip properties in PdfStringFormat
+
+**LineLimit:** When LineLimit is enabled, the provided string will be laid out within the specified bounds. If the LineLimit property is disabled, the layout will continue to fill any remaining space. The default value of the LineLimit property is true.
+
+**NoClip:** If we enable the NoClip option, it will show the text without cutting any words. If we disable the NoClip option, any text outside the fitting area will be hidden.
+
+{% tabs %}
+{% highlight c# tabtitle="TypeScript" %}
+
+ import { PdfDocument, PdfPage, PdfStandardFont, PdfStringFormat, PdfFontFamily, PdfFontStyle, PdfBrush } from '@syncfusion/ej2-pdf';
+
+ // Create a new PDF document
+ let document: PdfDocument = new PdfDocument();
+ // Add a page
+ let page: PdfPage = document.addPage();
+ // Set font
+ let font: PdfStandardFont = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
+ // Create a new PdfStringFormat and set its properties
+ let format: PdfStringFormat = new PdfStringFormat();
+ // Set no clip
+ format.noClip = true;
+ // Set line limit
+ format.lineLimit = false;
+ // Draw text
+ page.graphics.drawString('Hello World', font, {x: 10, y: 20, width: 100, height: 200}, new PdfBrush({r: 0, g: 0, b: 255}));
+ // Save the document
+ document.save('Output.pdf');
+ // Close the document
+ document.destroy();
+
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file