> 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/advanced-customization.md).

# Advanced UI customization

Enhance your UI with advanced customization options. Learn how to tweak, test, and deploy the WebViewer UI to suit your needs. The Apryse Web SDK streamlines secure, serverless document processing wit

Built in React, the [WebViewer UI](https://github.com/ApryseSDK/webviewer-ui/) provides a great developer experience for anyone interested in the source code. You can make adjustments of your own, run it to test, and build it to deploy.

<a href="https://github.com/ApryseSDK/webviewer-ui" class="button primary">View on GitHub</a>

## Folder structure

{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}

```sh
src/
  apis/            - APIs exposed in myWebViewer.getInstance()
  components/      - React components
  constants/       - JavaScript or CSS constants
  core/            - APIs from the Core
  event-listeners/ - Listeners for the Core events
  helpers/         - Reused functions
  redux/           - Redux files for state managing
  hooks/           - Custom React hooks
```

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

## Working with the public repo in Github

For a better developer experience, we have open sourced the project in [Github](https://github.com/ApryseSDK/webviewer-ui/). It allows you to keep track of your changes better or sync with future versions easier.

### Forking and linking

A fork is a copy of a repository. Forking a repository allows you to freely experiment with changes without affecting the original project. To fork and sync with Apryse's webviewer-ui repo, follow these steps:

1. Go to [https://github.com/ApryseSDK/webviewer-ui](https://github.com/ApryseSDK/webviewer-ui/).
2. In the top-right corner of the page, click **Fork**.
3. Open terminal and navigate to your destination folder.
4. Run the following:

{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}

```sh
git clone https://github.com/YOUR-USERNAME/webviewer-ui
cd webviewer-ui
git remote add upstream https://github.com/ApryseSDK/webviewer-ui
```

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

See [Forking a repo](https://help.github.com/articles/fork-a-repo/) for more information.

### Switching branches

The default branch of the repo is the latest stable WebViewer version. For example, if the default branch is `7.1`, then it means the latest official WebViewer version is `7.1`.

You should switch the branch to be the WebViewer version you are currently using for your application. For example, if you are using WebViewer `7.0` then you should switch to the `7.0` branch and modify the code there. If you are using the legacy UI, then you need to switch to `legacy/7.0` instead.

Code in the `master` branch is considered to be experimental and is not safe to be used in production. Generally we don't recommend that you modify the code in the `master` branch.

### Running

To run the project,

1. Go to your forked `webviewer-ui` repo
2. Run `npm install`
3. Run `npm run download-webviewer`
4. Run `npm start`

### Building

To build the source files into `webviewer-ui.min.js`,

1. Run `npm run build`

### Syncing the fork

When you want to merge any changes from the original Apryse's webviewer-ui repo, follow these steps:

1. Open terminal and navigate to the forked `webviewer-ui`
2. Run the following:

{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}

```sh
git fetch upstream master
git checkout master
git merge upstream/master
```

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

See [Syncing a fork](https://help.github.com/articles/syncing-a-fork/) for more information.

### Making pull requests

If you want your changes to be implemented into Apryse's webviewer-ui so that they are available in future releases, see [Creating a pull request](https://help.github.com/articles/creating-a-pull-request-from-a-fork/).

## Apply changes in your app

After `npm run build`, copy all the files in the `webviewer-ui/build` folder to the `lib/ui` folder in your app. Restart your app and you should see the new changes. You can write a script to automate this process.


---

# 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/advanced-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.