DsPdfViewer form editor with all editing tools enabled

We enable the form editor panel in DsPdfViewer, with all field tools enabled by default. The loaded PDF is a sample form with just one actual field, and with several places where fields should be added to make the form fully functional. To try the form designer in action, you can add the missing fields where appropriate. To save your changes, click the 'save' button in the form 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.

The demo is being dynamically compiled to support real-time code editing... For quicker access to features, switch to the "JavaScript" tab for a smoother experience! :)
app.js
index.html
styles.css
loading...
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.addFormEditorPanel(); viewer.layoutMode = 2; viewer.open("/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/viewer-edit-forms.pdf"); }
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.addFormEditorPanel(); viewer.layoutMode = 2; viewer.open("/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/viewer-edit-forms.pdf"); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Form Editor</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%; }