--- title: "PDF annotation permissions | Nutrient" canonical_url: "https://www.nutrient.io/guides/web/samples/custom-annotation-permissions/" md_url: "https://www.nutrient.io/guides/web/samples/custom-annotation-permissions.md" last_updated: "2026-05-23T00:08:18.187Z" description: "Learn to set custom permissions for annotations and explore our comprehensive guide on defining document collaboration permissions for effective teamwork." --- # Customize PDF annotation permissions using JavaScript Set custom permissions for annotation types or specific annotations. Get additional resources by visiting our guide about [defining document collaboration permissions](/guides/web/collaboration-permissions/introduction-to-collaboration-permissions.md). [Get Started](https://www.nutrient.io/sdk/web/getting-started.md) [All Samples](https://www.nutrient.io/guides/web/samples.md) [Download](https://www.nutrient.io/guides/web/downloads.md) [Launch Demo](https://www.nutrient.io/demo/) --- ```js import PSPDFKit from "@nutrient-sdk/viewer"; export function load(defaultConfiguration) { // Keep track of the current instance so that we // can use it inside of a toolbar item onPress callback. let instance = null; // Only allow annotations that got created by Current User const isEditableAnnotation = (annotation) => { return annotation.creatorName === "Current User"; }; // Only allow the following Annotation Types const editableAnnotationTypes = [PSPDFKit.Annotations.TextAnnotation]; const createTogglePermissionsToolbarItem = (currentPermissionMode) => { return { type: "custom", title: currentPermissionMode === "editableAnnotationTypes"? "Text Annotations Editable" : "Annotations By Current User Editable", onPress: () => { if (currentPermissionMode === "editableAnnotationTypes") { currentPermissionMode = "isEditableAnnotation"; instance.setIsEditableAnnotation(isEditableAnnotation); } else { currentPermissionMode = "editableAnnotationTypes"; instance.setEditableAnnotationTypes(editableAnnotationTypes); } let toolbarItems = PSPDFKit.defaultToolbarItems; toolbarItems.push( createTogglePermissionsToolbarItem(currentPermissionMode) ); instance.setToolbarItems(toolbarItems); }, }; }; const toolsToFilter = ["search", "export-pdf", "document-editor", "print"]; let toolbarItems = PSPDFKit.defaultToolbarItems.filter( (tool) =>!toolsToFilter.includes(tool.type) &&!tool.type.includes("sidebar-") ); toolbarItems.push(createTogglePermissionsToolbarItem("isEditableAnnotation")); const config = {...defaultConfiguration, isEditableAnnotation, toolbarItems, }; return PSPDFKit.load(config).then(async (_instance) => { instance = _instance; console.log("Nutrient Web SDK successfully loaded!!", instance); const annotationsOnFirstPage = await instance.getAnnotations(0); // Add two text annotations, one that was created by the current user, the other one // got created by another user. if (annotationsOnFirstPage.size <= 1) { await instance.create( new PSPDFKit.Annotations.TextAnnotation({ pageIndex: 0, boundingBox: new PSPDFKit.Geometry.Rect({ width: 150, height: 150, top: 350, left: 350, }), text: "Annotation created by current user", font: "Helvetica", isBold: true, horizontalAlign: "center", verticalAlign: "center", backgroundColor: PSPDFKit.Color.BLUE, fontColor: PSPDFKit.Color.WHITE, creatorName: "Current User", }) ); await instance.create( new PSPDFKit.Annotations.TextAnnotation({ pageIndex: 0, boundingBox: new PSPDFKit.Geometry.Rect({ width: 150, height: 150, top: 550, left: 350, }), text: "Annotation from another user", font: "Helvetica", isBold: true, horizontalAlign: "center", verticalAlign: "center", backgroundColor: PSPDFKit.Color.BLACK, fontColor: PSPDFKit.Color.WHITE, creatorName: "Other User", }) ); } // Set the author of every new annotation to "Current User" so it's editable instance.setAnnotationCreatorName("Current User"); return instance; }); } ``` This code sample is an example that illustrates how to use our SDK. Please adapt it to your specific use case. --- ## Related pages - [Add electronic signature images to PDFs using JavaScript](/guides/web/samples/adding-image-electronic-signatures.md) - [Open, view, and annotate on images using JavaScript](/guides/web/samples/annotating-images.md) - [Customize PDF annotation tooltips using JavaScript](/guides/web/samples/custom-annotation-tooltip.md) - [Add watermarks to PDFs using JavaScript example](/guides/web/samples/add-watermarks-to-pdf-javascript.md) - [Customized Document Editor Toolbar](/guides/web/samples/customized-document-editor-toolbar.md) - [Custom HTML PDF annotations using JavaScript](/guides/web/samples/custom-annotations.md) - [View PDFs in dark mode using JavaScript](/guides/web/samples/dark-mode-pdf-viewer.md) - [Edit PDFs using JavaScript](/guides/web/samples/edit-pdf-javascript.md) - [Customizing PDF text search using JavaScript](/guides/web/samples/customized-pdf-search.md) - [Create custom overlays on PDFs using JavaScript](/guides/web/samples/custom-overlay-items.md) - [Add electronic signatures to PDFs using JavaScript](/guides/web/samples/electronic-signatures-in-pdf.md) - [Customize the PDF toolbar using JavaScript](/guides/web/samples/customized-pdf-toolbar.md) - [Open PDFs using JavaScript](/guides/web/samples/open-pdf-using-javascript.md) - [PDF form support using JavaScript](/guides/web/samples/javascript-pdf-form.md) - [Handling password-protected PDFs in our JavaScript viewer](/guides/web/samples/password-protected-pdf.md) - [PDF presentation mode using JavaScript](/guides/web/samples/presentation-mode.md) - [Disable PDF editing and annotations](/guides/web/samples/open-read-only-pdf.md) - [PDF text selection using JavaScript](/guides/web/samples/pdf-text-selection-javascript.md) - [Zoom example for our JavaScript PDF viewer](/guides/web/samples/zooming.md) - [Customizing JavaScript PDF printing modes](/guides/web/samples/pdf-printing-modes.md) - [Storing electronic signatures in the browser using JavaScript](/guides/web/samples/stored-electronic-signatures.md) - [Flipbook PDF viewer using JavaScript](/guides/web/samples/flipbook.md) - [Collaborate on PDFs using JavaScript](/guides/web/samples/instant-pdf-collaboration.md) - [JavaScript PDF magazine viewer](/guides/web/samples/javascript-magazine-viewer.md) - [Hide or reveal area on PDFs using JavaScript](/guides/web/samples/hide-reveal-area-in-pdf.md) - [PDF annotation in JavaScript](/guides/web/samples/javascript-pdf-annotations.md) - [Digitally sign a PDF using JavaScript](/guides/web/samples/javascript-digital-signatures.md) - [PDF Collaboration permissions using JavaScript](/guides/web/samples/collaboration-permissions.md) - [Drag-and-drop UI in our JavaScript PDF viewer](/guides/web/samples/drag-and-drop.md) - [Redact PDFs using JavaScript](/guides/web/samples/javascript-pdf-redaction.md) - [Customize the UI for PDF annotations using JavaScript](/guides/web/samples/annotations-inspector.md)