> 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/ui-customization/modular-ui/getting-started.md).

# Get Started with WebViewer Modular UI

Enhance your WebViewer UI with WebViewer Modular UI. Customize or create a new UI using modular components like Containers and Items for a tailored user experience. Get started with ease by adding the

WebViewer Modular UI is a new way to customize the UI of WebViewer. It provides modular and reusable components which can be used to modify the default WebViewer UI or even create an entirely new WebViewer UI from scratch.

## Components

WebViewer Modular UI consists of two high-level components: Containers and Items. Everything in the UI can be categorized as one of these two things.

### Items

Items are the components that are placed inside containers. They are the building blocks of the UI and are used to create the content of the UI. Examples of items include Buttons, Ribbon Items, Dividers, and prebuilt components like View Controls and Zoom Controls.

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-cb5d896dea261321fff4f8a735f51e3d51be4607%2Fdb47bbd46fb34b24f2ba20fd6af539cf6b89563b-1001x336.png?alt=media)

### Containers

Containers are the top-level components that hold other components. They contain items and are used to create the structure of the UI. Examples of containers include Modular Headers, Grouped Items, and Flyout Menus.

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-d39200ad73becd31b9c843d08ab2f27714b62558%2F4934a55318053fd81c72db3d03d122f2e2e168fa-1001x359.png?alt=media)

Anything that is an Item can be placed inside a Container. Containers can also be placed inside of other Containers (with some restrictions). This allows for a high level of customization and flexibility in the UI.

### The Default UI

The following diagram shows how all the default UI components are structured in WebViewer Modular UI.

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-25a40bc2eec114d3abacc31bf51fb3874e5b61fc%2Fac47aa20e802b25fd62064d1ababcab2c103770e-1632x1021.png?alt=media)


---

# 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/ui-customization/modular-ui/getting-started.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.