PDF Web Viewer
    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: edit, comment, fillAndSign, forms, translate, page, secure, 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:

    • Edit: edit.text, edit.image, edit.link, edit.formatPainter, edit.ruler, edit.grid
    • Comment: comment.draw, comment.highlight, comment.strikethrough, comment.underline, comment.shapes, comment.measurement, comment.stickerNote, comment.whiteout, comment.stamp
    • Fill & Sign: fillAndSign.text, fillAndSign.checkmark, fillAndSign.crossmark, fillAndSign.dot, fillAndSign.line, fillAndSign.signerName, fillAndSign.signingDate, fillAndSign.signature, fillAndSign.initials
    • Forms: forms.textField, forms.comboBox, forms.listBox, forms.checkBox, forms.radioBox, forms.highlightFields
    • Translate: translate.allPages, translate.useORC
    • Page: page.organize, page.crop
    • Secure: secure.securityPermissions, secure.sanitize, secure.removeMetadata
    • 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 { ApplicationDisplayMode, ToolsHorizontalAlignment, LabelAlignment } from '@avanquest/pdf-web-viewer';

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

    Display modes:

    • ApplicationDisplayMode.ICON_ONLY - Show only icons
    • ApplicationDisplayMode.LABEL_ONLY - Show only text labels
    • ApplicationDisplayMode.ICON_AND_LABEL - Show both icons and labels
    • ApplicationDisplayMode.EMBEDDED - Embedded mode

    Alignment options:

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

    Content alignment:

    • LabelAlignment.ROW — Horizontal layout
    • LabelAlignment.COLUMN — Vertical layout (default)

    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"
              openFromUrl: false, // Hide "Open from URL"
            },
          },
          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 = {
      sidebar: {
        navigation: {
          pageNavigation: { enabled: false },
          thumbnails: false,
          attachments: false,
          search: false,
        },
      },
    };

    Show specific tabs with curated tools and configure display:

    import { PdfEditor, ILayoutConfig, HeaderTab, ApplicationDisplayMode, 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: ApplicationDisplayMode.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,
                openFromUrl: 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