Apryse Innovation Days: WebViewer UI, Making it Your Own!

Summary: The time has come to announce the first-place finisher of Apryse 2024 Innovation Days. Our third blog in this series looks at team Project Capybara and their solution to battle cumbersome UI customization. 

At Apryse, innovation is core to what we do, and our Apryse Innovation Days event showcases this commitment. Developers from across our organization are empowered to unleash their creativity, challenging each other to create impactful updates and enhancements to our products. This collaborative effort drives the future of document processing. 

The wait is over! In the third blog covering our recent Innovation Days winners, we’re excited to announce our first-place finisher team Project Capybara, which included Armando Bollain, Carlo Mendoza, Conrad Presch, and Dandara Navarro.

Team Project Capybara presented a UI (user interface) customization option which benefits anyone who uses WebViewer. With an intuitive workflow and no learning curve, this is perfect for even those with limited technical knowledge. Let’s take a look.

First, what is WebViewer?

WebViewer is a customizable JavaScript-based document SDK (software development kit) that enables you to view, convert, edit, annotate, and collaborate in real-time on PDFs, documents, images, and more.

Usually embedded in web applications, WebViewer requires no extra software to use it and is compatible with all developer frameworks and browsers, supporting 30+ file formats.

Now let’s look at the problem.

Everyone likes having the option to customize, from changing the color scheme for a more comfortable viewing experience to removing unused items from toolbars.

In 2024, WebViewer introduced modular UI, which organizes UI elements into items and containers, allowing users to edit the UI through a UI config file. This is great, right? Yes and no. You see, this config file has over 1,000 lines of code, making customizing the UI cumbersome including a lot of trial and error.

This is where team Project Capybara came to the rescue with their 2025 Innovation Days submission.

By integrating dnd kit, an open source drag and drop toolkit, WebViewer's modular UI items and containers can now be easily moved. These edits are reflected in the modular UI config file, making it easy to export the new design.

This new level of UI customization through team Project Capybara’s submission for a UI Design Mode is truly impressive and a definitely welcomed feature.

Team Project Capybara’s journey to first place in our 2025 Innovation Days didn’t come without careful thought and consideration to making a solution that’s right for everyone. The team stated – "We want non-technical users to be able to quickly customize the UI to match their desired workflows."

The team put a lot of thought into making the data easy to work with and making the data structures the driving force behind the modularity of the UI model. Armando noted – “This allowed us to then explore the idea of taking that further and creating a new way to customize the UI with a simple drag and drop workflow. The challenge then was exploring the available frameworks for enabling drag and drop functionality and see how they would mesh with our data structure.”

After researching various packages, the team eventually settled on dnd kit for its straightforward API and focus on keyboard accessibility.

The team thought they really synched and worked well together during this journey of creating an easy-to-use UI Design Mode for WebViewer and went on to say they felt they could have achieved even more if they had more time.

Congratulations team Project Capybara!

Over the past three blogs in our Innovation Days series, we’ve showcased this year’s top three teams of creative and talented individuals we are truly lucky to have as part of Apryse. We’re not done yet though! Next up is our look into what the future holds with document processing trends and predictions for 2025. Stay tuned!

Note: The projects covered here and in the other Innovation Days blog posts are not currently in product development. They are prototypes created specifically for this event. If you'd like to request the features you see here, you can fill out this form. Or, feel free to reach out to your CSM directly.