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.

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%; }