> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/web/get-started/samples/showcase-demo-modular-ui-customization.md).

# Modular UI Customization Showcase Demo Code Sample

Customize the viewer UI through modular components defined in JSON.

{% hint style="info" %}
**Requirements**

*These packages are required to use these features in production. Trial keys have unlimited access to all features*

<a href="/web/get-started/readme.md" class="button primary">Web SDK</a><a href="https://showcase.apryse.com/modular-ui-customization" class="button primary">Live demo</a>
{% endhint %}

Easily customize the viewer UI through modular components defined in JSON. Each component can be specified independently, enabling dynamic and granular control over the interface layout and behavior.

This demo allows you to:

* Select from sample JSON files to switch the UI components:
  * Default UI
  * Alternate UI
  * Vertical Headers
  * No Ribbons
  * Ribbons with Icons
* Review modular components and their structure in JSON data files

**Implementation steps** To add Modular UI Customization capability with WebViewer:

Step 1: [Get started with WebViewer](/web/get-started/readme.md) in your preferred web stack Step 2: Add the ES6 JavaScript sample code provided in this guide

Once you generate your license key, it will automatically be included in your sample code below.

{% @apryse-license-key/apryse-license-key platform="WEB\_VIEWER" variant="compact" %}

{% tabs %}
{% tab title="index.js" %}

<pre class="language-js" data-line-numbers><code class="lang-js">
// ES6 Compliant Syntax
// GitHub Copilot - October 7, 2025
// File: modular-ui-customization/index.js

import WebViewer from '@pdftron/webviewer';
import { saveAs } from 'file-saver';

const licenseKey = '<code class="expression">visitor.claims.wvKey || "YOUR_WEBVIEWER_LICENSE_KEY"</code>';

const element = document.getElementById('viewer');
const onLoad = async (instance) => {
  instance.UI.enableFeatureFlag(instance.UI.FeatureFlags.CUSTOMIZABLE_UI);

  // Load default configuration
  const defaultConfig = await loadConfiguration(0);
  if (defaultConfig) {
    configurationOptions[0].cachedConfig = defaultConfig;
    instance.UI.importModularComponents(defaultConfig);
  }
};

let theInstance = null;
// Initialize WebViewer and load default document
WebViewer(
  {
    path: '/lib',
    licenseKey: licenseKey, 
    initialDoc: 'https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf',
    enableFilePicker: true, // Enable file picker to open files. In WebViewer -> menu icon -> Open File
  },
  element
).then((instance) => {
  theInstance = instance;
  onLoad(instance);
});

// Configuration metadata with file mapping
const configurationOptions = [
  {
    title: 'Default UI', configFile: 'default.json', cachedConfig: null,
    description: 'The default UI features our out-of-the-box ribbon interface created using Modular Components.',
  },
  {
    title: 'Alternate UI', configFile: 'custom-left.json', cachedConfig: null,
    description:  'This alternate UI replaces the left tab panel with individual toggle buttons to open standalone panels.\n' +
      'A vertical header is added to the left side of the UI to house the panel toggles and the select/pan tools.',
  },
  {
    title: 'Vertical Headers', configFile: 'vertical.json', cachedConfig: null,
    description:  'This configuration features vertical headers on the left and right sides of the UI.\n' +
      'The left header contains the icon ribbons tools and the right header contains panel toggles as well as page navigation controls.',
  },
  {
    title: 'No Ribbons', configFile: 'no-ribbons.json', cachedConfig: null,
    description:  'This configuration uses tools without ribbons, instead, the tools are placed in the top header.',
  },
  {
    title: 'Ribbons with Icons', configFile: 'ribbons-with-icons.json', cachedConfig: null,
    description:  'This configuration uses tools with ribbons and icons, as well as a right vertical header with panel toggles as well as page navigation controls.',
  },
  {
    title: 'Custom Configuration', configFile: '', cachedConfig: null, description: null,
  },
];

const customConfigIndex = configurationOptions.findIndex(config => config.title === 'Custom Configuration');

// Function to load configuration file
const loadConfiguration = async (configIndex) => {
  const configFile = configurationOptions[configIndex].configFile;
  if (configFile === '') return null;

  try {
    const response = await fetch(`/showcase-demos/modular-ui-customization/modular-ui/${configFile}`);
    if (!response.ok) {
      throw new Error(`Failed to load configuration: ${response.statusText}`);
    }
    return await response.json();
  } catch (error) {
    console.error('Error loading configuration:', error);
    return null;
  }
};

// UI section

// Create a container for all controls (labels, radio buttons and button)
const controlsContainer = document.createElement('div');

// Create a radio group for configurations
const configGroup = document.createElement('div');

configurationOptions.forEach((config, index) => {
  const label = document.createElement('label');
  label.textContent = config.title;
  label.htmlFor = config.title;
  label.className = 'radio-label-class';

  const radio = document.createElement('input');
  radio.type = 'radio';
  radio.name = 'config';
  radio.id = config.title;
  radio.value = config.configFile;
  radio.checked = (index === 0); // Check the first option by default
  radio.disabled = (index === customConfigIndex);
  configGroup.appendChild(radio);
  configGroup.appendChild(label);
  radio.onchange = async () => {
    descriptionElement.textContent = configurationOptions[index].description || '';
    // If we already loaded this configuration, use the cached version
    if (configurationOptions[index].cachedConfig) {
      await theInstance.UI.importModularComponents(configurationOptions[index].cachedConfig);
      return;
    }
    // Otherwise, load it from the file
    const config = await loadConfiguration(index);
    if (config) {
      configurationOptions[index].cachedConfig = config;
      await theInstance.UI.importModularComponents(config);
    }
  };
});

controlsContainer.appendChild(configGroup);
// Create a description area
const descriptionElement = document.createElement('div');
descriptionElement.style.marginTop = '10px';
descriptionElement.style.whiteSpace = 'pre-wrap';
descriptionElement.textContent = configurationOptions[0].description;
controlsContainer.appendChild(descriptionElement);

// Create a hidden file input for uploading configuration files
const fileUpload = document.createElement('input');
fileUpload.style.display = 'none';
fileUpload.type = 'file';
fileUpload.accept = '.json';
fileUpload.onchange = (event) => {
  const file = event.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = async (e) => {
      try {
        const jsonContent = JSON.parse(e.target.result);
        await theInstance.UI.importModularComponents(jsonContent);
        descriptionElement.textContent = 'Custom configuration loaded from file: ' + file.name;
        configurationOptions[customConfigIndex].cachedConfig = jsonContent;
        configurationOptions[customConfigIndex].description = 'Cached custom configuration from file: ' + file.name;
        const customRadio = document.getElementById('Custom Configuration');
        customRadio.disabled = false;
        customRadio.checked = true;
      } catch (error) {
          console.error('Invalid JSON file:', error);
          descriptionElement.textContent = 'Error Loading Configuration, See Console For Details';
      }
    };
    reader.readAsText(file);
  }
};

const downloadJSON = (data) => {
  // Convert JSON data to string
  const jsonString = JSON.stringify(data, null, 2); // Pretty print with 2 spaces indentation

  // Create a Blob from the JSON string
  const blob = new Blob([jsonString], { type: 'application/json' });

  // Use FileSaver's saveAs function to trigger the download
  saveAs(blob, 'modular_components.json');
};

// Create a button to load the selected configuration
const buttonLoad = document.createElement('button');
buttonLoad.textContent = 'Load UI Configuration';
buttonLoad.onclick = async () => {
  fileUpload.click();
}
controlsContainer.appendChild(buttonLoad);
// Create a button to download the current configuration
const buttonDownload = document.createElement('button');
buttonDownload.textContent = 'Download UI Configuration';
buttonDownload.onclick = async () => {
    try {
      const data = theInstance.UI.exportModularComponents();
      downloadJSON(data);
    } catch (error) {
      console.error('Error exporting modular components:', error);
    }
}
controlsContainer.appendChild(buttonDownload);
// Apply classes for styling using CSS
buttonLoad.className = 'btn-style';
buttonDownload.className = 'btn-style';
controlsContainer.className = 'control-container';
// Append elements to the controls container
element.parentElement.insertBefore(controlsContainer, element);

</code></pre>

{% endtab %}

{% tab title="index.css" %}
{% code title="index.css" lineNumbers="true" %}

```css


/* Radio Label Styling */
.radio-label-class {
    margin-left: 5px;
    margin-right: 15px;
    font-weight: bold;
    color: #333;
    font-size: 14px;
    display: inline-block;
}

/* Button Styles */
.btn-style {
    margin: 5px;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    color: white;
    /* background-color: #ebedf0; */
    background-color: #0056b3;
}

.btn-style:hover:enabled {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.btn-style:active:enabled {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.btn-style:disabled {
    background-color: #a0a0a0;
    cursor: not-allowed;
    box-shadow: none;
}

/* Controls Container */
.control-container {
    align-items: center;
    gap: 1px;
    margin: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #e0e0e0;
    background-color: rgba(112, 198, 255, 0.2   /* Light blue background for contrast */);
}

/* Responsive Design */
@media (max-width: 768px) {
    .btn-style {
        margin: 5px;
        padding: 8px 12px;
        font-size: 16px;
    }
    
    .control-container {
        align-items: center;
    }
}

```

{% endcode %}
{% endtab %}

{% tab title="default.json" %}
{% code title="default.json" lineNumbers="true" %}

```json
{
  "modularComponents": {
    "comparePanelToggle": {
        "dataElement": "comparePanelToggle",
        "title": "action.comparePages",
        "label": "action.comparePages",
        "type": "presetButton",
        "buttonType": "compareButton",
        "disabled": true
    },
    "filePickerButton": {
        "dataElement": "filePickerButton",
        "title": "action.openFile",
        "label": "action.openFile",
        "type": "presetButton",
        "buttonType": "filePickerButton"
    },
    "downloadButton": {
        "dataElement": "downloadButton",
        "title": "action.download",
        "label": "action.download",
        "type": "presetButton",
        "buttonType": "downloadButton"
    },
    "saveAsButton": {
        "dataElement": "saveAsButton",
        "title": "saveModal.saveAs",
        "label": "saveModal.saveAs",
        "type": "presetButton",
        "buttonType": "saveAsButton"
    },
    "printButton": {
        "dataElement": "printButton",
        "title": "action.print",
        "label": "action.print",
        "type": "presetButton",
        "buttonType": "printButton"
    },
    "createPortfolioButton": {
        "dataElement": "createPortfolioButton",
        "title": "portfolio.createPDFPortfolio",
        "label": "portfolio.createPDFPortfolio",
        "type": "presetButton",
        "buttonType": "createPortfolioButton",
        "disabled": false
    },
    "settingsButton": {
        "dataElement": "settingsButton",
        "title": "option.settings.settings",
        "label": "option.settings.settings",
        "type": "presetButton",
        "buttonType": "settingsButton"
    },
    "divider-0.1": {
        "dataElement": "divider-0.1",
        "type": "divider"
    },
    "leftPanelButton": {
        "dataElement": "leftPanelButton",
        "title": "component.leftPanel",
        "type": "toggleButton",
        "img": "icon-header-sidebar-line",
        "toggleElement": "tabPanel"
    },
    "view-controls": {
        "dataElement": "view-controls",
        "type": "viewControls",
        "title": "component.viewControls",
        "icon": "icon-header-page-manipulation-line"
    },
    "divider-0.3": {
        "dataElement": "divider-0.3",
        "type": "divider"
    },
    "zoom-container": {
        "dataElement": "zoom-container",
        "type": "zoom"
    },
    "divider-0.2": {
        "dataElement": "divider-0.2",
        "type": "divider"
    },
    "panToolButton": {
        "dataElement": "panToolButton",
        "type": "toolButton",
        "toolName": "Pan"
    },
    "annotationEditToolButton": {
        "dataElement": "annotationEditToolButton",
        "type": "toolButton",
        "toolName": "AnnotationEdit"
    },
    "menuButton": {
        "dataElement": "menuButton",
        "img": "ic-hamburger-menu",
        "title": "component.menuOverlay",
        "toggleElement": "MainMenuFlyout",
        "type": "toggleButton"
    },
    "groupedLeftHeaderButtons": {
        "dataElement": "groupedLeftHeaderButtons",
        "items": [
          "menuButton",
          "divider-0.1",
          "leftPanelButton",
          "view-controls",
          "divider-0.3",
          "zoom-container",
          "divider-0.2",
          "panToolButton",
          "annotationEditToolButton"
        ],
        "type": "groupedItems",
        "grow": 1,
        "gap": 12,
        "alwaysVisible": true
    },
    "toolbarGroup-View": {
        "dataElement": "toolbarGroup-View",
        "title": "View",
        "type": "ribbonItem",
        "label": "View",
        "groupedItems": [],
        "toolbarGroup": "toolbarGroup-View"
    },
    "toolbarGroup-Annotate": {
        "dataElement": "toolbarGroup-Annotate",
        "title": "Annotate",
        "type": "ribbonItem",
        "label": "Annotate",
        "groupedItems": [
          "annotateGroupedItems"
        ],
        "toolbarGroup": "toolbarGroup-Annotate"
    },
    "toolbarGroup-Shapes": {
        "dataElement": "toolbarGroup-Shapes",
        "title": "Shapes",
        "type": "ribbonItem",
        "label": "Shapes",
        "groupedItems": [
          "shapesGroupedItems"
        ],
        "toolbarGroup": "toolbarGroup-Shapes"
    },
    "toolbarGroup-Insert": {
        "dataElement": "toolbarGroup-Insert",
        "title": "Insert",
        "type": "ribbonItem",
        "label": "Insert",
        "groupedItems": [
          "insertGroupedItems"
        ],
        "toolbarGroup": "toolbarGroup-Insert"
    },
    "toolbarGroup-Measure": {
        "dataElement": "toolbarGroup-Measure",
        "title": "Measure",
        "type": "ribbonItem",
        "label": "Measure",
        "groupedItems": [
          "measureGroupedItems"
        ],
        "toolbarGroup": "toolbarGroup-Measure"
    },
    "toolbarGroup-Redact": {
        "dataElement": "toolbarGroup-Redact",
        "title": "Redact",
        "type": "ribbonItem",
        "label": "Redact",
        "groupedItems": [
          "redactionGroupedItems"
        ],
        "toolbarGroup": "toolbarGroup-Redact"
    },
    "toolbarGroup-Edit": {
        "dataElement": "toolbarGroup-Edit",
        "title": "Edit",
        "type": "ribbonItem",
        "label": "Edit",
        "groupedItems": [
          "editGroupedItems"
        ],
        "toolbarGroup": "toolbarGroup-Edit"
    },
    "toolbarGroup-EditText": {
        "dataElement": "toolbarGroup-EditText",
        "title": "Content Edit",
        "type": "ribbonItem",
        "label": "Content Edit",
        "groupedItems": [
          "contentEditGroupedItems"
        ],
        "toolbarGroup": "toolbarGroup-EditText"
    },
    "toolbarGroup-FillAndSign": {
        "dataElement": "toolbarGroup-FillAndSign",
        "title": "Fill and Sign",
        "type": "ribbonItem",
        "label": "Fill and Sign",
        "groupedItems": [
          "fillAndSignGroupedItems"
        ],
        "toolbarGroup": "toolbarGroup-FillAndSign"
    },
    "toolbarGroup-Forms": {
        "dataElement": "toolbarGroup-Forms",
        "title": "Forms",
        "type": "ribbonItem",
        "label": "Forms",
        "groupedItems": [
          "formsGroupedItems"
        ],
        "toolbarGroup": "toolbarGroup-Forms"
    },
    "default-ribbon-group": {
        "dataElement": "default-ribbon-group",
        "items": [
          "toolbarGroup-View",
          "toolbarGroup-Annotate",
          "toolbarGroup-Shapes",
          "toolbarGroup-Insert",
          "toolbarGroup-Measure",
          "toolbarGroup-Redact",
          "toolbarGroup-Edit",
          "toolbarGroup-EditText",
          "toolbarGroup-FillAndSign",
          "toolbarGroup-Forms"
        ],
        "type": "ribbonGroup",
        "justifyContent": "start",
        "grow": 2,
        "gap": 12,
        "alwaysVisible": false
    },
    "searchPanelToggle": {
        "dataElement": "searchPanelToggle",
        "title": "component.searchPanel",
        "type": "toggleButton",
        "img": "icon-header-search",
        "toggleElement": "searchPanel"
    },
    "notesPanelToggle": {
        "dataElement": "notesPanelToggle",
        "title": "component.notesPanel",
        "type": "toggleButton",
        "img": "icon-header-chat-line",
        "toggleElement": "notesPanel"
    },
    "highlightToolButton": {
        "dataElement": "highlightToolButton",
        "type": "toolButton",
        "toolName": "AnnotationCreateTextHighlight"
    },
    "underlineToolButton": {
        "dataElement": "underlineToolButton",
        "type": "toolButton",
        "toolName": "AnnotationCreateTextUnderline"
    },
    "strikeoutToolButton": {
        "dataElement": "strikeoutToolButton",
        "type": "toolButton",
        "toolName": "AnnotationCreateTextStrikeout"
    },
    "squigglyToolButton": {
        "dataElement": "squigglyToolButton",
        "type": "toolButton",
        "toolName": "AnnotationCreateTextSquiggly"
    },
    "freeTextToolButton": {
        "dataElement": "freeTextToolButton",
        "type": "toolButton",
        "toolName": "AnnotationCreateFreeText"
    },
    "markInsertTextToolButton": {
        "dataElement": "markInsertTextToolButton",
        "type": "toolButton",
        "toolName": "AnnotationCreateMarkInsertText"
    },
    "markReplaceTextToolButton": {
        "dataElement": "markReplaceTextToolButton",
        "type": "toolButton",
        "toolName": "AnnotationCreateMarkReplaceText"
    },
    "freeHandToolButton": {
        "dataElement": "freeHandToolButton",
        "type": "toolButton",
        "toolName": "AnnotationCreateFreeHand"
    },
    "freeHandHighlightToolButton": {
        "dataElement": "freeHandHighlightToolButton",
        "type": "toolButton",
        "toolName": "AnnotationCreateFreeHandHighlight"
    },
    "stickyToolButton": {
        "dataElement": "stickyToolButton",
        "type": "toolButton",
        "toolName": "AnnotationCreateSticky"
    },
    "calloutToolButton": {
        "dataElement": "calloutToolButton",
        "type": "toolButton",
        "toolName": "AnnotationCreateCallout"
    },
    "divider-0.4": {
        "dataElement": "divider-0.4",
        "type": "divider"
    },
    "stylePanelToggle": {
        "dataElement": "stylePanelToggle",
        "title": "action.style",
        "type": "toggleButton",
        "img": "icon-style-panel-toggle",
        "toggleElement": "stylePanel"
    },
    "indexPanelListToggle": {
        "dataElement": "indexPanelListToggle",
        "title": "component.indexPanel",
        "type": "toggleButton",
        "img": "icon-index-panel-list",
        "toggleElement": "indexPanel"
    },
    "divider-0.5": {
        "dataElement": "divider-0.5",
        "type": "divider"
    },
    "undoButton": {
        "dataElement": "undoButton",
        "type": "presetButton",
        "buttonType": "undoButton"
    },
    "redoButton": {
        "dataElement": "redoButton",
        "type": "presetButton",
        "buttonType": "redoButton"
    },
    "toggleAccessibilityModeButton": {
        "dataElement": "toggleAccessibilityModePresetButton",
        "type": "presetButton",
        "buttonType": "toggleAccessibilityModeButton"
    },
    "eraserToolButton": {
        "dataElement": "eraserToolButton",
        "type": "toolButton",
        "toolName": "AnnotationEraserTool"
    },
    "defaultAnnotationUtilities": {
        "dataElement": "defaultAnnotationUtilities",
        "items": [
          "divider-0.5",
          "undoButton",
          "redoButton",
          "eraserToolButton"
        ],
        "type": "groupedItems",
        "grow": 0,
        "gap": 12,
        "alwaysVisible": false
    },
    "annotateToolsGroupedItems": {
        "dataElement": "annotateToolsGroupedItems",
        "items": [
          "highlightToolButton",
          "underlineToolButton",
          "strikeoutToolButton",
          "squigglyToolButton",
          "freeHandToolButton",
          "freeHandHighlightToolButton",
          "freeTextToolButton",
          "markInsertTextToolButton",
          "markReplaceTextToolButton",
          "stickyToolButton",
          "calloutToolButton"
        ],
        "type": "groupedItems",
        "justifyContent": "center",
        "grow": 0,
        "gap": 12,
        "alwaysVisible": false
    },
    "annotateGroupedItems": {
        "dataElement": "annotateGroupedItems",
        "items": [
          "annotateToolsGroupedItems",
          "divider-0.4",
          "stylePanelToggle",
          "defaultAnnotationUtilities"
        ],
        "type": "groupedItems",
        "justifyContent": "center",
        "grow": 0,
        "gap": 12,
        "alwaysVisible": false
    },
    "rectangleToolButton": {
        "dataElement": "rectangleToolButton",
        "type": "toolButton",
        "toolName": "AnnotationCreateRectangle"
    },
    "ellipseToolButton": {
        "dataElement": "ellipseToolButton",
        "type": "toolButton",
        "toolName": "AnnotationCreateEllipse"
    },
    "arcToolButton": {
        "dataElement": "arcToolButton",
        "type": "toolButton",
        "toolName": "AnnotationCreateArc"
    },
    "polygonToolButton": {
        "dataElement": "polygonToolButton",
        "type": "toolButton",
        "toolName": "AnnotationCreatePolygon"
    },
    "cloudToolButton": {
        "dataElement": "cloudToolButton",
        "type": "toolButton",
        "toolName": "AnnotationCreatePolygonCloud"
    },
    "lineToolButton": {
        "dataElement": "lineToolButton",
        "type": "toolButton",
        "toolName": "AnnotationCreateLine"
    },
    "polylineToolButton": {
        "dataElement": "polylineToolButton",
        "type": "toolButton",
        "toolName": "AnnotationCreatePolyline"
    },
    "arrowToolButton": {
        "dataElement": "arrowToolButton",
        "type": "toolButton",
        "toolName": "AnnotationCreateArrow"
    },
    "shapesToolsGroupedItems": {
        "dataElement": "shapesToolsGroupedItems",
        "items": [
          "rectangleToolButton",
          "ellipseToolButton",
          "arcToolButton",
          "polygonToolButton",
          "cloudToolButton",
          "lineToolButton",
          "polylineToolButton",
          "arrowToolButton"
        ],
        "type": "groupedItems",
        "grow": 0,
        "gap": 12,
        "alwaysVisible": false
    },
    "shapesGroupedItems": {
        "dataElement": "shapesGroupedItems",
        "items": [
          "shapesToolsGroupedItems",
          "divider-0.4",
          "stylePanelToggle",
          "defaultAnnotationUtilities"
        ],
        "type": "groupedItems",
        "grow": 0,
        "gap": 12,
        "alwaysVisible": false
    },
    "rubberStampToolButton": {
        "dataElement": "rubberStampToolButton",
        "type": "toolButton",
        "toolName": "AnnotationCreateRubberStamp"
    },
    "signatureCreateToolButton": {
        "dataElement": "signatureCreateToolButton",
        "type": "toolButton",
        "toolName": "AnnotationCreateSignature"
    },
    "fileAttachmentButton": {
        "dataElement": "fileAttachmentButton",
        "type": "toolButton",
        "toolName": "AnnotationCreateFileAttachment"
    },
    "stampToolButton": {
        "dataElement": "stampToolButton",
        "type": "toolButton",
        "toolName": "AnnotationCreateStamp"
    },
    "insertToolsGroupedItems": {
        "dataElement": "insertToolsGroupedItems",
        "items": [
          "rubberStampToolButton",
          "signatureCreateToolButton",
          "fileAttachmentButton",
          "stampToolButton"
        ],
        "type": "groupedItems",
        "grow": 0,
        "gap": 12,
        "alwaysVisible": false
    },
    "insertGroupedItems": {
        "dataElement": "insertGroupedItems",
        "items": [
          "insertToolsGroupedItems",
          "divider-0.4",
          "stylePanelToggle",
          "defaultAnnotationUtilities"
        ],
        "type": "groupedItems",
        "grow": 0,
        "gap": 12,
        "alwaysVisible": false
    },
    "redactionToolButton": {
        "dataElement": "redactionToolButton",
        "type": "toolButton",
        "toolName": "AnnotationCreateRedaction"
    },
    "pageRedactionToggleButton": {
        "dataElement": "pageRedactionToggleButton",
        "title": "action.redactPages",
        "type": "toggleButton",
        "img": "icon-tool-page-redact",
        "toggleElement": "pageRedactionModal"
    },
    "redactionPanelToggle": {
        "dataElement": "redactionPanelToggle",
        "type": "toggleButton",
        "img": "icon-redact-panel",
        "toggleElement": "redactionPanel",
        "title": "component.redactionPanel"
    },
    "redactionGroupedItems": {
        "dataElement": "redactionGroupedItems",
        "items": [
          "redactionToolButton",
          "pageRedactionToggleButton",
          "redactionPanelToggle",
          "divider-0.4",
          "stylePanelToggle",
          "defaultAnnotationUtilities"
        ],
        "type": "groupedItems",
        "grow": 0,
        "gap": 12,
        "alwaysVisible": false
    },
    "distanceMeasurementToolButton": {
        "dataElement": "distanceMeasurementToolButton",
        "type": "toolButton",
        "toolName": "AnnotationCreateDistanceMeasurement"
    },
    "arcMeasurementToolButton": {
        "dataElement": "arcMeasurementToolButton",
        "type": "toolButton",
        "toolName": "AnnotationCreateArcMeasurement"
    },
    "perimeterMeasurementToolButton": {
        "dataElement": "perimeterMeasurementToolButton",
        "type": "toolButton",
        "toolName": "AnnotationCreatePerimeterMeasurement"
    },
    "areaMeasurementToolButton": {
        "dataElement": "areaMeasurementToolButton",
        "type": "toolButton",
        "toolName": "AnnotationCreateAreaMeasurement"
    },
    "ellipseMeasurementToolButton": {
        "dataElement": "ellipseMeasurementToolButton",
        "type": "toolButton",
        "toolName": "AnnotationCreateEllipseMeasurement"
    },
    "rectangularAreaMeasurementToolButton": {
        "dataElement": "rectangularAreaMeasurementToolButton",
        "type": "toolButton",
        "toolName": "AnnotationCreateRectangularAreaMeasurement"
    },
    "countMeasurementToolButton": {
        "dataElement": "countMeasurementToolButton",
        "type": "toolButton",
        "toolName": "AnnotationCreateCountMeasurement"
    },
    "measureGroupedItems": {
        "dataElement": "measureGroupedItems",
        "items": [
          "distanceMeasurementToolButton",
          "arcMeasurementToolButton",
          "perimeterMeasurementToolButton",
          "areaMeasurementToolButton",
          "ellipseMeasurementToolButton",
          "rectangularAreaMeasurementToolButton",
          "countMeasurementToolButton",
          "divider-0.4",
          "stylePanelToggle",
          "defaultAnnotationUtilities"
        ],
        "type": "groupedItems",
        "grow": 0,
        "gap": 12,
        "alwaysVisible": false
    },
    "cropToolButton": {
        "dataElement": "cropToolButton",
        "type": "toolButton",
        "toolName": "CropPage"
    },
    "snippingToolButton": {
        "dataElement": "snippingToolButton",
        "type": "toolButton",
        "toolName": "SnippingTool"
    },
    "editGroupedItems": {
        "dataElement": "editGroupedItems",
        "items": [
          "cropToolButton",
          "snippingToolButton"
        ],
        "type": "groupedItems",
        "grow": 0,
        "gap": 12,
        "alwaysVisible": false
    },
    "addParagraphToolGroupButton": {
        "dataElement": "addParagraphToolGroupButton",
        "type": "toolButton",
        "toolName": "AddParagraphTool"
    },
    "addImageContentToolGroupButton": {
        "dataElement": "addImageContentToolGroupButton",
        "type": "toolButton",
        "toolName": "AddImageContentTool"
    },
    "divider-0.6": {
        "dataElement": "divider-0.6",
        "type": "divider"
    },
    "contentEditButton": {
        "dataElement": "contentEditButton",
        "type": "presetButton",
        "buttonType": "contentEditButton"
    },
    "contentEditGroupedItems": {
        "dataElement": "contentEditGroupedItems",
        "items": [
          "addParagraphToolGroupButton",
          "addImageContentToolGroupButton",
          "divider-0.6",
          "contentEditButton"
        ],
        "type": "groupedItems",
        "grow": 0,
        "gap": 12,
        "alwaysVisible": false
    },
    "crossStampToolButton": {
        "dataElement": "crossStampToolButton",
        "type": "toolButton",
        "toolName": "AnnotationCreateCrossStamp"
    },
    "checkStampToolButton": {
        "dataElement": "checkStampToolButton",
        "type": "toolButton",
        "toolName": "AnnotationCreateCheckStamp"
    },
    "dotStampToolButton": {
        "dataElement": "dotStampToolButton",
        "type": "toolButton",
        "toolName": "AnnotationCreateDotStamp"
    },
    "calendarToolButton": {
        "dataElement": "calendarToolButton",
        "type": "toolButton",
        "toolName": "AnnotationCreateDateFreeText"
    },
    "fillAndSignGroupedItems": {
        "dataElement": "fillAndSignGroupedItems",
        "items": [
          "signatureCreateToolButton",
          "freeTextToolButton",
          "crossStampToolButton",
          "checkStampToolButton",
          "dotStampToolButton",
          "rubberStampToolButton",
          "calendarToolButton",
          "divider-0.4",
          "stylePanelToggle",
          "defaultAnnotationUtilities"
        ],
        "type": "groupedItems",
        "grow": 0,
        "gap": 12,
        "alwaysVisible": false
    },
    "signatureFieldButton": {
        "dataElement": "signatureFieldButton",
        "type": "toolButton",
        "toolName": "SignatureFormFieldCreateTool"
    },
    "textFieldButton": {
        "dataElement": "textFieldButton",
        "type": "toolButton",
        "toolName": "TextFormFieldCreateTool"
    },
    "checkboxFieldButton": {
        "dataElement": "checkboxFieldButton",
        "type": "toolButton",
        "toolName": "CheckBoxFormFieldCreateTool"
    },
    "radioFieldButton": {
        "dataElement": "radioFieldButton",
        "type": "toolButton",
        "toolName": "RadioButtonFormFieldCreateTool"
    },
    "listBoxFieldButton": {
        "dataElement": "listBoxFieldButton",
        "type": "toolButton",
        "toolName": "ListBoxFormFieldCreateTool"
    },
    "comboBoxFieldButton": {
        "dataElement": "comboBoxFieldButton",
        "type": "toolButton",
        "toolName": "ComboBoxFormFieldCreateTool"
    },
    "divider-0.7": {
        "dataElement": "divider-0.7",
        "type": "divider"
    },
    "formFieldEditButton": {
        "dataElement": "formFieldEditButton",
        "type": "presetButton",
        "buttonType": "formFieldEditButton"
    },
    "divider-0.8": {
        "dataElement": "divider-0.8",
        "type": "divider"
    },
    "formsToolsGroupedItems": {
        "dataElement": "formsToolsGroupedItems",
        "items": [
          "signatureFieldButton",
          "textFieldButton",
          "freeTextToolButton",
          "checkboxFieldButton",
          "radioFieldButton",
          "listBoxFieldButton",
          "comboBoxFieldButton",
          "divider-0.7",
          "formFieldEditButton"
        ],
        "type": "groupedItems",
        "grow": 0,
        "gap": 12,
        "alwaysVisible": false
    },
    "formsGroupedItems": {
        "dataElement": "formsGroupedItems",
        "items": [
          "formsToolsGroupedItems",
          "divider-0.8",
          "stylePanelToggle",
          "indexPanelListToggle"
        ],
        "type": "groupedItems",
        "grow": 0,
        "gap": 12,
        "alwaysVisible": false
    },
    "page-controls-container": {
        "dataElement": "page-controls-container",
        "type": "pageControls",
        "title": "component.pageControls",
        "icon": "icon-page-controls"
    },
    "newDocumentButton": {
        "dataElement": "newDocumentButton",
        "presetDataElement": "newDocumentPresetButton",
        "label": "action.newDocument",
        "title": "action.newDocument",
        "type": "presetButton",
        "buttonType": "newDocumentButton"
    },
    "fullscreenButton": {
        "dataElement": "fullscreenButton",
        "presetDataElement": "fullscreenPresetButton",
        "label": "action.enterFullscreen",
        "title": "action.enterFullscreen",
        "type": "presetButton",
        "buttonType": "fullscreenButton"
    }
  },
  "modularHeaders": {
    "default-top-header-demo": {
        "dataElement": "default-top-header-demo",
        "placement": "top",
        "grow": 0,
        "gap": 12,
        "position": "start",
        "float": false,
        "stroke": true,
        "dimension": {
          "paddingTop": 8,
          "paddingBottom": 8,
          "borderWidth": 1
        },
        "style": {},
        "items": [
          "groupedLeftHeaderButtons",
          "default-ribbon-group",
          "comparePanelToggle",
          "searchPanelToggle",
          "notesPanelToggle"
        ]
    },
    "tools-header": {
        "dataElement": "tools-header",
        "placement": "top",
        "justifyContent": "center",
        "grow": 0,
        "gap": 12,
        "position": "end",
        "float": false,
        "stroke": true,
        "dimension": {
          "paddingTop": 8,
          "paddingBottom": 8,
          "borderWidth": 1
        },
        "style": {},
        "items": [
          "annotateGroupedItems",
          "shapesGroupedItems",
          "insertGroupedItems",
          "redactionGroupedItems",
          "measureGroupedItems",
          "editGroupedItems",
          "contentEditGroupedItems",
          "fillAndSignGroupedItems",
          "formsGroupedItems"
        ]
    },
    "page-nav-floating-header": {
        "dataElement": "page-nav-floating-header",
        "placement": "bottom",
        "grow": 0,
        "gap": 12,
        "position": "center",
        "opacityMode": "dynamic",
        "opacity": "none",
        "float": true,
        "stroke": true,
        "dimension": {
          "paddingTop": 8,
          "paddingBottom": 8,
          "borderWidth": 1
        },
        "style": {
          "background": "var(--gray-1)",
          "padding": "8px",
          "borderStyle": "solid",
          "borderWidth": 1,
          "borderColor": "var(--gray-5)"
        },
        "items": [
          "page-controls-container"
        ]
    }
  },
  "panels": {
    "comparePanel": {
        "dataElement": "comparePanel",
        "render": "changeListPanel",
        "location": "right"
    },
    "stylePanel": {
        "dataElement": "stylePanel",
        "render": "stylePanel",
        "location": "left"
    },
    "thumbnailsPanel": {
        "dataElement": "thumbnailsPanel",
        "render": "thumbnailsPanel",
        "location": "left"
    },
    "outlinesPanel": {
        "dataElement": "outlinesPanel",
        "render": "outlinesPanel",
        "location": "left"
    },
    "bookmarksPanel": {
        "dataElement": "bookmarksPanel",
        "render": "bookmarksPanel",
        "location": "left"
    },
    "formFieldPanel": {
        "dataElement": "formFieldPanel",
        "render": "formFieldPanel",
        "location": "right"
    },
    "indexPanel": {
        "dataElement": "indexPanel",
        "render": "indexPanel",
        "location": "right"
    },
    "layersPanel": {
        "dataElement": "layersPanel",
        "render": "layersPanel",
        "location": "left"
    },
    "signatureListPanel": {
        "dataElement": "signatureListPanel",
        "render": "signatureListPanel",
        "location": "left"
    },
    "fileAttachmentPanel": {
        "dataElement": "fileAttachmentPanel",
        "render": "fileAttachmentPanel",
        "location": "left"
    },
    "rubberStampPanel": {
        "dataElement": "rubberStampPanel",
        "render": "rubberStampPanel",
        "location": "left"
    },
    "textEditingPanel": {
        "dataElement": "textEditingPanel",
        "render": "textEditingPanel",
        "location": "right"
    },
    "signaturePanel": {
        "dataElement": "signaturePanel",
        "render": "signaturePanel",
        "location": "left",
        "disabled": false
    },
    "portfolioPanel": {
        "dataElement": "portfolioPanel",
        "render": "portfolioPanel",
        "location": "left",
        "disabled": false
    },
    "tabPanel": {
        "render": "tabPanel",
        "dataElement": "tabPanel",
        "panelsList": [
          {
              "render": "thumbnailsPanel"
          },
          {
              "render": "outlinesPanel"
          },
          {
              "render": "bookmarksPanel"
          },
          {
              "render": "layersPanel"
          },
          {
              "render": "signaturePanel"
          },
          {
              "render": "fileAttachmentPanel"
          },
          {
              "render": "portfolioPanel"
          }
        ],
        "location": "left"
    },
    "notesPanel": {
        "dataElement": "notesPanel",
        "render": "notesPanel",
        "location": "right"
    },
    "searchPanel": {
        "dataElement": "searchPanel",
        "render": "searchPanel",
        "location": "right"
    },
    "redactionPanel": {
        "dataElement": "redactionPanel",
        "render": "redactionPanel",
        "location": "right"
    }
  },
  "flyouts": {
    "MainMenuFlyout": {
        "dataElement": "MainMenuFlyout",
        "items": [
          "newDocumentButton",
          "filePickerButton",
          "downloadButton",
          "fullscreenButton",
          "saveAsButton",
          "printButton",
          "divider",
          "createPortfolioButton",
          "divider",
          "settingsButton",
          "divider"
        ]
    },
    "multiSelectStylePanelFlyout": {
        "dataElement": "multiSelectStylePanelFlyout",
        "className": "StylePanelFlyout",
        "items": [
          "stylePanelToggle"
        ]
    }
  }
}

```

{% endcode %}
{% endtab %}

{% tab title="custom-left.json" %}
{% code title="custom-left.json" lineNumbers="true" %}

```json
{
  "modularComponents": {
    "filePickerButton": {
      "dataElement": "filePickerButton",
      "title": "action.openFile",
      "label": "action.openFile",
      "img": "icon-header-file-picker-line",
      "hidden": true,
      "type": "presetButton"
    },
    "downloadButton": {
      "dataElement": "downloadButton",
      "title": "action.download",
      "label": "action.download",
      "img": "icon-download",
      "hidden": false,
      "type": "presetButton",
      "buttonType": "downloadButton"
    },
    "saveAsButton": {
      "dataElement": "saveAsButton",
      "title": "saveModal.saveAs",
      "label": "saveModal.saveAs",
      "img": "icon-save",
      "hidden": false,
      "type": "presetButton",
      "buttonType": "saveAsButton"
    },
    "printButton": {
      "dataElement": "printButton",
      "title": "action.print",
      "label": "action.print",
      "img": "icon-header-print-line",
      "hidden": false,
      "type": "presetButton",
      "buttonType": "printButton"
    },
    "createPortfolioButton": {
      "dataElement": "createPortfolioButton",
      "title": "portfolio.createPDFPortfolio",
      "label": "portfolio.createPDFPortfolio",
      "img": "icon-pdf-portfolio",
      "hidden": false,
      "type": "presetButton",
      "buttonType": "createPortfolioButton"
    },
    "settingsButton": {
      "dataElement": "settingsButton",
      "title": "option.settings.settings",
      "isActive": false,
      "label": "option.settings.settings",
      "img": "icon-header-settings-line",
      "hidden": false,
      "type": "presetButton",
      "buttonType": "settingsButton"
    },
    "divider-0.1": {
      "dataElement": "divider-0.1",
      "type": "divider"
    },
    "left-panel-toggle": {
      "dataElement": "left-panel-toggle",
      "title": "Left Panel",
      "type": "toggleButton",
      "img": "icon-header-sidebar-line",
      "toggleElement": "customLeftPanel"
    },
    "view-controls": {
      "dataElement": "view-controls",
      "type": "viewControls"
    },
    "divider-0.3": {
      "dataElement": "divider-0.3",
      "type": "divider"
    },
    "zoom-container": {
      "dataElement": "zoom-container",
      "type": "zoom"
    },
    "divider-0.2": {
      "dataElement": "divider-0.2",
      "type": "divider"
    },
    "panToolButton": {
      "dataElement": "panToolButton",
      "type": "toolButton",
      "toolName": "Pan"
    },
    "annotationEditToolButton": {
      "dataElement": "annotationEditToolButton",
      "type": "toolButton",
      "toolName": "AnnotationEdit"
    },
    "menu-toggle-button": {
      "dataElement": "menu-toggle-button",
      "img": "ic-hamburger-menu",
      "title": "component.menuOverlay",
      "toggleElement": "MainMenuFlyout",
      "type": "toggleButton"
    },
    "groupedLeftHeaderButtons": {
      "dataElement": "groupedLeftHeaderButtons",
      "items": [
        "menu-toggle-button",
        "divider-0.1",
        "view-controls",
        "divider-0.3",
        "zoom-container"
      ],
      "type": "groupedItems",
      "grow": 1,
      "gap": 12,
      "alwaysVisible": true
    },
    "toolbarGroup-View": {
      "dataElement": "toolbarGroup-View",
      "title": "View",
      "type": "ribbonItem",
      "label": "View",
      "groupedItems": [],
      "toolbarGroup": "toolbarGroup-View"
    },
    "toolbarGroup-Annotate": {
      "dataElement": "toolbarGroup-Annotate",
      "title": "Annotate",
      "type": "ribbonItem",
      "label": "Annotate",
      "groupedItems": [
        "annotateGroupedItems"
      ],
      "toolbarGroup": "toolbarGroup-Annotate"
    },
    "toolbarGroup-Shapes": {
      "dataElement": "toolbarGroup-Shapes",
      "title": "Shapes",
      "type": "ribbonItem",
      "label": "Shapes",
      "groupedItems": [
        "shapesGroupedItems"
      ],
      "toolbarGroup": "toolbarGroup-Shapes"
    },
    "toolbarGroup-Insert": {
      "dataElement": "toolbarGroup-Insert",
      "title": "Insert",
      "type": "ribbonItem",
      "label": "Insert",
      "groupedItems": [
        "insertGroupedItems"
      ],
      "toolbarGroup": "toolbarGroup-Insert"
    },
    "toolbarGroup-Measure": {
      "dataElement": "toolbarGroup-Measure",
      "title": "Measure",
      "type": "ribbonItem",
      "label": "Measure",
      "groupedItems": [
        "measureGroupedItems"
      ],
      "toolbarGroup": "toolbarGroup-Measure"
    },
    "toolbarGroup-Redact": {
      "dataElement": "toolbarGroup-Redact",
      "title": "Redact",
      "type": "ribbonItem",
      "label": "Redact",
      "groupedItems": [
        "redactionGroupedItems"
      ],
      "toolbarGroup": "toolbarGroup-Redact"
    },
    "toolbarGroup-Edit": {
      "dataElement": "toolbarGroup-Edit",
      "title": "Edit",
      "type": "ribbonItem",
      "label": "Edit",
      "groupedItems": [
        "editGroupedItems"
      ],
      "toolbarGroup": "toolbarGroup-Edit"
    },
    "toolbarGroup-EditText": {
      "dataElement": "toolbarGroup-EditText",
      "title": "Content Edit",
      "type": "ribbonItem",
      "label": "Content Edit",
      "groupedItems": [
        "contentEditGroupedItems"
      ],
      "toolbarGroup": "toolbarGroup-EditText"
    },
    "toolbarGroup-FillAndSign": {
      "dataElement": "toolbarGroup-FillAndSign",
      "title": "Fill and Sign",
      "type": "ribbonItem",
      "label": "Fill and Sign",
      "groupedItems": [
        "fillAndSignGroupedItems"
      ],
      "toolbarGroup": "toolbarGroup-FillAndSign"
    },
    "toolbarGroup-Forms": {
      "dataElement": "toolbarGroup-Forms",
      "title": "Forms",
      "type": "ribbonItem",
      "label": "Forms",
      "groupedItems": [
        "formsGroupedItems"
      ],
      "toolbarGroup": "toolbarGroup-Forms"
    },
    "default-ribbon-group": {
      "dataElement": "default-ribbon-group",
      "items": [
        "toolbarGroup-View",
        "toolbarGroup-Annotate",
        "toolbarGroup-Shapes",
        "toolbarGroup-Insert",
        "toolbarGroup-Measure",
        "toolbarGroup-Redact",
        "toolbarGroup-Edit",
        "toolbarGroup-EditText",
        "toolbarGroup-FillAndSign",
        "toolbarGroup-Forms"
      ],
      "type": "ribbonGroup",
      "justifyContent": "start",
      "grow": 2,
      "gap": 12,
      "alwaysVisible": false
    },
    "searchPanelToggle": {
      "dataElement": "searchPanelToggle",
      "title": "component.searchPanel",
      "type": "toggleButton",
      "img": "icon-header-search",
      "toggleElement": "searchPanel"
    },
    "notesPanelToggle": {
      "dataElement": "notesPanelToggle",
      "title": "component.notesPanel",
      "type": "toggleButton",
      "img": "icon-header-chat-line",
      "toggleElement": "notesPanel"
    },
    "highlightToolButton": {
      "dataElement": "highlightToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateTextHighlight"
    },
    "underlineToolButton": {
      "dataElement": "underlineToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateTextUnderline"
    },
    "strikeoutToolButton": {
      "dataElement": "strikeoutToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateTextStrikeout"
    },
    "squigglyToolButton": {
      "dataElement": "squigglyToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateTextSquiggly"
    },
    "freeTextToolButton": {
      "dataElement": "freeTextToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateFreeText"
    },
    "markInsertTextToolButton": {
      "dataElement": "markInsertTextToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateMarkInsertText"
    },
    "markReplaceTextToolButton": {
      "dataElement": "markReplaceTextToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateMarkReplaceText"
    },
    "freeHandToolButton": {
      "dataElement": "freeHandToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateFreeHand"
    },
    "freeHandHighlightToolButton": {
      "dataElement": "freeHandHighlightToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateFreeHandHighlight"
    },
    "stickyToolButton": {
      "dataElement": "stickyToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateSticky"
    },
    "calloutToolButton": {
      "dataElement": "calloutToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateCallout"
    },
    "divider-0.4": {
      "dataElement": "divider-0.4",
      "type": "divider"
    },
    "stylePanelToggle": {
      "dataElement": "stylePanelToggle",
      "title": "action.style",
      "type": "toggleButton",
      "img": "icon-style-panel-toggle",
      "toggleElement": "stylePanel"
    },
    "divider-0.5": {
      "dataElement": "divider-0.5",
      "type": "divider"
    },
    "undoButton": {
      "dataElement": "undoButton",
      "type": "presetButton",
      "buttonType": "undoButton"
    },
    "redoButton": {
      "dataElement": "redoButton",
      "type": "presetButton",
      "buttonType": "redoButton"
    },
    "eraserToolButton": {
      "dataElement": "eraserToolButton",
      "type": "toolButton",
      "toolName": "AnnotationEraserTool"
    },
    "defaultAnnotationUtilities": {
      "dataElement": "defaultAnnotationUtilities",
      "items": [
        "divider-0.5",
        "undoButton",
        "redoButton",
        "eraserToolButton"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "annotateToolsGroupedItems": {
      "dataElement": "annotateToolsGroupedItems",
      "items": [
        "highlightToolButton",
        "underlineToolButton",
        "strikeoutToolButton",
        "squigglyToolButton",
        "freeHandToolButton",
        "freeHandHighlightToolButton",
        "freeTextToolButton",
        "markInsertTextToolButton",
        "markReplaceTextToolButton",
        "stickyToolButton",
        "calloutToolButton"
      ],
      "type": "groupedItems",
      "justifyContent": "center",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "annotateGroupedItems": {
      "dataElement": "annotateGroupedItems",
      "items": [
        "annotateToolsGroupedItems",
        "divider-0.4",
        "stylePanelToggle",
        "defaultAnnotationUtilities"
      ],
      "type": "groupedItems",
      "justifyContent": "center",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "rectangleToolButton": {
      "dataElement": "rectangleToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateRectangle"
    },
    "ellipseToolButton": {
      "dataElement": "ellipseToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateEllipse"
    },
    "arcToolButton": {
      "dataElement": "arcToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateArc"
    },
    "polygonToolButton": {
      "dataElement": "polygonToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreatePolygon"
    },
    "cloudToolButton": {
      "dataElement": "cloudToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreatePolygonCloud"
    },
    "lineToolButton": {
      "dataElement": "lineToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateLine"
    },
    "polylineToolButton": {
      "dataElement": "polylineToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreatePolyline"
    },
    "arrowToolButton": {
      "dataElement": "arrowToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateArrow"
    },
    "shapesToolsGroupedItems": {
      "dataElement": "shapesToolsGroupedItems",
      "items": [
        "rectangleToolButton",
        "ellipseToolButton",
        "arcToolButton",
        "polygonToolButton",
        "cloudToolButton",
        "lineToolButton",
        "polylineToolButton",
        "arrowToolButton"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "shapesGroupedItems": {
      "dataElement": "shapesGroupedItems",
      "items": [
        "shapesToolsGroupedItems",
        "divider-0.4",
        "stylePanelToggle",
        "defaultAnnotationUtilities"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "rubberStampToolButton": {
      "dataElement": "rubberStampToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateRubberStamp"
    },
    "signatureCreateToolButton": {
      "dataElement": "signatureCreateToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateSignature"
    },
    "fileAttachmentButton": {
      "dataElement": "fileAttachmentButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateFileAttachment"
    },
    "stampToolButton": {
      "dataElement": "stampToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateStamp"
    },
    "insertToolsGroupedItems": {
      "dataElement": "insertToolsGroupedItems",
      "items": [
        "rubberStampToolButton",
        "signatureCreateToolButton",
        "fileAttachmentButton",
        "stampToolButton"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "insertGroupedItems": {
      "dataElement": "insertGroupedItems",
      "items": [
        "insertToolsGroupedItems",
        "divider-0.4",
        "stylePanelToggle",
        "defaultAnnotationUtilities"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "redactionToolButton": {
      "dataElement": "redactionToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateRedaction"
    },
    "pageRedactionToggleButton": {
      "dataElement": "pageRedactionToggleButton",
      "title": "action.redactPages",
      "type": "toggleButton",
      "img": "icon-tool-page-redact",
      "toggleElement": "pageRedactionModal"
    },
    "redactionPanelToggle": {
      "dataElement": "redactionPanelToggle",
      "type": "toggleButton",
      "img": "icon-redact-panel",
      "toggleElement": "redactionPanel"
    },
    "redactionGroupedItems": {
      "dataElement": "redactionGroupedItems",
      "items": [
        "redactionToolButton",
        "pageRedactionToggleButton",
        "redactionPanelToggle",
        "defaultAnnotationUtilities"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "distanceMeasurementToolButton": {
      "dataElement": "distanceMeasurementToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateDistanceMeasurement"
    },
    "arcMeasurementToolButton": {
      "dataElement": "arcMeasurementToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateArcMeasurement"
    },
    "perimeterMeasurementToolButton": {
      "dataElement": "perimeterMeasurementToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreatePerimeterMeasurement"
    },
    "areaMeasurementToolButton": {
      "dataElement": "areaMeasurementToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateAreaMeasurement"
    },
    "ellipseMeasurementToolButton": {
      "dataElement": "ellipseMeasurementToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateEllipseMeasurement"
    },
    "rectangularAreaMeasurementToolButton": {
      "dataElement": "rectangularAreaMeasurementToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateRectangularAreaMeasurement"
    },
    "countMeasurementToolButton": {
      "dataElement": "countMeasurementToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateCountMeasurement"
    },
    "measureGroupedItems": {
      "dataElement": "measureGroupedItems",
      "items": [
        "distanceMeasurementToolButton",
        "arcMeasurementToolButton",
        "perimeterMeasurementToolButton",
        "areaMeasurementToolButton",
        "ellipseMeasurementToolButton",
        "rectangularAreaMeasurementToolButton",
        "countMeasurementToolButton",
        "divider-0.4",
        "stylePanelToggle",
        "defaultAnnotationUtilities"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "cropToolButton": {
      "dataElement": "cropToolButton",
      "type": "toolButton",
      "toolName": "CropPage"
    },
    "snippingToolButton": {
      "dataElement": "snippingToolButton",
      "type": "toolButton",
      "toolName": "SnippingTool"
    },
    "editGroupedItems": {
      "dataElement": "editGroupedItems",
      "items": [
        "cropToolButton",
        "snippingToolButton"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "addParagraphToolGroupButton": {
      "dataElement": "addParagraphToolGroupButton",
      "type": "toolButton",
      "toolName": "AddParagraphTool"
    },
    "addImageContentToolGroupButton": {
      "dataElement": "addImageContentToolGroupButton",
      "type": "toolButton",
      "toolName": "AddImageContentTool"
    },
    "divider-0.6": {
      "dataElement": "divider-0.6",
      "type": "divider"
    },
    "divider": {
      "dataElement": "divider",
      "type": "divider"
    },
    "contentEditButton": {
      "dataElement": "contentEditButton",
      "type": "presetButton",
      "buttonType": "contentEditButton"
    },
    "contentEditGroupedItems": {
      "dataElement": "contentEditGroupedItems",
      "items": [
        "addParagraphToolGroupButton",
        "addImageContentToolGroupButton",
        "divider-0.6",
        "contentEditButton"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "crossStampToolButton": {
      "dataElement": "crossStampToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateCrossStamp"
    },
    "checkStampToolButton": {
      "dataElement": "checkStampToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateCheckStamp"
    },
    "dotStampToolButton": {
      "dataElement": "dotStampToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateDotStamp"
    },
    "calendarToolButton": {
      "dataElement": "calendarToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateDateFreeText"
    },
    "fillAndSignGroupedItems": {
      "dataElement": "fillAndSignGroupedItems",
      "items": [
        "signatureCreateToolButton",
        "freeTextToolButton",
        "crossStampToolButton",
        "checkStampToolButton",
        "dotStampToolButton",
        "rubberStampToolButton",
        "calendarToolButton",
        "divider-0.4",
        "stylePanelToggle",
        "defaultAnnotationUtilities"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "signatureFieldButton": {
      "dataElement": "signatureFieldButton",
      "type": "toolButton",
      "toolName": "SignatureFormFieldCreateTool"
    },
    "textFieldButton": {
      "dataElement": "textFieldButton",
      "type": "toolButton",
      "toolName": "TextFormFieldCreateTool"
    },
    "checkboxFieldButton": {
      "dataElement": "checkboxFieldButton",
      "type": "toolButton",
      "toolName": "CheckBoxFormFieldCreateTool"
    },
    "radioFieldButton": {
      "dataElement": "radioFieldButton",
      "type": "toolButton",
      "toolName": "RadioButtonFormFieldCreateTool"
    },
    "listBoxFieldButton": {
      "dataElement": "listBoxFieldButton",
      "type": "toolButton",
      "toolName": "ListBoxFormFieldCreateTool"
    },
    "comboBoxFieldButton": {
      "dataElement": "comboBoxFieldButton",
      "type": "toolButton",
      "toolName": "ComboBoxFormFieldCreateTool"
    },
    "divider-0.7": {
      "dataElement": "divider-0.7",
      "type": "divider"
    },
    "formFieldEditButton": {
      "dataElement": "formFieldEditButton",
      "type": "presetButton",
      "buttonType": "formFieldEditButton"
    },
    "divider-0.8": {
      "dataElement": "divider-0.8",
      "type": "divider"
    },
    "formsToolsGroupedItems": {
      "dataElement": "formsToolsGroupedItems",
      "items": [
        "signatureFieldButton",
        "textFieldButton",
        "freeTextToolButton",
        "checkboxFieldButton",
        "radioFieldButton",
        "listBoxFieldButton",
        "comboBoxFieldButton",
        "divider-0.7",
        "formFieldEditButton"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "formsGroupedItems": {
      "dataElement": "formsGroupedItems",
      "items": [
        "formsToolsGroupedItems",
        "divider-0.8",
        "stylePanelToggle"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "page-controls-container": {
      "dataElement": "page-controls-container",
      "type": "pageControls"
    },
    "newDocumentButton": {
      "dataElement": "newDocumentButton",
      "presetDataElement": "newDocumentPresetButton",
      "img": "icon-plus-sign",
      "label": "action.newDocument",
      "title": "action.newDocument",
      "isActive": false,
      "hidden": false,
      "type": "presetButton"
    },
    "fullscreenButton": {
      "dataElement": "fullscreenButton",
      "presetDataElement": "fullscreenPresetButton",
      "img": "icon-header-full-screen",
      "label": "action.enterFullscreen",
      "title": "action.enterFullscreen",
      "hidden": false,
      "type": "presetButton"
    },
    "thumbnailsPanelToggle": {
      "dataElement": "thumbnailsPanelToggle",
      "title": "component.thumbnailsPanel",
      "type": "toggleButton",
      "img": "icon-panel-thumbnail-line",
      "toggleElement": "thumbnailPanel"
    },
    "outlinesPanelToggle": {
      "dataElement": "outlinesToggle",
      "title": "component.outlinesPanel",
      "type": "toggleButton",
      "img": "icon-panel-outlines",
      "toggleElement": "outlinePanel"
    },
    "bookmarksPanelToggle": {
      "dataElement": "bookmarksPanelToggle",
      "title": "component.bookmarksPanel",
      "type": "toggleButton",
      "img": "ic_bookmarks_black_24px",
      "toggleElement": "bookmarkPanel"
    },
    "signaturesPanelToggle": {
      "dataElement": "signaturesPanelToggle",
      "title": "component.signaturePanel",
      "type": "toggleButton",
      "img": "icon-tool-signature",
      "toggleElement": "signaturePanel"
    }
  },
  "modularHeaders": {
    "default-top-header-demo": {
      "dataElement": "default-top-header-demo",
      "placement": "top",
      "grow": 0,
      "gap": 12,
      "position": "start",
      "float": false,
      "stroke": true,
      "dimension": {
        "paddingTop": 8,
        "paddingBottom": 8,
        "borderWidth": 1
      },
      "style": {},
      "items": [
        "groupedLeftHeaderButtons",
        "default-ribbon-group",
        "searchPanelToggle",
        "notesPanelToggle"
      ]
    },
    "tools-header": {
      "dataElement": "tools-header",
      "placement": "top",
      "justifyContent": "center",
      "grow": 0,
      "gap": 12,
      "position": "end",
      "float": false,
      "stroke": true,
      "dimension": {
        "paddingTop": 8,
        "paddingBottom": 8,
        "borderWidth": 1
      },
      "style": {},
      "items": [
        "annotateGroupedItems",
        "shapesGroupedItems",
        "insertGroupedItems",
        "redactionGroupedItems",
        "measureGroupedItems",
        "editGroupedItems",
        "contentEditGroupedItems",
        "fillAndSignGroupedItems",
        "formsGroupedItems"
      ]
    },
    "left-header": {
      "dataElement": "left-header",
      "placement": "left",
      "justifyContent": "start",
      "grow": 0,
      "gap": 12,
      "position": "end",
      "float": false,
      "stroke": true,
      "dimension": {
        "paddingTop": 8,
        "paddingBottom": 8,
        "borderWidth": 1
      },
      "style": {},
      "items": [
        "thumbnailsPanelToggle",
        "outlinesPanelToggle",
        "bookmarksPanelToggle",
        "signaturesPanelToggle",
        "divider",
        "panToolButton",
        "annotationEditToolButton"
      ]
    },
    "page-nav-floating-header": {
      "dataElement": "page-nav-floating-header",
      "placement": "bottom",
      "grow": 0,
      "gap": 12,
      "position": "center",
      "opacityMode": "dynamic",
      "opacity": "none",
      "float": true,
      "stroke": true,
      "dimension": {
        "paddingTop": 8,
        "paddingBottom": 8,
        "borderWidth": 1
      },
      "style": {
        "background": "var(--gray-1)",
        "padding": "8px",
        "borderStyle": "solid",
        "borderWidth": 1,
        "borderColor": "var(--gray-5)"
      },
      "items": [
        "page-controls-container"
      ]
    }
  },
  "panels": {
    "stylePanel": {
      "dataElement": "stylePanel",
      "render": "stylePanel",
      "location": "left"
    },
    "thumbnailPanel": {
      "dataElement": "thumbnailPanel",
      "render": "thumbnailsPanel",
      "location": "left"
    },
    "outlinePanel": {
      "dataElement": "outlinePanel",
      "render": "outlinesPanel",
      "location": "left"
    },
    "bookmarkPanel": {
      "dataElement": "bookmarkPanel",
      "render": "bookmarksPanel",
      "location": "left"
    },
    "layersPanel": {
      "dataElement": "layersPanel",
      "render": "layersPanel",
      "location": "left"
    },
    "signatureListPanel": {
      "dataElement": "signatureListPanel",
      "render": "signatureListPanel",
      "location": "left"
    },
    "fileAttachmentPanel": {
      "dataElement": "fileAttachmentPanel",
      "render": "fileAttachmentPanel",
      "location": "left"
    },
    "rubberStampPanel": {
      "dataElement": "rubberStampPanel",
      "render": "rubberStampPanel",
      "location": "left"
    },
    "textEditingPanel": {
      "dataElement": "textEditingPanel",
      "render": "textEditingPanel",
      "location": "right"
    },
    "signaturePanel": {
      "dataElement": "signaturePanel",
      "render": "signaturePanel",
      "location": "left"
    },
    "portfolioPanel": {
      "dataElement": "portfolioPanel",
      "render": "portfolioPanel",
      "location": "left"
    },
    "customLeftPanel": {
      "render": "tabPanel",
      "dataElement": "customLeftPanel",
      "panelsList": [
        {
          "render": "thumbnailPanel"
        },
        {
          "render": "outlinePanel"
        },
        {
          "render": "bookmarkPanel"
        },
        {
          "render": "layersPanel"
        },
        {
          "render": "signaturePanel"
        },
        {
          "render": "fileAttachmentPanel"
        },
        {
          "render": "portfolioPanel"
        }
      ],
      "location": "left"
    },
    "notesPanel": {
      "dataElement": "notesPanel",
      "render": "notesPanel",
      "location": "right"
    },
    "searchPanel": {
      "dataElement": "searchPanel",
      "render": "searchPanel",
      "location": "right"
    },
    "redactionPanel": {
      "dataElement": "redactionPanel",
      "render": "redactionPanel",
      "location": "right"
    }
  },
  "flyouts": {
    "MainMenuFlyout": {
      "dataElement": "MainMenuFlyout",
      "items": [
        "newDocumentButton",
        "filePickerButton",
        "downloadButton",
        "fullscreenButton",
        "saveAsButton",
        "printButton",
        "divider",
        "createPortfolioButton",
        "divider",
        "settingsButton",
        "divider"
      ]
    }
  }
}

```

{% endcode %}
{% endtab %}

{% tab title="no-ribbons.json" %}
{% code title="no-ribbons.json" lineNumbers="true" %}

```json
{
  "modularComponents": {
    "comparePanelToggle": {
      "dataElement": "comparePanelToggle",
      "title": "action.comparePages",
      "label": "action.comparePages",
      "type": "presetButton",
      "buttonType": "compareButton",
      "disabled": true
    },
    "filePickerButton": {
      "dataElement": "filePickerButton",
      "title": "action.openFile",
      "label": "action.openFile",
      "type": "presetButton"
    },
    "downloadButton": {
      "dataElement": "downloadButton",
      "title": "action.download",
      "label": "action.download",
      "type": "presetButton",
      "buttonType": "downloadButton"
    },
    "saveAsButton": {
      "dataElement": "saveAsButton",
      "title": "saveModal.saveAs",
      "isActive": false,
      "label": "saveModal.saveAs",
      "type": "presetButton"
    },
    "printButton": {
      "dataElement": "printButton",
      "title": "action.print",
      "isActive": false,
      "label": "action.print",
      "type": "presetButton",
      "buttonType": "printButton"
    },
    "createPortfolioButton": {
      "dataElement": "createPortfolioButton",
      "title": "portfolio.createPDFPortfolio",
      "isActive": false,
      "label": "portfolio.createPDFPortfolio",
      "type": "presetButton",
      "disabled": true
    },
    "settingsButton": {
      "dataElement": "settingsButton",
      "title": "option.settings.settings",
      "isActive": false,
      "label": "option.settings.settings",
      "type": "presetButton"
    },
    "divider-0.1": {
      "dataElement": "divider-0.1",
      "type": "divider"
    },
    "leftPanelButton": {
      "dataElement": "leftPanelButton",
      "title": "Left Panel",
      "type": "toggleButton",
      "img": "icon-header-sidebar-line",
      "toggleElement": "tabPanel"
    },
    "view-controls": {
      "dataElement": "view-controls",
      "type": "viewControls",
      "title": "component.viewControls",
      "icon": "icon-header-page-manipulation-line"
    },
    "divider-0.3": {
      "dataElement": "divider-0.3",
      "type": "divider"
    },
    "zoom-container": {
      "dataElement": "zoom-container",
      "type": "zoom"
    },
    "divider-0.2": {
      "dataElement": "divider-0.2",
      "type": "divider"
    },
    "panToolButton": {
      "dataElement": "panToolButton",
      "type": "toolButton",
      "toolName": "Pan"
    },
    "annotationEditToolButton": {
      "dataElement": "annotationEditToolButton",
      "type": "toolButton",
      "toolName": "AnnotationEdit"
    },
    "menuButton": {
      "dataElement": "menuButton",
      "img": "ic-hamburger-menu",
      "title": "component.menuOverlay",
      "toggleElement": "MainMenuFlyout",
      "type": "toggleButton"
    },
    "groupedMainHeaderButtons": {
      "dataElement": "groupedMainHeaderButtons",
      "items": [
        "freeTextToolButton",
        "rectangleToolButton",
        "signatureCreateToolButton",
        "highlightToolButton",
        "underlineToolButton",
        "underlineToolButton2",
        "strikeoutToolButton",
        "calloutToolButton",
        "divider-0.1",
        "stampToolButton",
        "divider-0.2",
        "stylePanelToggle"
      ],
      "type": "groupedItems",
      "grow": 1,
      "gap": 12,
      "alwaysVisible": true
    },
    "groupedLeftHeaderButtons": {
      "dataElement": "groupedLeftHeaderButtons",
      "items": [
        "menuButton",
        "divider-0.1",
        "leftPanelButton",
        "view-controls",
        "divider-0.3",
        "zoom-container"
      ],
      "type": "groupedItems",
      "grow": 1,
      "gap": 12,
      "alwaysVisible": true
    },
    "toolbarGroup-View": {
      "dataElement": "toolbarGroup-View",
      "title": "View",
      "type": "ribbonItem",
      "label": "View",
      "img": "icon-view-ribbon",
      "groupedItems": [],
      "toolbarGroup": "toolbarGroup-View"
    },
    "toolbarGroup-Annotate": {
      "dataElement": "toolbarGroup-Annotate",
      "title": "Annotate",
      "type": "ribbonItem",
      "label": "Annotate",
      "img": "icon-annotate-ribbon",
      "groupedItems": [
        "annotateGroupedItems"
      ],
      "toolbarGroup": "toolbarGroup-Annotate"
    },
    "toolbarGroup-Shapes": {
      "dataElement": "toolbarGroup-Shapes",
      "title": "Shapes",
      "type": "ribbonItem",
      "label": "Shapes",
      "img": "icon-tool-shape-rectangle",
      "groupedItems": [
        "shapesGroupedItems"
      ],
      "toolbarGroup": "toolbarGroup-Shapes"
    },
    "toolbarGroup-Insert": {
      "dataElement": "toolbarGroup-Insert",
      "title": "Insert",
      "type": "ribbonItem",
      "label": "Insert",
      "img": "icon-insert-ribbon",
      "groupedItems": [
        "insertGroupedItems"
      ],
      "toolbarGroup": "toolbarGroup-Insert"
    },
    "toolbarGroup-Measure": {
      "dataElement": "toolbarGroup-Measure",
      "title": "Measure",
      "type": "ribbonItem",
      "label": "Measure",
      "groupedItems": [
        "measureGroupedItems"
      ],
      "toolbarGroup": "toolbarGroup-Measure",
      "disabled": true
    },
    "toolbarGroup-Redact": {
      "dataElement": "toolbarGroup-Redact",
      "title": "Redact",
      "type": "ribbonItem",
      "label": "Redact",
      "groupedItems": [
        "redactionGroupedItems"
      ],
      "toolbarGroup": "toolbarGroup-Redact",
      "disabled": true
    },
    "toolbarGroup-Edit": {
      "dataElement": "toolbarGroup-Edit",
      "title": "Edit",
      "type": "ribbonItem",
      "label": "Edit",
      "groupedItems": [
        "editGroupedItems"
      ],
      "toolbarGroup": "toolbarGroup-Edit"
    },
    "toolbarGroup-EditText": {
      "dataElement": "toolbarGroup-EditText",
      "title": "Content Edit",
      "type": "ribbonItem",
      "label": "Content Edit",
      "groupedItems": [
        "contentEditGroupedItems"
      ],
      "toolbarGroup": "toolbarGroup-EditText",
      "disabled": true
    },
    "toolbarGroup-FillAndSign": {
      "dataElement": "toolbarGroup-FillAndSign",
      "title": "Fill and Sign",
      "type": "ribbonItem",
      "label": "Fill and Sign",
      "groupedItems": [
        "fillAndSignGroupedItems"
      ],
      "toolbarGroup": "toolbarGroup-FillAndSign"
    },
    "toolbarGroup-Forms": {
      "dataElement": "toolbarGroup-Forms",
      "title": "Forms",
      "type": "ribbonItem",
      "label": "Forms",
      "groupedItems": [
        "formsGroupedItems"
      ],
      "toolbarGroup": "toolbarGroup-Forms"
    },
    "default-ribbon-group": {
      "dataElement": "default-ribbon-group",
      "items": [
        "toolbarGroup-View",
        "toolbarGroup-Annotate",
        "toolbarGroup-Shapes",
        "toolbarGroup-Insert",
        "toolbarGroup-Measure",
        "toolbarGroup-Redact",
        "toolbarGroup-Edit",
        "toolbarGroup-EditText",
        "toolbarGroup-FillAndSign",
        "toolbarGroup-Forms"
      ],
      "type": "ribbonGroup",
      "justifyContent": "start",
      "grow": 2,
      "gap": 12,
      "alwaysVisible": false
    },
    "searchPanelToggle": {
      "dataElement": "searchPanelToggle",
      "title": "component.searchPanel",
      "type": "toggleButton",
      "img": "icon-header-search",
      "toggleElement": "searchPanel"
    },
    "notesPanelToggle": {
      "dataElement": "notesPanelToggle",
      "title": "component.notesPanel",
      "type": "toggleButton",
      "img": "icon-header-chat-line",
      "toggleElement": "notesPanel"
    },
    "highlightToolButton": {
      "dataElement": "highlightToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateTextHighlight"
    },
    "underlineToolButton": {
      "dataElement": "underlineToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateTextUnderline"
    },
    "underlineToolButton2": {
      "dataElement": "underlineToolButton2",
      "type": "toolButton",
      "toolName": "AnnotationCreateTextUnderline2"
    },
    "strikeoutToolButton": {
      "dataElement": "strikeoutToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateTextStrikeout"
    },
    "squigglyToolButton": {
      "dataElement": "squigglyToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateTextSquiggly"
    },
    "freeTextToolButton": {
      "dataElement": "freeTextToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateFreeText"
    },
    "markInsertTextToolButton": {
      "dataElement": "markInsertTextToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateMarkInsertText"
    },
    "markReplaceTextToolButton": {
      "dataElement": "markReplaceTextToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateMarkReplaceText"
    },
    "freeHandToolButton": {
      "dataElement": "freeHandToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateFreeHand"
    },
    "freeHandHighlightToolButton": {
      "dataElement": "freeHandHighlightToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateFreeHandHighlight"
    },
    "stickyToolButton": {
      "dataElement": "stickyToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateSticky"
    },
    "calloutToolButton": {
      "dataElement": "calloutToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateCallout"
    },
    "divider-0.4": {
      "dataElement": "divider-0.4",
      "type": "divider"
    },
    "stylePanelToggle": {
      "dataElement": "stylePanelToggle",
      "title": "action.style",
      "type": "toggleButton",
      "img": "icon-style-panel-toggle",
      "toggleElement": "stylePanel"
    },
    "indexPanelListToggle": {
      "dataElement": "indexPanelListToggle",
      "title": "component.indexPanel",
      "type": "toggleButton",
      "img": "icon-index-panel-list",
      "toggleElement": "indexPanel"
    },
    "divider-0.5": {
      "dataElement": "divider-0.5",
      "type": "divider"
    },
    "undoButton": {
      "dataElement": "undoButton",
      "type": "presetButton",
      "buttonType": "undoButton"
    },
    "redoButton": {
      "dataElement": "redoButton",
      "type": "presetButton",
      "buttonType": "redoButton"
    },
    "eraserToolButton": {
      "dataElement": "eraserToolButton",
      "type": "toolButton",
      "toolName": "AnnotationEraserTool"
    },
    "defaultAnnotationUtilities": {
      "dataElement": "defaultAnnotationUtilities",
      "items": [
        "divider-0.5",
        "undoButton",
        "redoButton",
        "eraserToolButton"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "annotateToolsGroupedItems": {
      "dataElement": "annotateToolsGroupedItems",
      "items": [
        "highlightToolButton",
        "underlineToolButton",
        "strikeoutToolButton",
        "squigglyToolButton",
        "freeHandToolButton",
        "freeHandHighlightToolButton",
        "freeTextToolButton",
        "markInsertTextToolButton",
        "markReplaceTextToolButton",
        "stickyToolButton",
        "calloutToolButton"
      ],
      "type": "groupedItems",
      "justifyContent": "center",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "annotateGroupedItems": {
      "dataElement": "annotateGroupedItems",
      "items": [
        "annotateToolsGroupedItems",
        "divider-0.4",
        "stylePanelToggle",
        "defaultAnnotationUtilities"
      ],
      "type": "groupedItems",
      "justifyContent": "center",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "rectangleToolButton": {
      "dataElement": "rectangleToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateRectangle"
    },
    "ellipseToolButton": {
      "dataElement": "ellipseToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateEllipse"
    },
    "arcToolButton": {
      "dataElement": "arcToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateArc"
    },
    "polygonToolButton": {
      "dataElement": "polygonToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreatePolygon"
    },
    "cloudToolButton": {
      "dataElement": "cloudToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreatePolygonCloud"
    },
    "lineToolButton": {
      "dataElement": "lineToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateLine"
    },
    "polylineToolButton": {
      "dataElement": "polylineToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreatePolyline"
    },
    "arrowToolButton": {
      "dataElement": "arrowToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateArrow"
    },
    "shapesToolsGroupedItems": {
      "dataElement": "shapesToolsGroupedItems",
      "items": [
        "rectangleToolButton",
        "ellipseToolButton",
        "arcToolButton",
        "polygonToolButton",
        "cloudToolButton",
        "lineToolButton",
        "polylineToolButton",
        "arrowToolButton"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "shapesGroupedItems": {
      "dataElement": "shapesGroupedItems",
      "items": [
        "shapesToolsGroupedItems",
        "divider-0.4",
        "stylePanelToggle",
        "defaultAnnotationUtilities"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "rubberStampToolButton": {
      "dataElement": "rubberStampToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateRubberStamp"
    },
    "signatureCreateToolButton": {
      "dataElement": "signatureCreateToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateSignature"
    },
    "fileAttachmentButton": {
      "dataElement": "fileAttachmentButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateFileAttachment"
    },
    "stampToolButton": {
      "dataElement": "stampToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateStamp"
    },
    "insertToolsGroupedItems": {
      "dataElement": "insertToolsGroupedItems",
      "items": [
        "rubberStampToolButton",
        "signatureCreateToolButton",
        "fileAttachmentButton",
        "stampToolButton"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "insertGroupedItems": {
      "dataElement": "insertGroupedItems",
      "items": [
        "insertToolsGroupedItems",
        "divider-0.4",
        "stylePanelToggle",
        "defaultAnnotationUtilities"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "redactionToolButton": {
      "dataElement": "redactionToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateRedaction"
    },
    "pageRedactionToggleButton": {
      "dataElement": "pageRedactionToggleButton",
      "title": "action.redactPages",
      "type": "toggleButton",
      "img": "icon-tool-page-redact",
      "toggleElement": "pageRedactionModal"
    },
    "redactionPanelToggle": {
      "dataElement": "redactionPanelToggle",
      "type": "toggleButton",
      "img": "icon-redact-panel",
      "toggleElement": "redactionPanel",
      "title": "component.redactionPanel",
      "disabled": true
    },
    "redactionGroupedItems": {
      "dataElement": "redactionGroupedItems",
      "items": [
        "redactionToolButton",
        "pageRedactionToggleButton",
        "redactionPanelToggle",
        "divider-0.4",
        "stylePanelToggle",
        "defaultAnnotationUtilities"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "distanceMeasurementToolButton": {
      "dataElement": "distanceMeasurementToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateDistanceMeasurement"
    },
    "arcMeasurementToolButton": {
      "dataElement": "arcMeasurementToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateArcMeasurement"
    },
    "perimeterMeasurementToolButton": {
      "dataElement": "perimeterMeasurementToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreatePerimeterMeasurement"
    },
    "areaMeasurementToolButton": {
      "dataElement": "areaMeasurementToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateAreaMeasurement"
    },
    "ellipseMeasurementToolButton": {
      "dataElement": "ellipseMeasurementToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateEllipseMeasurement"
    },
    "rectangularAreaMeasurementToolButton": {
      "dataElement": "rectangularAreaMeasurementToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateRectangularAreaMeasurement"
    },
    "countMeasurementToolButton": {
      "dataElement": "countMeasurementToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateCountMeasurement"
    },
    "measureGroupedItems": {
      "dataElement": "measureGroupedItems",
      "items": [
        "distanceMeasurementToolButton",
        "arcMeasurementToolButton",
        "perimeterMeasurementToolButton",
        "areaMeasurementToolButton",
        "ellipseMeasurementToolButton",
        "rectangularAreaMeasurementToolButton",
        "countMeasurementToolButton",
        "divider-0.4",
        "stylePanelToggle",
        "defaultAnnotationUtilities"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "cropToolButton": {
      "dataElement": "cropToolButton",
      "type": "toolButton",
      "toolName": "CropPage"
    },
    "snippingToolButton": {
      "dataElement": "snippingToolButton",
      "type": "toolButton",
      "toolName": "SnippingTool"
    },
    "editGroupedItems": {
      "dataElement": "editGroupedItems",
      "items": [
        "cropToolButton",
        "snippingToolButton"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "addParagraphToolGroupButton": {
      "dataElement": "addParagraphToolGroupButton",
      "type": "toolButton",
      "toolName": "AddParagraphTool",
      "disabled": true
    },
    "addImageContentToolGroupButton": {
      "dataElement": "addImageContentToolGroupButton",
      "type": "toolButton",
      "toolName": "AddImageContentTool",
      "disabled": true
    },
    "divider-0.6": {
      "dataElement": "divider-0.6",
      "type": "divider"
    },
    "contentEditButton": {
      "dataElement": "contentEditButton",
      "type": "presetButton",
      "buttonType": "contentEditButton",
      "disabled": true
    },
    "contentEditGroupedItems": {
      "dataElement": "contentEditGroupedItems",
      "items": [
        "addParagraphToolGroupButton",
        "addImageContentToolGroupButton",
        "divider-0.6",
        "contentEditButton"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "crossStampToolButton": {
      "dataElement": "crossStampToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateCrossStamp"
    },
    "checkStampToolButton": {
      "dataElement": "checkStampToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateCheckStamp"
    },
    "dotStampToolButton": {
      "dataElement": "dotStampToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateDotStamp"
    },
    "calendarToolButton": {
      "dataElement": "calendarToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateDateFreeText"
    },
    "fillAndSignGroupedItems": {
      "dataElement": "fillAndSignGroupedItems",
      "items": [
        "signatureCreateToolButton",
        "freeTextToolButton",
        "crossStampToolButton",
        "checkStampToolButton",
        "dotStampToolButton",
        "rubberStampToolButton",
        "calendarToolButton",
        "divider-0.4",
        "stylePanelToggle",
        "defaultAnnotationUtilities"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "signatureFieldButton": {
      "dataElement": "signatureFieldButton",
      "type": "toolButton",
      "toolName": "SignatureFormFieldCreateTool"
    },
    "textFieldButton": {
      "dataElement": "textFieldButton",
      "type": "toolButton",
      "toolName": "TextFormFieldCreateTool"
    },
    "checkboxFieldButton": {
      "dataElement": "checkboxFieldButton",
      "type": "toolButton",
      "toolName": "CheckBoxFormFieldCreateTool"
    },
    "radioFieldButton": {
      "dataElement": "radioFieldButton",
      "type": "toolButton",
      "toolName": "RadioButtonFormFieldCreateTool"
    },
    "listBoxFieldButton": {
      "dataElement": "listBoxFieldButton",
      "type": "toolButton",
      "toolName": "ListBoxFormFieldCreateTool"
    },
    "comboBoxFieldButton": {
      "dataElement": "comboBoxFieldButton",
      "type": "toolButton",
      "toolName": "ComboBoxFormFieldCreateTool"
    },
    "divider-0.7": {
      "dataElement": "divider-0.7",
      "type": "divider"
    },
    "formFieldEditButton": {
      "dataElement": "formFieldEditButton",
      "type": "presetButton",
      "buttonType": "formFieldEditButton"
    },
    "divider-0.8": {
      "dataElement": "divider-0.8",
      "type": "divider"
    },
    "formsToolsGroupedItems": {
      "dataElement": "formsToolsGroupedItems",
      "items": [
        "signatureFieldButton",
        "textFieldButton",
        "freeTextToolButton",
        "checkboxFieldButton",
        "radioFieldButton",
        "listBoxFieldButton",
        "comboBoxFieldButton",
        "divider-0.7",
        "formFieldEditButton"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "formsGroupedItems": {
      "dataElement": "formsGroupedItems",
      "items": [
        "formsToolsGroupedItems",
        "divider-0.8",
        "stylePanelToggle",
        "indexPanelListToggle"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "page-controls-container": {
      "dataElement": "page-controls-container",
      "type": "pageControls",
      "title": "component.pageControls",
      "icon": "icon-page-controls"
    },
    "newDocumentButton": {
      "dataElement": "newDocumentButton",
      "presetDataElement": "newDocumentPresetButton",
      "label": "action.newDocument",
      "title": "action.newDocument",
      "isActive": false,
      "type": "presetButton",
      "buttonType": "newDocumentButton"
    },
    "fullscreenButton": {
      "dataElement": "fullscreenButton",
      "presetDataElement": "fullscreenPresetButton",
      "label": "action.enterFullscreen",
      "title": "action.enterFullscreen",
      "type": "presetButton",
      "buttonType": "fullscreenButton"
    }
  },
  "modularHeaders": {
    "default-top-header-demo": {
      "dataElement": "default-top-header-demo",
      "placement": "top",
      "grow": 0,
      "gap": 12,
      "position": "start",
      "float": false,
      "stroke": true,
      "dimension": {
        "paddingTop": 8,
        "paddingBottom": 8,
        "borderWidth": 1
      },
      "style": {},
      "items": [
        "groupedLeftHeaderButtons",
        "groupedMainHeaderButtons",
        "comparePanelToggle",
        "undoButton",
        "redoButton",
        "divider-0.1",
        "searchPanelToggle"
      ]
    },
    "page-nav-floating-header": {
      "dataElement": "page-nav-floating-header",
      "placement": "bottom",
      "grow": 0,
      "gap": 12,
      "position": "center",
      "opacityMode": "dynamic",
      "opacity": "none",
      "float": true,
      "stroke": true,
      "dimension": {
        "paddingTop": 8,
        "paddingBottom": 8,
        "borderWidth": 1
      },
      "style": {
        "background": "var(--gray-1)",
        "padding": "8px",
        "borderStyle": "solid",
        "borderWidth": 1,
        "borderColor": "var(--gray-5)"
      },
      "items": [
        "page-controls-container"
      ]
    }
  },
  "panels": {
    "comparePanel": {
      "dataElement": "comparePanel",
      "render": "changeListPanel",
      "location": "right"
    },
    "stylePanel": {
      "dataElement": "stylePanel",
      "render": "stylePanel",
      "location": "left"
    },
    "thumbnailsPanel": {
      "dataElement": "thumbnailsPanel",
      "render": "thumbnailsPanel",
      "location": "left"
    },
    "outlinesPanel": {
      "dataElement": "outlinesPanel",
      "render": "outlinesPanel",
      "location": "left"
    },
    "bookmarksPanel": {
      "dataElement": "bookmarksPanel",
      "render": "bookmarksPanel",
      "location": "left"
    },
    "formFieldPanel": {
      "dataElement": "formFieldPanel",
      "render": "formFieldPanel",
      "location": "right"
    },
    "indexPanel": {
      "dataElement": "indexPanel",
      "render": "indexPanel",
      "location": "right"
    },
    "layersPanel": {
      "dataElement": "layersPanel",
      "render": "layersPanel",
      "location": "left"
    },
    "signatureListPanel": {
      "dataElement": "signatureListPanel",
      "render": "signatureListPanel",
      "location": "left"
    },
    "fileAttachmentPanel": {
      "dataElement": "fileAttachmentPanel",
      "render": "fileAttachmentPanel",
      "location": "left"
    },
    "rubberStampPanel": {
      "dataElement": "rubberStampPanel",
      "render": "rubberStampPanel",
      "location": "left"
    },
    "textEditingPanel": {
      "dataElement": "textEditingPanel",
      "render": "textEditingPanel",
      "location": "right"
    },
    "signaturePanel": {
      "dataElement": "signaturePanel",
      "render": "signaturePanel",
      "location": "left",
      "disabled": true
    },
    "portfolioPanel": {
      "dataElement": "portfolioPanel",
      "render": "portfolioPanel",
      "location": "left",
      "disabled": true
    },
    "tabPanel": {
      "render": "tabPanel",
      "dataElement": "tabPanel",
      "panelsList": [
        {
          "render": "thumbnailsPanel"
        },
        {
          "render": "outlinesPanel"
        },
        {
          "render": "bookmarksPanel"
        },
        {
          "render": "layersPanel"
        },
        {
          "render": "signaturePanel"
        },
        {
          "render": "fileAttachmentPanel"
        },
        {
          "render": "portfolioPanel"
        }
      ],
      "location": "left"
    },
    "notesPanel": {
      "dataElement": "notesPanel",
      "render": "notesPanel",
      "location": "right"
    },
    "searchPanel": {
      "dataElement": "searchPanel",
      "render": "searchPanel",
      "location": "right"
    },
    "redactionPanel": {
      "dataElement": "redactionPanel",
      "render": "redactionPanel",
      "location": "right",
      "disabled": true
    }
  },
  "flyouts": {
    "MainMenuFlyout": {
      "dataElement": "MainMenuFlyout",
      "items": [
        "newDocumentButton",
        "filePickerButton",
        "downloadButton",
        "fullscreenButton",
        "saveAsButton",
        "printButton",
        "divider",
        "createPortfolioButton",
        "divider",
        "settingsButton",
        "divider"
      ]
    }
  }
}

```

{% endcode %}
{% endtab %}

{% tab title="ribbons-with-icons.json" %}
{% code title="ribbons-with-icons.json" lineNumbers="true" %}

```json
{
  "modularComponents": {
    "comparePanelToggle": {
      "dataElement": "comparePanelToggle",
      "title": "action.comparePages",
      "label": "action.comparePages",
      "type": "presetButton",
      "buttonType": "compareButton",
      "disabled": true
    },
    "filePickerButton": {
      "dataElement": "filePickerButton",
      "title": "action.openFile",
      "label": "action.openFile",
      "type": "presetButton"
    },
    "downloadButton": {
      "dataElement": "downloadButton",
      "title": "action.download",
      "label": "action.download",
      "type": "presetButton",
      "buttonType": "downloadButton"
    },
    "saveAsButton": {
      "dataElement": "saveAsButton",
      "title": "saveModal.saveAs",
      "isActive": false,
      "label": "saveModal.saveAs",
      "type": "presetButton",
      "buttonType": "saveAsButton"
    },
    "printButton": {
      "dataElement": "printButton",
      "title": "action.print",
      "isActive": false,
      "label": "action.print",
      "type": "presetButton",
      "buttonType": "printButton"
    },
    "createPortfolioButton": {
      "dataElement": "createPortfolioButton",
      "title": "portfolio.createPDFPortfolio",
      "isActive": false,
      "label": "portfolio.createPDFPortfolio",
      "type": "presetButton",
      "disabled": true
    },
    "settingsButton": {
      "dataElement": "settingsButton",
      "title": "option.settings.settings",
      "isActive": false,
      "label": "option.settings.settings",
      "type": "presetButton"
    },
    "divider-0.1": {
      "dataElement": "divider-0.1",
      "type": "divider"
    },
    "leftPanelButton": {
      "dataElement": "leftPanelButton",
      "title": "Left Panel",
      "type": "toggleButton",
      "img": "icon-header-sidebar-line",
      "toggleElement": "tabPanel"
    },
    "view-controls": {
      "dataElement": "view-controls",
      "type": "viewControls",
      "title": "component.viewControls",
      "icon": "icon-header-page-manipulation-line"
    },
    "divider-0.3": {
      "dataElement": "divider-0.3",
      "type": "divider"
    },
    "zoom-container": {
      "dataElement": "zoom-container",
      "type": "zoom"
    },
    "divider-0.2": {
      "dataElement": "divider-0.2",
      "type": "divider"
    },
    "panToolButton": {
      "dataElement": "panToolButton",
      "type": "toolButton",
      "toolName": "Pan"
    },
    "annotationEditToolButton": {
      "dataElement": "annotationEditToolButton",
      "type": "toolButton",
      "toolName": "AnnotationEdit"
    },
    "menuButton": {
      "dataElement": "menuButton",
      "img": "ic-hamburger-menu",
      "title": "component.menuOverlay",
      "toggleElement": "MainMenuFlyout",
      "type": "toggleButton"
    },
    "groupedLeftHeaderButtons": {
      "dataElement": "groupedLeftHeaderButtons",
      "items": [
        "menuButton",
        "divider-0.1",
        "leftPanelButton",
        "view-controls",
        "divider-0.3",
        "zoom-container"
      ],
      "type": "groupedItems",
      "grow": 1,
      "gap": 12,
      "alwaysVisible": true
    },
    "groupedRightHeaderStartButtons": {
      "dataElement": "groupedRightHeaderStartButtons",
      "items": [
        "notesPanelToggle",
        "searchPanelToggle",
        "defaultAnnotationUtilities"
      ],
      "type": "groupedItems",
      "grow": 1,
      "gap": 12,
      "alwaysVisible": true
    },
    "groupedRightHeaderEndButtons": {
      "dataElement": "groupedRightHeaderEndButtons",
      "justifyContent": "end",
      "items": [
        "divider-0.2",
        "panToolButton",
        "annotationEditToolButton",
        "page-controls-container"
      ],
      "type": "groupedItems",
      "grow": 1,
      "gap": 12,
      "alwaysVisible": true
    },
    "toolbarGroup-View": {
      "dataElement": "toolbarGroup-View",
      "title": "View",
      "type": "ribbonItem",
      "label": "View",
      "img": "icon-view-ribbon",
      "groupedItems": [],
      "toolbarGroup": "toolbarGroup-View"
    },
    "toolbarGroup-Annotate": {
      "dataElement": "toolbarGroup-Annotate",
      "title": "Annotate",
      "type": "ribbonItem",
      "label": "Annotate",
      "img": "icon-annotate-ribbon",
      "groupedItems": [
        "annotateGroupedItems"
      ],
      "toolbarGroup": "toolbarGroup-Annotate"
    },
    "toolbarGroup-Shapes": {
      "dataElement": "toolbarGroup-Shapes",
      "title": "Shapes",
      "type": "ribbonItem",
      "label": "Shapes",
      "img": "icon-tool-shape-rectangle",
      "groupedItems": [
        "shapesGroupedItems"
      ],
      "toolbarGroup": "toolbarGroup-Shapes"
    },
    "toolbarGroup-Insert": {
      "dataElement": "toolbarGroup-Insert",
      "title": "Insert",
      "type": "ribbonItem",
      "label": "Insert",
      "img": "icon-insert-ribbon",
      "groupedItems": [
        "insertGroupedItems"
      ],
      "toolbarGroup": "toolbarGroup-Insert"
    },
    "toolbarGroup-Measure": {
      "dataElement": "toolbarGroup-Measure",
      "title": "Measure",
      "type": "ribbonItem",
      "label": "Measure",
      "groupedItems": [
        "measureGroupedItems"
      ],
      "toolbarGroup": "toolbarGroup-Measure",
      "disabled": true
    },
    "toolbarGroup-Redact": {
      "dataElement": "toolbarGroup-Redact",
      "title": "Redact",
      "type": "ribbonItem",
      "label": "Redact",
      "groupedItems": [
        "redactionGroupedItems"
      ],
      "toolbarGroup": "toolbarGroup-Redact",
      "disabled": true
    },
    "toolbarGroup-Edit": {
      "dataElement": "toolbarGroup-Edit",
      "title": "Edit",
      "type": "ribbonItem",
      "label": "Edit",
      "groupedItems": [
        "editGroupedItems"
      ],
      "toolbarGroup": "toolbarGroup-Edit",
      "disabled": true
    },
    "toolbarGroup-EditText": {
      "dataElement": "toolbarGroup-EditText",
      "title": "Content Edit",
      "type": "ribbonItem",
      "label": "Content Edit",
      "groupedItems": [
        "contentEditGroupedItems"
      ],
      "toolbarGroup": "toolbarGroup-EditText",
      "disabled": true
    },
    "toolbarGroup-FillAndSign": {
      "dataElement": "toolbarGroup-FillAndSign",
      "title": "Fill and Sign",
      "type": "ribbonItem",
      "label": "Fill and Sign",
      "groupedItems": [
        "fillAndSignGroupedItems"
      ],
      "toolbarGroup": "toolbarGroup-FillAndSign",
      "disabled": true
    },
    "toolbarGroup-Forms": {
      "dataElement": "toolbarGroup-Forms",
      "title": "Forms",
      "type": "ribbonItem",
      "label": "Forms",
      "groupedItems": [
        "formsGroupedItems"
      ],
      "toolbarGroup": "toolbarGroup-Forms",
      "disabled": true
    },
    "default-ribbon-group": {
      "dataElement": "default-ribbon-group",
      "items": [
        "toolbarGroup-View",
        "toolbarGroup-Annotate",
        "toolbarGroup-Shapes",
        "toolbarGroup-Insert"
      ],
      "type": "ribbonGroup",
      "justifyContent": "center",
      "grow": 10,
      "gap": 12,
      "alwaysVisible": false
    },
    "searchPanelToggle": {
      "dataElement": "searchPanelToggle",
      "title": "component.searchPanel",
      "type": "toggleButton",
      "img": "icon-header-search",
      "toggleElement": "searchPanel"
    },
    "notesPanelToggle": {
      "dataElement": "notesPanelToggle",
      "title": "component.notesPanel",
      "type": "toggleButton",
      "img": "icon-header-chat-line",
      "toggleElement": "notesPanel"
    },
    "highlightToolButton": {
      "dataElement": "highlightToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateTextHighlight"
    },
    "underlineToolButton": {
      "dataElement": "underlineToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateTextUnderline"
    },
    "strikeoutToolButton": {
      "dataElement": "strikeoutToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateTextStrikeout"
    },
    "squigglyToolButton": {
      "dataElement": "squigglyToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateTextSquiggly"
    },
    "freeTextToolButton": {
      "dataElement": "freeTextToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateFreeText"
    },
    "markInsertTextToolButton": {
      "dataElement": "markInsertTextToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateMarkInsertText"
    },
    "markReplaceTextToolButton": {
      "dataElement": "markReplaceTextToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateMarkReplaceText"
    },
    "freeHandToolButton": {
      "dataElement": "freeHandToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateFreeHand"
    },
    "freeHandHighlightToolButton": {
      "dataElement": "freeHandHighlightToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateFreeHandHighlight"
    },
    "stickyToolButton": {
      "dataElement": "stickyToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateSticky"
    },
    "calloutToolButton": {
      "dataElement": "calloutToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateCallout"
    },
    "divider-0.4": {
      "dataElement": "divider-0.4",
      "type": "divider"
    },
    "stylePanelToggle": {
      "dataElement": "stylePanelToggle",
      "title": "action.style",
      "type": "toggleButton",
      "img": "icon-style-panel-toggle",
      "toggleElement": "stylePanel"
    },
    "indexPanelListToggle": {
      "dataElement": "indexPanelListToggle",
      "title": "component.indexPanel",
      "type": "toggleButton",
      "img": "icon-index-panel-list",
      "toggleElement": "indexPanel"
    },
    "divider-0.5": {
      "dataElement": "divider-0.5",
      "type": "divider"
    },
    "undoButton": {
      "dataElement": "undoButton",
      "type": "presetButton",
      "buttonType": "undoButton"
    },
    "redoButton": {
      "dataElement": "redoButton",
      "type": "presetButton",
      "buttonType": "redoButton"
    },
    "eraserToolButton": {
      "dataElement": "eraserToolButton",
      "type": "toolButton",
      "toolName": "AnnotationEraserTool"
    },
    "defaultAnnotationUtilities": {
      "dataElement": "defaultAnnotationUtilities",
      "items": [
        "divider-0.5",
        "undoButton",
        "redoButton"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "annotateToolsGroupedItems": {
      "dataElement": "annotateToolsGroupedItems",
      "items": [
        "highlightToolButton",
        "underlineToolButton",
        "strikeoutToolButton",
        "squigglyToolButton",
        "freeHandToolButton",
        "freeHandHighlightToolButton",
        "freeTextToolButton",
        "markInsertTextToolButton",
        "markReplaceTextToolButton",
        "stickyToolButton",
        "calloutToolButton"
      ],
      "type": "groupedItems",
      "justifyContent": "center",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "annotateGroupedItems": {
      "dataElement": "annotateGroupedItems",
      "items": [
        "annotateToolsGroupedItems",
        "divider-0.4",
        "stylePanelToggle",
        "defaultAnnotationUtilities"
      ],
      "type": "groupedItems",
      "justifyContent": "center",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "rectangleToolButton": {
      "dataElement": "rectangleToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateRectangle"
    },
    "ellipseToolButton": {
      "dataElement": "ellipseToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateEllipse"
    },
    "arcToolButton": {
      "dataElement": "arcToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateArc"
    },
    "polygonToolButton": {
      "dataElement": "polygonToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreatePolygon"
    },
    "cloudToolButton": {
      "dataElement": "cloudToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreatePolygonCloud"
    },
    "lineToolButton": {
      "dataElement": "lineToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateLine"
    },
    "polylineToolButton": {
      "dataElement": "polylineToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreatePolyline"
    },
    "arrowToolButton": {
      "dataElement": "arrowToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateArrow"
    },
    "shapesToolsGroupedItems": {
      "dataElement": "shapesToolsGroupedItems",
      "items": [
        "rectangleToolButton",
        "ellipseToolButton",
        "arcToolButton",
        "polygonToolButton",
        "cloudToolButton",
        "lineToolButton",
        "polylineToolButton",
        "arrowToolButton"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "shapesGroupedItems": {
      "dataElement": "shapesGroupedItems",
      "items": [
        "shapesToolsGroupedItems",
        "divider-0.4",
        "stylePanelToggle",
        "defaultAnnotationUtilities"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "rubberStampToolButton": {
      "dataElement": "rubberStampToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateRubberStamp"
    },
    "signatureCreateToolButton": {
      "dataElement": "signatureCreateToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateSignature"
    },
    "fileAttachmentButton": {
      "dataElement": "fileAttachmentButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateFileAttachment"
    },
    "stampToolButton": {
      "dataElement": "stampToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateStamp"
    },
    "insertToolsGroupedItems": {
      "dataElement": "insertToolsGroupedItems",
      "items": [
        "rubberStampToolButton",
        "signatureCreateToolButton",
        "fileAttachmentButton",
        "stampToolButton"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "insertGroupedItems": {
      "dataElement": "insertGroupedItems",
      "items": [
        "insertToolsGroupedItems",
        "divider-0.4",
        "stylePanelToggle",
        "defaultAnnotationUtilities"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "redactionToolButton": {
      "dataElement": "redactionToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateRedaction"
    },
    "pageRedactionToggleButton": {
      "dataElement": "pageRedactionToggleButton",
      "title": "action.redactPages",
      "type": "toggleButton",
      "img": "icon-tool-page-redact",
      "toggleElement": "pageRedactionModal"
    },
    "redactionPanelToggle": {
      "dataElement": "redactionPanelToggle",
      "type": "toggleButton",
      "img": "icon-redact-panel",
      "toggleElement": "redactionPanel",
      "title": "component.redactionPanel",
      "disabled": true
    },
    "redactionGroupedItems": {
      "dataElement": "redactionGroupedItems",
      "items": [
        "redactionToolButton",
        "pageRedactionToggleButton",
        "redactionPanelToggle",
        "divider-0.4",
        "stylePanelToggle",
        "defaultAnnotationUtilities"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "distanceMeasurementToolButton": {
      "dataElement": "distanceMeasurementToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateDistanceMeasurement"
    },
    "arcMeasurementToolButton": {
      "dataElement": "arcMeasurementToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateArcMeasurement"
    },
    "perimeterMeasurementToolButton": {
      "dataElement": "perimeterMeasurementToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreatePerimeterMeasurement"
    },
    "areaMeasurementToolButton": {
      "dataElement": "areaMeasurementToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateAreaMeasurement"
    },
    "ellipseMeasurementToolButton": {
      "dataElement": "ellipseMeasurementToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateEllipseMeasurement"
    },
    "rectangularAreaMeasurementToolButton": {
      "dataElement": "rectangularAreaMeasurementToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateRectangularAreaMeasurement"
    },
    "countMeasurementToolButton": {
      "dataElement": "countMeasurementToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateCountMeasurement"
    },
    "measureGroupedItems": {
      "dataElement": "measureGroupedItems",
      "items": [
        "distanceMeasurementToolButton",
        "arcMeasurementToolButton",
        "perimeterMeasurementToolButton",
        "areaMeasurementToolButton",
        "ellipseMeasurementToolButton",
        "rectangularAreaMeasurementToolButton",
        "countMeasurementToolButton",
        "divider-0.4",
        "stylePanelToggle",
        "defaultAnnotationUtilities"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "cropToolButton": {
      "dataElement": "cropToolButton",
      "type": "toolButton",
      "toolName": "CropPage"
    },
    "snippingToolButton": {
      "dataElement": "snippingToolButton",
      "type": "toolButton",
      "toolName": "SnippingTool"
    },
    "editGroupedItems": {
      "dataElement": "editGroupedItems",
      "items": [
        "cropToolButton",
        "snippingToolButton"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "addParagraphToolGroupButton": {
      "dataElement": "addParagraphToolGroupButton",
      "type": "toolButton",
      "toolName": "AddParagraphTool",
      "disabled": true
    },
    "addImageContentToolGroupButton": {
      "dataElement": "addImageContentToolGroupButton",
      "type": "toolButton",
      "toolName": "AddImageContentTool",
      "disabled": true
    },
    "divider-0.6": {
      "dataElement": "divider-0.6",
      "type": "divider"
    },
    "contentEditButton": {
      "dataElement": "contentEditButton",
      "type": "presetButton",
      "buttonType": "contentEditButton",
      "disabled": true
    },
    "contentEditGroupedItems": {
      "dataElement": "contentEditGroupedItems",
      "items": [
        "addParagraphToolGroupButton",
        "addImageContentToolGroupButton",
        "divider-0.6",
        "contentEditButton"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "crossStampToolButton": {
      "dataElement": "crossStampToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateCrossStamp"
    },
    "checkStampToolButton": {
      "dataElement": "checkStampToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateCheckStamp"
    },
    "dotStampToolButton": {
      "dataElement": "dotStampToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateDotStamp"
    },
    "calendarToolButton": {
      "dataElement": "calendarToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateDateFreeText"
    },
    "fillAndSignGroupedItems": {
      "dataElement": "fillAndSignGroupedItems",
      "items": [
        "signatureCreateToolButton",
        "freeTextToolButton",
        "crossStampToolButton",
        "checkStampToolButton",
        "dotStampToolButton",
        "rubberStampToolButton",
        "calendarToolButton",
        "divider-0.4",
        "stylePanelToggle",
        "defaultAnnotationUtilities"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "signatureFieldButton": {
      "dataElement": "signatureFieldButton",
      "type": "toolButton",
      "toolName": "SignatureFormFieldCreateTool"
    },
    "textFieldButton": {
      "dataElement": "textFieldButton",
      "type": "toolButton",
      "toolName": "TextFormFieldCreateTool"
    },
    "checkboxFieldButton": {
      "dataElement": "checkboxFieldButton",
      "type": "toolButton",
      "toolName": "CheckBoxFormFieldCreateTool"
    },
    "radioFieldButton": {
      "dataElement": "radioFieldButton",
      "type": "toolButton",
      "toolName": "RadioButtonFormFieldCreateTool"
    },
    "listBoxFieldButton": {
      "dataElement": "listBoxFieldButton",
      "type": "toolButton",
      "toolName": "ListBoxFormFieldCreateTool"
    },
    "comboBoxFieldButton": {
      "dataElement": "comboBoxFieldButton",
      "type": "toolButton",
      "toolName": "ComboBoxFormFieldCreateTool"
    },
    "divider-0.7": {
      "dataElement": "divider-0.7",
      "type": "divider"
    },
    "formFieldEditButton": {
      "dataElement": "formFieldEditButton",
      "type": "presetButton",
      "buttonType": "formFieldEditButton"
    },
    "divider-0.8": {
      "dataElement": "divider-0.8",
      "type": "divider"
    },
    "formsToolsGroupedItems": {
      "dataElement": "formsToolsGroupedItems",
      "items": [
        "signatureFieldButton",
        "textFieldButton",
        "freeTextToolButton",
        "checkboxFieldButton",
        "radioFieldButton",
        "listBoxFieldButton",
        "comboBoxFieldButton",
        "divider-0.7",
        "formFieldEditButton"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "formsGroupedItems": {
      "dataElement": "formsGroupedItems",
      "items": [
        "formsToolsGroupedItems",
        "divider-0.8",
        "stylePanelToggle",
        "indexPanelListToggle"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "page-controls-container": {
      "dataElement": "page-controls-container",
      "type": "pageControls",
      "title": "component.pageControls",
      "icon": "icon-page-controls"
    },
    "newDocumentButton": {
      "dataElement": "newDocumentButton",
      "presetDataElement": "newDocumentPresetButton",
      "label": "action.newDocument",
      "title": "action.newDocument",
      "isActive": false,
      "type": "presetButton",
      "buttonType": "newDocumentButton"
    },
    "fullscreenButton": {
      "dataElement": "fullscreenButton",
      "presetDataElement": "fullscreenPresetButton",
      "label": "action.enterFullscreen",
      "title": "action.enterFullscreen",
      "type": "presetButton",
      "buttonType": "fullscreenButton"
    }
  },
  "modularHeaders": {
    "default-top-header-demo": {
      "dataElement": "default-top-header-demo",
      "placement": "top",
      "grow": 0,
      "gap": 12,
      "position": "start",
      "float": false,
      "stroke": true,
      "dimension": {
        "paddingTop": 8,
        "paddingBottom": 8,
        "borderWidth": 1
      },
      "style": {},
      "items": [
        "groupedLeftHeaderButtons",
        "default-ribbon-group",
        "comparePanelToggle",
        "downloadButton",
        "printButton",
        "saveAsButton"
      ]
    },
    "tools-header": {
      "dataElement": "tools-header",
      "placement": "top",
      "justifyContent": "center",
      "grow": 0,
      "gap": 12,
      "position": "end",
      "float": false,
      "stroke": true,
      "dimension": {
        "paddingTop": 8,
        "paddingBottom": 8,
        "borderWidth": 1
      },
      "style": {},
      "items": [
        "annotateGroupedItems",
        "shapesGroupedItems",
        "insertGroupedItems",
        "redactionGroupedItems",
        "measureGroupedItems",
        "editGroupedItems",
        "contentEditGroupedItems",
        "fillAndSignGroupedItems",
        "formsGroupedItems"
      ]
    },
    "right-header": {
      "dataElement": "right-header",
      "placement": "right",
      "justifyContent": "start",
      "grow": 0,
      "gap": 12,
      "float": false,
      "stroke": true,
      "dimension": {
        "paddingTop": 8,
        "paddingBottom": 8,
        "borderWidth": 1
      },
      "style": {},
      "items": [
        "groupedRightHeaderStartButtons",
        "groupedRightHeaderEndButtons"
      ]
    }
  },
  "panels": {
    "comparePanel": {
      "dataElement": "comparePanel",
      "render": "changeListPanel",
      "location": "right"
    },
    "stylePanel": {
      "dataElement": "stylePanel",
      "render": "stylePanel",
      "location": "left"
    },
    "thumbnailsPanel": {
      "dataElement": "thumbnailsPanel",
      "render": "thumbnailsPanel",
      "location": "left"
    },
    "outlinesPanel": {
      "dataElement": "outlinesPanel",
      "render": "outlinesPanel",
      "location": "left"
    },
    "bookmarksPanel": {
      "dataElement": "bookmarksPanel",
      "render": "bookmarksPanel",
      "location": "left"
    },
    "formFieldPanel": {
      "dataElement": "formFieldPanel",
      "render": "formFieldPanel",
      "location": "right"
    },
    "indexPanel": {
      "dataElement": "indexPanel",
      "render": "indexPanel",
      "location": "right"
    },
    "layersPanel": {
      "dataElement": "layersPanel",
      "render": "layersPanel",
      "location": "left"
    },
    "signatureListPanel": {
      "dataElement": "signatureListPanel",
      "render": "signatureListPanel",
      "location": "left"
    },
    "fileAttachmentPanel": {
      "dataElement": "fileAttachmentPanel",
      "render": "fileAttachmentPanel",
      "location": "left"
    },
    "rubberStampPanel": {
      "dataElement": "rubberStampPanel",
      "render": "rubberStampPanel",
      "location": "left"
    },
    "textEditingPanel": {
      "dataElement": "textEditingPanel",
      "render": "textEditingPanel",
      "location": "right"
    },
    "signaturePanel": {
      "dataElement": "signaturePanel",
      "render": "signaturePanel",
      "location": "left",
      "disabled": true
    },
    "portfolioPanel": {
      "dataElement": "portfolioPanel",
      "render": "portfolioPanel",
      "location": "left",
      "disabled": true
    },
    "tabPanel": {
      "render": "tabPanel",
      "dataElement": "tabPanel",
      "panelsList": [
        {
          "render": "thumbnailsPanel"
        },
        {
          "render": "outlinesPanel"
        },
        {
          "render": "bookmarksPanel"
        },
        {
          "render": "layersPanel"
        },
        {
          "render": "signaturePanel"
        },
        {
          "render": "fileAttachmentPanel"
        },
        {
          "render": "portfolioPanel"
        }
      ],
      "location": "left"
    },
    "notesPanel": {
      "dataElement": "notesPanel",
      "render": "notesPanel",
      "location": "right"
    },
    "searchPanel": {
      "dataElement": "searchPanel",
      "render": "searchPanel",
      "location": "right"
    },
    "redactionPanel": {
      "dataElement": "redactionPanel",
      "render": "redactionPanel",
      "location": "right",
      "disabled": true
    }
  },
  "flyouts": {
    "MainMenuFlyout": {
      "dataElement": "MainMenuFlyout",
      "items": [
        "newDocumentButton",
        "filePickerButton",
        "fullscreenButton",
        "saveAsButton",
        "divider",
        "createPortfolioButton",
        "divider",
        "settingsButton",
        "divider"
      ]
    }
  }
}

```

{% endcode %}
{% endtab %}

{% tab title="vertical.json" %}
{% code title="vertical.json" lineNumbers="true" %}

```json
{
  "modularComponents": {
    "comparePanelToggle": {
      "dataElement": "comparePanelToggle",
      "title": "action.comparePages",
      "label": "action.comparePages",
      "type": "presetButton",
      "buttonType": "compareButton",
      "disabled": true
    },
    "filePickerButton": {
      "dataElement": "filePickerButton",
      "title": "action.openFile",
      "label": "action.openFile",
      "type": "presetButton"
    },
    "downloadButton": {
      "dataElement": "downloadButton",
      "title": "action.download",
      "label": "action.download",
      "type": "presetButton",
      "buttonType": "downloadButton"
    },
    "saveAsButton": {
      "dataElement": "saveAsButton",
      "title": "saveModal.saveAs",
      "isActive": false,
      "label": "saveModal.saveAs",
      "type": "presetButton"
    },
    "printButton": {
      "dataElement": "printButton",
      "title": "action.print",
      "isActive": false,
      "label": "action.print",
      "type": "presetButton",
      "buttonType": "printButton"
    },
    "createPortfolioButton": {
      "dataElement": "createPortfolioButton",
      "title": "portfolio.createPDFPortfolio",
      "isActive": false,
      "label": "portfolio.createPDFPortfolio",
      "type": "presetButton",
      "disabled": true
    },
    "settingsButton": {
      "dataElement": "settingsButton",
      "title": "option.settings.settings",
      "isActive": false,
      "label": "option.settings.settings",
      "type": "presetButton"
    },
    "divider-0.1": {
      "dataElement": "divider-0.1",
      "type": "divider"
    },
    "leftPanelButton": {
      "dataElement": "leftPanelButton",
      "title": "Left Panel",
      "type": "toggleButton",
      "img": "icon-header-sidebar-line",
      "toggleElement": "tabPanel"
    },
    "view-controls": {
      "dataElement": "view-controls",
      "type": "viewControls",
      "title": "component.viewControls",
      "icon": "icon-header-page-manipulation-line"
    },
    "divider-0.3": {
      "dataElement": "divider-0.3",
      "type": "divider"
    },
    "zoom-container": {
      "dataElement": "zoom-container",
      "type": "zoom"
    },
    "divider-0.2": {
      "dataElement": "divider-0.2",
      "type": "divider"
    },
    "panToolButton": {
      "dataElement": "panToolButton",
      "type": "toolButton",
      "toolName": "Pan"
    },
    "annotationEditToolButton": {
      "dataElement": "annotationEditToolButton",
      "type": "toolButton",
      "toolName": "AnnotationEdit"
    },
    "menuButton": {
      "dataElement": "menuButton",
      "img": "ic-hamburger-menu",
      "title": "component.menuOverlay",
      "toggleElement": "MainMenuFlyout",
      "type": "toggleButton"
    },
    "groupedRightHeaderEndButtons": {
      "dataElement": "groupedRightHeaderEndButtons",
      "justifyContent": "end",
      "items": [
        "divider-0.2",
        "notesPanelToggle",
        "searchPanelToggle",
        "panToolButton",
        "annotationEditToolButton",
        "page-controls-container"
      ],
      "type": "groupedItems",
      "grow": 1,
      "gap": 12,
      "alwaysVisible": true
    },
    "toolbarGroup-View": {
      "dataElement": "toolbarGroup-View",
      "title": "View",
      "type": "ribbonItem",
      "img": "icon-view-ribbon",
      "groupedItems": []
    },
    "toolbarGroup-Annotate": {
      "dataElement": "toolbarGroup-Annotate",
      "title": "Annotate",
      "type": "ribbonItem",
      "img": "icon-annotate-ribbon",
      "groupedItems": [
        "annotateGroupedItems"
      ]
    },
    "toolbarGroup-Shapes": {
      "dataElement": "toolbarGroup-Shapes",
      "title": "Shapes",
      "type": "ribbonItem",
      "img": "icon-tool-shape-rectangle",
      "groupedItems": [
        "shapesGroupedItems"
      ]
    },
    "toolbarGroup-Insert": {
      "dataElement": "toolbarGroup-Insert",
      "title": "Insert",
      "type": "ribbonItem",
      "img": "icon-insert-ribbon",
      "groupedItems": [
        "insertGroupedItems"
      ]
    },
    "toolbarGroup-Measure": {
      "dataElement": "toolbarGroup-Measure",
      "title": "Measure",
      "type": "ribbonItem",
      "label": "Measure",
      "groupedItems": [
        "measureGroupedItems"
      ],
      "toolbarGroup": "toolbarGroup-Measure",
      "disabled": true
    },
    "toolbarGroup-Redact": {
      "dataElement": "toolbarGroup-Redact",
      "title": "Redact",
      "type": "ribbonItem",
      "label": "Redact",
      "groupedItems": [
        "redactionGroupedItems"
      ],
      "toolbarGroup": "toolbarGroup-Redact",
      "disabled": true
    },
    "toolbarGroup-Edit": {
      "dataElement": "toolbarGroup-Edit",
      "title": "Edit",
      "type": "ribbonItem",
      "label": "Edit",
      "groupedItems": [
        "editGroupedItems"
      ],
      "toolbarGroup": "toolbarGroup-Edit"
    },
    "toolbarGroup-EditText": {
      "dataElement": "toolbarGroup-EditText",
      "title": "Content Edit",
      "type": "ribbonItem",
      "label": "Content Edit",
      "groupedItems": [
        "contentEditGroupedItems"
      ],
      "toolbarGroup": "toolbarGroup-EditText",
      "disabled": true
    },
    "toolbarGroup-FillAndSign": {
      "dataElement": "toolbarGroup-FillAndSign",
      "title": "Fill and Sign",
      "type": "ribbonItem",
      "label": "Fill and Sign",
      "groupedItems": [
        "fillAndSignGroupedItems"
      ],
      "toolbarGroup": "toolbarGroup-FillAndSign"
    },
    "toolbarGroup-Forms": {
      "dataElement": "toolbarGroup-Forms",
      "title": "Forms",
      "type": "ribbonItem",
      "label": "Forms",
      "groupedItems": [
        "formsGroupedItems"
      ],
      "toolbarGroup": "toolbarGroup-Forms"
    },
    "default-ribbon-group": {
      "dataElement": "default-ribbon-group",
      "items": [
        "toolbarGroup-View",
        "toolbarGroup-Annotate",
        "toolbarGroup-Shapes",
        "toolbarGroup-Insert"
      ],
      "type": "ribbonGroup",
      "justifyContent": "start",
      "grow": 2,
      "gap": 12,
      "alwaysVisible": false
    },
    "searchPanelToggle": {
      "dataElement": "searchPanelToggle",
      "title": "component.searchPanel",
      "type": "toggleButton",
      "img": "icon-header-search",
      "toggleElement": "searchPanel"
    },
    "notesPanelToggle": {
      "dataElement": "notesPanelToggle",
      "title": "component.notesPanel",
      "type": "toggleButton",
      "img": "icon-header-chat-line",
      "toggleElement": "notesPanel"
    },
    "highlightToolButton": {
      "dataElement": "highlightToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateTextHighlight"
    },
    "underlineToolButton": {
      "dataElement": "underlineToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateTextUnderline"
    },
    "underlineToolButton2": {
      "dataElement": "underlineToolButton2",
      "type": "toolButton",
      "toolName": "AnnotationCreateTextUnderline2"
    },
    "strikeoutToolButton": {
      "dataElement": "strikeoutToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateTextStrikeout"
    },
    "squigglyToolButton": {
      "dataElement": "squigglyToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateTextSquiggly"
    },
    "freeTextToolButton": {
      "dataElement": "freeTextToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateFreeText"
    },
    "markInsertTextToolButton": {
      "dataElement": "markInsertTextToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateMarkInsertText"
    },
    "markReplaceTextToolButton": {
      "dataElement": "markReplaceTextToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateMarkReplaceText"
    },
    "freeHandToolButton": {
      "dataElement": "freeHandToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateFreeHand"
    },
    "freeHandHighlightToolButton": {
      "dataElement": "freeHandHighlightToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateFreeHandHighlight"
    },
    "stickyToolButton": {
      "dataElement": "stickyToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateSticky"
    },
    "calloutToolButton": {
      "dataElement": "calloutToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateCallout"
    },
    "divider-0.4": {
      "dataElement": "divider-0.4",
      "type": "divider"
    },
    "stylePanelToggle": {
      "dataElement": "stylePanelToggle",
      "title": "action.style",
      "type": "toggleButton",
      "img": "icon-style-panel-toggle",
      "toggleElement": "stylePanel"
    },
    "indexPanelListToggle": {
      "dataElement": "indexPanelListToggle",
      "title": "component.indexPanel",
      "type": "toggleButton",
      "img": "icon-index-panel-list",
      "toggleElement": "indexPanel"
    },
    "divider-0.5": {
      "dataElement": "divider-0.5",
      "type": "divider"
    },
    "undoButton": {
      "dataElement": "undoButton",
      "type": "presetButton",
      "buttonType": "undoButton"
    },
    "redoButton": {
      "dataElement": "redoButton",
      "type": "presetButton",
      "buttonType": "redoButton"
    },
    "eraserToolButton": {
      "dataElement": "eraserToolButton",
      "type": "toolButton",
      "toolName": "AnnotationEraserTool"
    },
    "defaultAnnotationUtilities": {
      "dataElement": "defaultAnnotationUtilities",
      "items": [
        "divider-0.5",
        "undoButton",
        "redoButton",
        "eraserToolButton"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "annotateToolsGroupedItems": {
      "dataElement": "annotateToolsGroupedItems",
      "items": [
        "highlightToolButton",
        "underlineToolButton",
        "strikeoutToolButton",
        "squigglyToolButton",
        "freeHandToolButton",
        "freeHandHighlightToolButton",
        "freeTextToolButton",
        "markInsertTextToolButton",
        "markReplaceTextToolButton",
        "stickyToolButton",
        "calloutToolButton"
      ],
      "type": "groupedItems",
      "justifyContent": "center",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "annotateGroupedItems": {
      "dataElement": "annotateGroupedItems",
      "items": [
        "annotateToolsGroupedItems",
        "divider-0.4",
        "stylePanelToggle",
        "defaultAnnotationUtilities"
      ],
      "type": "groupedItems",
      "justifyContent": "center",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "rectangleToolButton": {
      "dataElement": "rectangleToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateRectangle"
    },
    "ellipseToolButton": {
      "dataElement": "ellipseToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateEllipse"
    },
    "arcToolButton": {
      "dataElement": "arcToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateArc"
    },
    "polygonToolButton": {
      "dataElement": "polygonToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreatePolygon"
    },
    "cloudToolButton": {
      "dataElement": "cloudToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreatePolygonCloud"
    },
    "lineToolButton": {
      "dataElement": "lineToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateLine"
    },
    "polylineToolButton": {
      "dataElement": "polylineToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreatePolyline"
    },
    "arrowToolButton": {
      "dataElement": "arrowToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateArrow"
    },
    "shapesToolsGroupedItems": {
      "dataElement": "shapesToolsGroupedItems",
      "items": [
        "rectangleToolButton",
        "ellipseToolButton",
        "arcToolButton",
        "polygonToolButton",
        "cloudToolButton",
        "lineToolButton",
        "polylineToolButton",
        "arrowToolButton"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "shapesGroupedItems": {
      "dataElement": "shapesGroupedItems",
      "items": [
        "shapesToolsGroupedItems",
        "divider-0.4",
        "stylePanelToggle",
        "defaultAnnotationUtilities"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "rubberStampToolButton": {
      "dataElement": "rubberStampToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateRubberStamp"
    },
    "signatureCreateToolButton": {
      "dataElement": "signatureCreateToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateSignature"
    },
    "fileAttachmentButton": {
      "dataElement": "fileAttachmentButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateFileAttachment"
    },
    "stampToolButton": {
      "dataElement": "stampToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateStamp"
    },
    "insertToolsGroupedItems": {
      "dataElement": "insertToolsGroupedItems",
      "items": [
        "rubberStampToolButton",
        "signatureCreateToolButton",
        "fileAttachmentButton",
        "stampToolButton"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "insertGroupedItems": {
      "dataElement": "insertGroupedItems",
      "items": [
        "insertToolsGroupedItems",
        "divider-0.4",
        "stylePanelToggle",
        "defaultAnnotationUtilities"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "redactionToolButton": {
      "dataElement": "redactionToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateRedaction"
    },
    "pageRedactionToggleButton": {
      "dataElement": "pageRedactionToggleButton",
      "title": "action.redactPages",
      "type": "toggleButton",
      "img": "icon-tool-page-redact",
      "toggleElement": "pageRedactionModal"
    },
    "redactionPanelToggle": {
      "dataElement": "redactionPanelToggle",
      "type": "toggleButton",
      "img": "icon-redact-panel",
      "toggleElement": "redactionPanel",
      "title": "component.redactionPanel",
      "disabled": true
    },
    "redactionGroupedItems": {
      "dataElement": "redactionGroupedItems",
      "items": [
        "redactionToolButton",
        "pageRedactionToggleButton",
        "redactionPanelToggle",
        "divider-0.4",
        "stylePanelToggle",
        "defaultAnnotationUtilities"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "distanceMeasurementToolButton": {
      "dataElement": "distanceMeasurementToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateDistanceMeasurement"
    },
    "arcMeasurementToolButton": {
      "dataElement": "arcMeasurementToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateArcMeasurement"
    },
    "perimeterMeasurementToolButton": {
      "dataElement": "perimeterMeasurementToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreatePerimeterMeasurement"
    },
    "areaMeasurementToolButton": {
      "dataElement": "areaMeasurementToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateAreaMeasurement"
    },
    "ellipseMeasurementToolButton": {
      "dataElement": "ellipseMeasurementToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateEllipseMeasurement"
    },
    "rectangularAreaMeasurementToolButton": {
      "dataElement": "rectangularAreaMeasurementToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateRectangularAreaMeasurement"
    },
    "countMeasurementToolButton": {
      "dataElement": "countMeasurementToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateCountMeasurement"
    },
    "measureGroupedItems": {
      "dataElement": "measureGroupedItems",
      "items": [
        "distanceMeasurementToolButton",
        "arcMeasurementToolButton",
        "perimeterMeasurementToolButton",
        "areaMeasurementToolButton",
        "ellipseMeasurementToolButton",
        "rectangularAreaMeasurementToolButton",
        "countMeasurementToolButton",
        "divider-0.4",
        "stylePanelToggle",
        "defaultAnnotationUtilities"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "cropToolButton": {
      "dataElement": "cropToolButton",
      "type": "toolButton",
      "toolName": "CropPage"
    },
    "snippingToolButton": {
      "dataElement": "snippingToolButton",
      "type": "toolButton",
      "toolName": "SnippingTool"
    },
    "editGroupedItems": {
      "dataElement": "editGroupedItems",
      "items": [
        "cropToolButton",
        "snippingToolButton"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "addParagraphToolGroupButton": {
      "dataElement": "addParagraphToolGroupButton",
      "type": "toolButton",
      "toolName": "AddParagraphTool",
      "disabled": true
    },
    "addImageContentToolGroupButton": {
      "dataElement": "addImageContentToolGroupButton",
      "type": "toolButton",
      "toolName": "AddImageContentTool",
      "disabled": true
    },
    "divider-0.6": {
      "dataElement": "divider-0.6",
      "type": "divider"
    },
    "contentEditButton": {
      "dataElement": "contentEditButton",
      "type": "presetButton",
      "buttonType": "contentEditButton",
      "disabled": true
    },
    "contentEditGroupedItems": {
      "dataElement": "contentEditGroupedItems",
      "items": [
        "addParagraphToolGroupButton",
        "addImageContentToolGroupButton",
        "divider-0.6",
        "contentEditButton"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "crossStampToolButton": {
      "dataElement": "crossStampToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateCrossStamp"
    },
    "checkStampToolButton": {
      "dataElement": "checkStampToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateCheckStamp"
    },
    "dotStampToolButton": {
      "dataElement": "dotStampToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateDotStamp"
    },
    "calendarToolButton": {
      "dataElement": "calendarToolButton",
      "type": "toolButton",
      "toolName": "AnnotationCreateDateFreeText"
    },
    "fillAndSignGroupedItems": {
      "dataElement": "fillAndSignGroupedItems",
      "items": [
        "signatureCreateToolButton",
        "freeTextToolButton",
        "crossStampToolButton",
        "checkStampToolButton",
        "dotStampToolButton",
        "rubberStampToolButton",
        "calendarToolButton",
        "divider-0.4",
        "stylePanelToggle",
        "defaultAnnotationUtilities"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "signatureFieldButton": {
      "dataElement": "signatureFieldButton",
      "type": "toolButton",
      "toolName": "SignatureFormFieldCreateTool"
    },
    "textFieldButton": {
      "dataElement": "textFieldButton",
      "type": "toolButton",
      "toolName": "TextFormFieldCreateTool"
    },
    "checkboxFieldButton": {
      "dataElement": "checkboxFieldButton",
      "type": "toolButton",
      "toolName": "CheckBoxFormFieldCreateTool"
    },
    "radioFieldButton": {
      "dataElement": "radioFieldButton",
      "type": "toolButton",
      "toolName": "RadioButtonFormFieldCreateTool"
    },
    "listBoxFieldButton": {
      "dataElement": "listBoxFieldButton",
      "type": "toolButton",
      "toolName": "ListBoxFormFieldCreateTool"
    },
    "comboBoxFieldButton": {
      "dataElement": "comboBoxFieldButton",
      "type": "toolButton",
      "toolName": "ComboBoxFormFieldCreateTool"
    },
    "divider-0.7": {
      "dataElement": "divider-0.7",
      "type": "divider"
    },
    "formFieldEditButton": {
      "dataElement": "formFieldEditButton",
      "type": "presetButton",
      "buttonType": "formFieldEditButton"
    },
    "divider-0.8": {
      "dataElement": "divider-0.8",
      "type": "divider"
    },
    "formsToolsGroupedItems": {
      "dataElement": "formsToolsGroupedItems",
      "items": [
        "signatureFieldButton",
        "textFieldButton",
        "freeTextToolButton",
        "checkboxFieldButton",
        "radioFieldButton",
        "listBoxFieldButton",
        "comboBoxFieldButton",
        "divider-0.7",
        "formFieldEditButton"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "formsGroupedItems": {
      "dataElement": "formsGroupedItems",
      "items": [
        "formsToolsGroupedItems",
        "divider-0.8",
        "stylePanelToggle",
        "indexPanelListToggle"
      ],
      "type": "groupedItems",
      "grow": 0,
      "gap": 12,
      "alwaysVisible": false
    },
    "page-controls-container": {
      "dataElement": "page-controls-container",
      "type": "pageControls",
      "title": "component.pageControls",
      "icon": "icon-page-controls"
    },
    "newDocumentButton": {
      "dataElement": "newDocumentButton",
      "presetDataElement": "newDocumentPresetButton",
      "label": "action.newDocument",
      "title": "action.newDocument",
      "isActive": false,
      "type": "presetButton",
      "buttonType": "newDocumentButton"
    },
    "fullscreenButton": {
      "dataElement": "fullscreenButton",
      "presetDataElement": "fullscreenPresetButton",
      "label": "action.enterFullscreen",
      "title": "action.enterFullscreen",
      "type": "presetButton",
      "buttonType": "fullscreenButton"
    }
  },
  "modularHeaders": {
    "right-header-demo": {
      "dataElement": "right-header-demo",
      "placement": "right",
      "justifyContent": "start",
      "grow": 0,
      "gap": 12,
      "float": false,
      "stroke": true,
      "dimension": {
        "paddingTop": 8,
        "paddingBottom": 8,
        "borderWidth": 1
      },
      "style": {},
      "items": [
        "annotateGroupedItems",
        "shapesGroupedItems",
        "insertGroupedItems",
        "redactionGroupedItems",
        "measureGroupedItems",
        "editGroupedItems",
        "contentEditGroupedItems",
        "fillAndSignGroupedItems",
        "formsGroupedItems",
        "groupedRightHeaderEndButtons"
      ]
    },
    "left-header": {
      "dataElement": "left-header",
      "placement": "left",
      "justifyContent": "start",
      "grow": 0,
      "gap": 12,
      "float": false,
      "stroke": true,
      "dimension": {
        "paddingTop": 8,
        "paddingBottom": 8,
        "borderWidth": 1
      },
      "style": {},
      "items": [
        "menuButton",
        "leftPanelButton",
        "divider-0.1",
        "default-ribbon-group"
      ]
    }
  },
  "panels": {
    "comparePanel": {
      "dataElement": "comparePanel",
      "render": "changeListPanel",
      "location": "right"
    },
    "stylePanel": {
      "dataElement": "stylePanel",
      "render": "stylePanel",
      "location": "left"
    },
    "thumbnailsPanel": {
      "dataElement": "thumbnailsPanel",
      "render": "thumbnailsPanel",
      "location": "left"
    },
    "outlinesPanel": {
      "dataElement": "outlinesPanel",
      "render": "outlinesPanel",
      "location": "left"
    },
    "bookmarksPanel": {
      "dataElement": "bookmarksPanel",
      "render": "bookmarksPanel",
      "location": "left"
    },
    "formFieldPanel": {
      "dataElement": "formFieldPanel",
      "render": "formFieldPanel",
      "location": "right"
    },
    "indexPanel": {
      "dataElement": "indexPanel",
      "render": "indexPanel",
      "location": "right"
    },
    "layersPanel": {
      "dataElement": "layersPanel",
      "render": "layersPanel",
      "location": "left"
    },
    "signatureListPanel": {
      "dataElement": "signatureListPanel",
      "render": "signatureListPanel",
      "location": "left"
    },
    "fileAttachmentPanel": {
      "dataElement": "fileAttachmentPanel",
      "render": "fileAttachmentPanel",
      "location": "left"
    },
    "rubberStampPanel": {
      "dataElement": "rubberStampPanel",
      "render": "rubberStampPanel",
      "location": "left"
    },
    "textEditingPanel": {
      "dataElement": "textEditingPanel",
      "render": "textEditingPanel",
      "location": "right"
    },
    "signaturePanel": {
      "dataElement": "signaturePanel",
      "render": "signaturePanel",
      "location": "left",
      "disabled": true
    },
    "portfolioPanel": {
      "dataElement": "portfolioPanel",
      "render": "portfolioPanel",
      "location": "left",
      "disabled": true
    },
    "tabPanel": {
      "render": "tabPanel",
      "dataElement": "tabPanel",
      "panelsList": [
        {
          "render": "thumbnailsPanel"
        },
        {
          "render": "outlinesPanel"
        },
        {
          "render": "bookmarksPanel"
        },
        {
          "render": "layersPanel"
        },
        {
          "render": "signaturePanel"
        },
        {
          "render": "fileAttachmentPanel"
        },
        {
          "render": "portfolioPanel"
        }
      ],
      "location": "left"
    },
    "notesPanel": {
      "dataElement": "notesPanel",
      "render": "notesPanel",
      "location": "right"
    },
    "searchPanel": {
      "dataElement": "searchPanel",
      "render": "searchPanel",
      "location": "right"
    },
    "redactionPanel": {
      "dataElement": "redactionPanel",
      "render": "redactionPanel",
      "location": "right",
      "disabled": true
    }
  },
  "flyouts": {
    "MainMenuFlyout": {
      "dataElement": "MainMenuFlyout",
      "items": [
        "newDocumentButton",
        "filePickerButton",
        "fullscreenButton",
        "saveAsButton",
        "divider",
        "createPortfolioButton",
        "divider",
        "settingsButton",
        "divider"
      ]
    }
  }
}

```

{% endcode %}
{% endtab %}
{% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.apryse.com/web/get-started/samples/showcase-demo-modular-ui-customization.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.