Adding free-text annotations to PDFs with the GemBox.PdfViewer JavaScript library
GemBox.PdfViewer allows you to add free text annotations to PDF documents opened in your browser - Chrome, Edge, Firefox, or any other major one. Custom text can be inserted directly onto any page. This feature is particularly useful for document review workflows and adding contextual information to existing PDFs.
Basic Usage
To enable the free text annotation functionality, configure the toolbar options when creating the viewer:
GemBoxPdfViewer.create({
container: "#viewer",
initialDocument: "/document.pdf",
ui: {
toolbar: {
freeText: {
isVisible: true // default
}
}
}
});
With this configuration, users can click the free text button in the toolbar and add free text annotations to any page of a PDF document.
Programmatic Control
You can control the visibility of free text annotation controls programmatically after the viewer has been created:
const viewer = await GemBoxPdfViewer.create({
container: "#viewer",
initialDocument: "/document.pdf"
});
// Show free text controls
viewer.ui.toolbar.freeText.isVisible = true;
// Hide free text controls
viewer.ui.toolbar.freeText.isVisible = false;
// Check current visibility state
const isFreeTextVisible = viewer.ui.toolbar.freeText.isVisible;
viewer.features.annotations.addEventListener("annotationCreated", function (event) {
// Whether the created annotation is free text.
const isFreeText = event.annotation.type == AnnotationType.FREETEXT;
if (isFreeText) {
console.log("Free text annotation has been added.");
}
});
