PDF Web SDK Documentation

Comprehensive Guide for Developers: UI & SDK Integration, Configuration, and API Reference

PDF Web SDK
    Preparing search index...

    Layout Configuration

    The layoutConfig option lets you control which UI elements are visible and how they are arranged.

    Overview: See Configuration Options for the full list of config properties.

    The layout configuration follows two models depending on the section:

    • Header tabs use an opt-in approach — if you provide tabs.list, only the tabs you list are rendered, in the order you list them.
    • Sidebar, top bar, and navigation bar use an opt-out approach — all controls are enabled by default; set items to false to hide them.

    If you don't provide a layoutConfig, the full UI with all features will be displayed.

    Configure layout during editor initialization:

    import { PdfEditor } from '@avanquest/pdf-web-viewer';
    import { HeaderTab, Tools } from '@avanquest/pdf-web-viewer';

    // Example 1: No tabs config — all tabs visible (default)
    const editor = await PdfEditor({
      license: 'YOUR_LICENSE_KEY',
      container: document.getElementById('pdf-container'),
      layoutConfig: {
        header: {
          activeTab: HeaderTab.EDIT,
        },
      },
    });

    // Example 2: Only show specific tabs (opt-in)
    const editor = await PdfEditor({
      license: 'YOUR_LICENSE_KEY',
      container: document.getElementById('pdf-container'),
      layoutConfig: {
        header: {
          activeTab: HeaderTab.EDIT,
          tabs: {
            list: {
              edit: {}, // Show edit with all tools
              comment: {}, // Show comment with all tools
              page: {}, // Show page with all tools
              // Only these three tabs will be visible
            },
          },
        },
      },
    });

    Update layout configuration after initialization:

    const viewer = editor.ui.pdfWebElement;

    // Switch to only comment and fillAndSign tabs
    viewer.setLayout({
      header: {
        activeTab: HeaderTab.COMMENT,
        tabs: {
          list: {
            comment: {},
            fillAndSign: {},
          },
        },
      },
    });

    When you provide tabs.list, only the listed tabs appear, in the order you list them:

    const layoutConfig: ILayoutConfig = {
      header: {
        activeTab: HeaderTab.EDIT,
        tabs: {
          list: {
            translate: {}, // Translate tab first
            edit: {}, // Edit tab second
            comment: {}, // Comment tab third
            // Only these three tabs are visible
          },
        },
      },
    };

    Available tabs: create, edit, comment, forms, page, secure, fillAndSign, eSign, certify, translate, tools

    When you provide tools for a tab, only the listed tools appear. Omitting tools shows all tools for that tab:

    const layoutConfig: ILayoutConfig = {
      header: {
        tabs: {
          list: {
            edit: {
              tools: [
                Tools.Edit.TEXT, // → 'edit.text' (fully-qualified)
                Tools.Edit.IMAGE, // → 'edit.image'
                // Other edit tools are hidden
              ],
            },
            comment: {}, // Show comment with ALL tools (no tools key)
          },
        },
      },
    };

    Tools.* constants produce fully-qualified keys (e.g., Tools.Edit.TEXT === 'edit.text'). You can also use plain strings:

    tools: [Tools.Edit.TEXT]; // Recommended — unambiguous, with autocomplete
    tools: ['edit.text']; // Full format string — equivalent to above
    tools: ['text']; // Short format — matches ALL tabs with a 'text' tool

    Note: Some tool names exist in multiple tabs (e.g., 'text' is in both Edit and Fill & Sign). Short format 'text' will include all matching tools. Use the full format or Tools.* to be specific.

    Available tool patterns:

    • Create: create.newFile, create.urlToPdf, create.clipboardToPdf
    • Edit: edit.text, edit.image, edit.link, edit.ruler, edit.grid, edit.watermark, edit.pageNumber, edit.headerFooter, edit.removeMarks
    • Comment: comment.draw, comment.highlight, comment.strikethrough, comment.underline, comment.shapes, comment.measurement, comment.stickerNote, comment.whiteout, comment.stamp
    • Forms: forms.textField, forms.comboBox, forms.listBox, forms.checkBox, forms.radioBox, forms.highlightFields, forms.formData, forms.formReset
    • Page: page.organize, page.crop, page.uncrop, page.reverse, page.size, page.deskew, page.background, page.margins, page.extract, page.duplicate
    • Secure: secure.securityPermissions, secure.sanitize, secure.removeMetadata, secure.redact
    • Fill & Sign: fillAndSign.text, fillAndSign.checkmark, fillAndSign.crossmark, fillAndSign.dot, fillAndSign.line, fillAndSign.signerName, fillAndSign.signingDate, fillAndSign.signature, fillAndSign.initials
    • E Sign: eSign.addSignature, eSign.addInitials, eSign.addSignerName, eSign.addSignerDate, eSign.addSignerEmail, eSign.addSignerTitle, eSign.addSignerCompany, eSign.addTextInput, eSign.addCheckBox, eSign.addRadioButton, eSign.addDropdown
    • Certify: certify.digitallySign, certify.certify
    • Translate: translate.allPages, translate.useORC
    • Tools: tools.merge, tools.compress, tools.convert, tools.ocr, tools.splitPdf

    Create custom tabs by using any key not matching a built-in tab name:

    const layoutConfig: ILayoutConfig = {
      header: {
        activeTab: 'myCustomTab',
        tabs: {
          list: {
            edit: {}, // Built-in tab
            comment: {}, // Built-in tab
            myCustomTab: {
              // Custom tab — cherry-pick tools from any built-in tab
              tools: [
                Tools.Edit.TEXT, // Edit text tool only
                Tools.Edit.IMAGE, // Edit image tool only
                Tools.Comment.HIGHLIGHT, // Comment highlight tool
                Tools.Page.ORGANIZE, // Page organize tool
              ],
            },
          },
        },
      },
    };

    You can also use string keys directly:

    tools: ['edit.text', 'edit.image', 'comment.highlight', 'page.organize'];

    If activeTab is not set in the header config, the first tab in tabs.list automatically becomes active:

    const layoutConfig: ILayoutConfig = {
      header: {
        // activeTab not set — 'comment' tab will be active (first in list)
        tabs: {
          list: {
            comment: {},
            edit: {},
          },
        },
      },
    };

    Configure how tools are displayed:

    import { ToolsDisplayMode, ToolsHorizontalAlignment, LabelAlignment } from '@avanquest/pdf-web-viewer';

    const layoutConfig: ILayoutConfig = {
      header: {
        tabs: {
          displayMode: ToolsDisplayMode.ICON_AND_LABEL, // Show icons and labels
          horizontalAlignment: ToolsHorizontalAlignment.LEFT,
          contentAlignment: LabelAlignment.COLUMN,
        },
      },
    };

    Display modes:

    • ToolsDisplayMode.ICON_ONLY - Show only icons
    • ToolsDisplayMode.LABEL_ONLY - Show only text labels
    • ToolsDisplayMode.ICON_AND_LABEL - Show both icons and labels

    For the compact/embedded layout use layoutConfig.variant: LayoutVariant.EMBEDDED instead.

    Alignment options:

    • ToolsHorizontalAlignment.CENTER — Center tools (default)
    • ToolsHorizontalAlignment.LEFT — Left-align tools
    • ToolsHorizontalAlignment.RIGHT — Right-align tools

    Content alignment:

    • LabelAlignment.ROW — Horizontal layout (default; the reader's Settings choice applies when unset)
    • LabelAlignment.COLUMN — Vertical layout

    Configure top bar controls using opt-out:

    const layoutConfig: ILayoutConfig = {
      topBar: {
        controls: {
          mainMenu: {
            enabled: true, // Show the main menu button
            options: {
              saveOptimized: false, // Hide "Save Optimized"
              saveAs: false, // Hide "Save as"
            },
          },
          search: false, // Hide search
          viewOptions: { enabled: false }, // Hide view options
          zoom: true, // Show zoom (default)
          snapshot: false, // Hide snapshot
          print: false, // Hide print
        },
      },
    };

    const layoutConfig: ILayoutConfig = {
      sidebar: {
        content: {
          preview: false, // Hide preview
          bookmarks: false, // Hide bookmarks
          layers: false, // Hide layers
        },
      },
    };

    const layoutConfig: ILayoutConfig = {
      navigationBar: {
        controls: {
          pageNavigationButtons: false, // Hide previous/next page buttons
          pageNumberInput: false, // Hide the page number input
          viewSelectButton: false, // Hide the view mode selector
          downloadButton: false, // Hide the download button
        },
      },
    };

    Some features (like Text Editing, Cropping, Forms, etc.) open a secondary, context-sensitive toolbar (often below the main header). You can explicitly hide these tool areas so they never appear, even if the feature itself is active.

    import { ToolArea } from '@avanquest/pdf-web-viewer';

    const layoutConfig: ILayoutConfig = {
      toolAreas: {
        // Disable text editing toolbar using the enum (recommended for autocomplete)
        [ToolArea.TEXT_EDITING]: false,
        // Disable crop toolbar using string key
        crop: false,
      },
    };

    Available ToolArea enum values:

    • TEXT_EDITING ('textEditing')
    • EDIT_IMAGE ('editImage')
    • CROP ('crop')
    • CLIP ('clip')
    • PRINT_SELECTION ('printSelection')
    • FILL_SIGN ('fillSign')
    • ANNOT ('annot')
    • MULTI_SELECT ('multiSelect')
    • E_SIGN_SELECT ('eSignSelect')
    • REDACT ('redact')

    You can hide the built-in document tab bar and render your own custom tabs by setting tabBar.enabled = false and utilizing the headless documentTabs API exposed on the PdfEditor result.

    const editor = await PdfEditor({
      license: 'YOUR_LICENSE_KEY',
      container: document.getElementById('pdf-container'),
      layoutConfig: {
        tabBar: {
          enabled: false, // Hides the built-in tab bar
        },
      },
    });

    // Use the headless API to build your custom UI
    editor.ui.documentTabs.tabs$.subscribe((tabs) => {
      // Render your tabs
      // tab.id, tab.name, tab.isActive, tab.isSideBySide, tab.hasUnsavedChanges
    });

    // Exposes all necessary actions:
    // editor.ui.documentTabs.switchToTab(tabId)
    // editor.ui.documentTabs.closeTab(tabId)
    // editor.ui.documentTabs.reverseViews()

    Show specific tabs with curated tools and configure display:

    import { PdfEditor, ILayoutConfig, HeaderTab, ToolsDisplayMode, ToolsHorizontalAlignment, LabelAlignment } from '@avanquest/pdf-web-viewer';

    const editor = await PdfEditor({
      license: 'YOUR_LICENSE_KEY',
      container: document.getElementById('pdf-container'),
      layoutConfig: {
        // Header — opt-in: only listed tabs appear, in this order
        header: {
          activeTab: HeaderTab.EDIT,
          tabs: {
            displayMode: ToolsDisplayMode.ICON_AND_LABEL,
            horizontalAlignment: ToolsHorizontalAlignment.LEFT,
            contentAlignment: LabelAlignment.ROW,
            list: {
              comment: {}, // Comment first, all tools
              edit: {}, // Edit second, all tools
              fillAndSign: {}, // Fill & Sign third, all tools
              page: {}, // Page fourth, all tools
            },
          },
        },
        // Top bar — opt-out: hide specific controls
        topBar: {
          controls: {
            mainMenu: {
              options: {
                saveOptimized: false,
              },
            },
          },
        },
        // Sidebar — opt-out: hide bookmarks
        sidebar: {
          content: {
            bookmarks: false,
          },
        },
      },
    });

    Only edit tab with text and image tools:

    const editor = await PdfEditor({
      license: 'YOUR_LICENSE_KEY',
      container: document.getElementById('pdf-container'),
      layoutConfig: {
        header: {
          activeTab: HeaderTab.EDIT,
          tabs: {
            list: {
              edit: {
                tools: [Tools.Edit.TEXT, Tools.Edit.IMAGE],
              },
              // Only edit tab is visible, with only text and image tools
            },
          },
        },
        topBar: {
          controls: {
            mainMenu: { enabled: false },
            search: false,
            viewOptions: { enabled: false },
            zoom: false,
            snapshot: false,
            print: false,
          },
        },
        sidebar: {
          content: {
            bookmarks: false,
          },
        },
      },
    });

    Only show comment and fill & sign tabs:

    const editor = await PdfEditor({
      license: 'YOUR_LICENSE_KEY',
      container: document.getElementById('pdf-container'),
      layoutConfig: {
        header: {
          activeTab: HeaderTab.COMMENT,
          tabs: {
            list: {
              comment: {}, // All comment tools
              fillAndSign: {}, // All fill & sign tools
            },
          },
        },
      },
    });

    Switch between different layout modes at runtime using setLayout():

    const viewer = editor.ui.pdfWebElement;

    // Switch to editing mode — only edit and page tabs
    function enableEditMode() {
      viewer.setLayout({
        header: {
          activeTab: HeaderTab.EDIT,
          tabs: {
            list: {
              edit: {},
              page: {},
            },
          },
        },
      });
    }

    // Switch to review mode — only comment and fillAndSign tabs
    function enableReviewMode() {
      viewer.setLayout({
        header: {
          activeTab: HeaderTab.COMMENT,
          tabs: {
            list: {
              comment: {},
              fillAndSign: {},
            },
          },
        },
      });
    }

    // Restore all tabs (omit list to show everything)
    function showAllTabs() {
      viewer.setLayout({
        header: {
          tabs: {},
        },
      });
    }

    Settings

    Member Visibility

    On This Page

    Layout Configuration