---
layout: default-layout
needAutoGenerateSidebar: true
needGenerateH3Content: true
noTitleIndex: true
title: Dynamsoft Document Viewer API Reference - Interface UiConfig
keywords: Documentation, Dynamsoft Document Viewer, API Reference, Interface UiConfig
breadcrumbText: Interface UiConfig
description: Dynamsoft Document Viewer Documentation API Reference Interface UiConfig Page
permalink: /api/interface/uiconfig.html
---

# UiConfig

## Syntax

```typescript
interface UiConfig {
    type: string; 
    flexDirection?: string; 
    id?: string; 
    className?: string; 
    style?: CSSStyleDeclaration;  
    tooltip?: string; 
    events?: Record<string, string>;
    children?: (UiConfig | string)[]; 
}
```

## Attributes

### type

The type of the element.

Supported value: `Dynamsoft.DDV.Elements.Layout`, `Dynamsoft.DDV.Elements.Button` and [built-in elements](https://www.dynamsoft.com/document-viewer/docs/ui/default_elements.md).

### flexDirection

The flexDirection of the element. Only takes effect when [`type`](#type) is `Dynamsoft.DDV.Elements.Layout`.

Supported value: `column`, `row`

Default value is `row`.

### id

The id of Dom Element. If it is not specified, a random string will be generated.

### className

The className of CSS.

### style

The style which will cover CSS.

### tooltip

The tooltip of the element. Only takes effect when [`type`](#type) is `Dynamsoft.DDV.Elements.Button` and [built-in elements](https://www.dynamsoft.com/document-viewer/docs/ui/default_elements.md).

### events

The event of the element. Only takes effect when [`type`](#type) is `Dynamsoft.DDV.Elements.Button` and [built-in elements](https://www.dynamsoft.com/document-viewer/docs/ui/default_elements.md).

### children

Only takes effect when [`type`](#type) is `Dynamsoft.DDV.Elements.Layout`.

## Related

- [`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)