Utilizing UI kits in Weavy

Apr 28, 2023

At Weavy our mission has been to provide developers with the building blocks they need to add functionality to their app quickly and easily. In the past I’ve gone on at length about our APIs and environments, but they’re only part of how our products operate. To get the complete picture of how Weavy integrates with your app, we need to take a deeper look at one of the most important building blocks we offer: UI Kits.


What are UI Kits?

A UI Kit (short for user interface kit) is a package of files designed to expedite the development of a user interface. UI Kits typically include important components such as fonts, CSS or HTML stylesheets, and graphical elements such as containers, input controls, navigation controls, and icons. Most UI kits, such as those offered by Weavy, are compiled for specific programming libraries such as JS and React.


Weavy’s UI Kits work in tandem with a universal Weavy theme library, and taken as a whole they contain the elements required to seamlessly integrate the UIs of our Chat, Files, and Feeds APIs, the code required to make them operate, as well as the tools and documentation required to customize them to better match your app’s appearance. 


Picking the right UI kit for you

In the past Weavy utilized something we called a Drop-In UI, which was essentially a window that existed in host apps to render content from the backend. While this approach ensured compatibility with numerous types of apps, its performance was less than stellar. UI Kits helped solve this problem. 


One of the biggest benefits of UI Kits is that they allow developers to add Weavy’s functionality with components that have been specially designed to be compatible with the programming library they built their app in. Put simply, having library native components means much faster performance and a much more satisfying user experience. For this reason, we always encourage developers to pick the right UI kit for their app as soon as possible.


At the time of writing Weavy offers two UI Kits, one built for React, and one built for JavaScript. The JavaScript UI kit is designed to be a generic “jack of all trades” UI kit that can be compatible with most programming libraries. The trade off with this jack of all trades is that it is indeed a master of none, and employs a rendering technique very similar to our old Drop-in UI. But for developers using React, they can expect a highly tailored experience from the React UI Kit.


In the future, we’re looking forward to announcing new UI kits for other programming libraries, including mobile libraries and SDKs, as well as a new generic UI kit that should address the performance trade offs of the JavaScript UI kit. So once you’ve picked the UI Kit that’s right for you, it’s a simple matter of installing it via your favorite package manager, configuring the settings to connect it to the API, and conforming the stylesheet with the stylesheet of your app.


Always open source

Of course, for developers who want a truly customized experience, or wish to learn how to build their own custom UI kit for the library of their choice, we have made all of our UI kits available completely open source under the MIT license, completely free to use with attribution. We believe that a huge part of giving back to the developer community is to help educate incoming members. Allowing for developers to look at our code, learn from our experience, or even fix our mistakes, is a crucial educational tool that we will continue to provide.


Share this post