DsPdfViewer annotation editor with all editing tools enabled

We enable the annotation editor panel in DsPdfViewer, with all annotation tools enabled by default. The loaded PDF is a sample report with a few annotations that suggest possible edits to the report's author. You can edit the existing, or add new annotations of various types. To save your changes, click the 'save' button in the annotation editor or in the main viewer toolbar. This sends the PDF and the list of changes to the server where DsPdf applies the edits and sends back the modified PDF. You can then open it in Acrobat or save locally.

window.onload = function(){ const viewer = new DsPdfViewer("#viewer", { workerSrc: "/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.worker.js", supportApi: getSupportApiSettings() }); viewer.addDefaultPanels(); viewer.addAnnotationEditorPanel(); viewer.layoutMode = 1; viewer.open("/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/viewer-edit-annotations.pdf"); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Edit Annotations</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./src/styles.css"> <script src="/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.js"></script> <script src="/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/wasmSupportApi.js"></script> <script src="/document-solutions/javascript-pdf-viewer/demos/resource/js/init.js"></script> <script src="./src/app.js"></script> </head> <body> <div id="viewer"></div> </body> </html>
#viewer { height: 100%; }