Secondary toolbar with quick edit tools

In the default configuration, the main viewer toolbar includes 5 buttons that provide access to quick edit tools: "Text tools", "Draw tools", "Attachments and stamps", "Form tools", "Page tools". Clicking any of those buttons opens the secondary toolbar containing the corresponding tools. In this sample the quick edit access buttons have been moved to the front of the main toolbar, otherwise they function as in the default layout.

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.addAnnotationEditorPanel(); viewer.addFormEditorPanel(); const toolbarLayout = viewer.toolbarLayout; toolbarLayout.viewer.mobile = toolbarLayout.viewer.default = ["text-tools", "draw-tools", "attachment-tools", "form-tools", "page-tools", "$split", "save", "$navigation", "$zoom"]; viewer.open("/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/realestate-lease.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.addAnnotationEditorPanel(); viewer.addFormEditorPanel(); const toolbarLayout = viewer.toolbarLayout; toolbarLayout.viewer.mobile = toolbarLayout.viewer.default = ["text-tools", "draw-tools", "attachment-tools", "form-tools", "page-tools", "$split", "save", "$navigation", "$zoom"]; 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>Quick edit tools</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%; }