Annotation and form editor with all editing tools enabled

Theme:

This sample provides access to all editing tools available in DsPdfViewer when it is connected to a server running DsPdf via the viewer.supportApi property. Use the File Open button (the first button in the top toolbar) to load any PDF into the editor (note that the maximum file size in this demo is limited, an error message will show if the limit is exceeded). Use the first of the two buttons at the bottom of the left vertical toolbar to access the Annotation Editor where you can add, edit or remove annotations. Use the second of the two buttons to access the AcroForm Editor where you can add, edit or remove form fields. Note that clicking the active editor button toggles the visibility of the properties panel without exiting the edit mode.

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.addFormEditorPanel();
viewer.open("/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/realestate-lease.pdf");
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Edit PDF</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%;
}