---
layout: default-layout
needAutoGenerateSidebar: true
needGenerateH3Content: true
noTitleIndex: true
title: Dynamsoft Document Viewer User Interface - Customize UI Dynamically
keywords: Documentation, Dynamsoft Document Viewer, User Interface, Customize Dynamically
breadcrumbText: Update UI Dynamically
description: Dynamsoft Document Viewer Documentation User Interface How to Customize UI dynamically 
permalink: /ui/customize/dynamically.html
---


# Update UI dynamically after creating the viewer

Sometimes, dynamically changing the layout is required, such as hiding specified elements or modifying the available status of elements under certain conditions. `getUiConfig()` and `updateUiConfig()` can help to achieve these requirements.

## Use case

Hide the header dynamically.

- Step one: Get current `UiConfig` by using method `getUiConfig()`.
    ```typescript
    const editViewer = new Dynamsoft.DDV.EditViewer({
        container: "viewer",
    });
    const uiConfig = editViewer.getUiConfig();
    ```
- Step two: Remove the header from current `UiConfig`.
    ```typescript
    uiConfig.children.splice(0,1);
    ```
- Step three: Update the revised UiConfig by using method `updateUiConfig()`.
    ```typescript
    editViewer.updateUiConfig(uiConfig);
    ``` 

![Update UI dynamically](/document-viewer/docs/assets/imgs/uidynamically.png)

## Related API

- [`getDefaultUiConfig()`](https://www.dynamsoft.com/document-viewer/docs/api/namespace/ddv.md#static-getdefaultuiconfig)
- `getUiConfig()` in 
    - [EditViewer Class](https://www.dynamsoft.com/document-viewer/docs/api/class/editviewer.md#getuiconfig)
    - [CaptureViewer Class](https://www.dynamsoft.com/document-viewer/docs/api/class/captureviewer.md#getuiconfig)
    - [PerspectiveViewer Class](https://www.dynamsoft.com/document-viewer/docs/api/class/perspectiveviewer.md#getuiconfig)
    - [BrowseViewer Class](https://www.dynamsoft.com/document-viewer/docs/api/class/browseviewer.md#getuiconfig)
    - [CustomViewer Class](https://www.dynamsoft.com/document-viewer/docs/api/class/customviewer.md#getuiconfig)
- `updateUiConfig()` in
    - [EditViewer Class](https://www.dynamsoft.com/document-viewer/docs/api/class/editviewer.md#updateuiconfig)
    - [CaptureViewer Class](https://www.dynamsoft.com/document-viewer/docs/api/class/captureviewer.md#updateuiconfig)
    - [PerspectiveViewer Class](https://www.dynamsoft.com/document-viewer/docs/api/class/perspectiveviewer.md#updateuiconfig)
    - [BrowseViewer Class](https://www.dynamsoft.com/document-viewer/docs/api/class/browseviewer.md#updateuiconfig)
    - [CustomViewer Class](https://www.dynamsoft.com/document-viewer/docs/api/class/customviewer.md#updateuiconfig)