StatusQ: UI component library for Web3 apps

StatusQ is an emerging reusable QML UI component library for Status applications, licensed under MPL2.0. So what does that mean?

Let's start backwards. The Mozilla Public License 2.0 means—basically (this is not legal advice) that StatusQ can be reused and modified, with some specific exceptions regarding commercialization of the source code. StatusQ is used primarily in Status Desktop, but can be used in other projects as well.

Here is a screenshot of the StatusQ sandbox, showing a library of components (left side) and variants of those components (right side).

To understand StatusQ, we can consult the documentation or roadmap, but for an overview we should first have some familiarity with Qt Meta-Object Language, or QML [1]. QML is a programming language used to specify user interfaces in the Qt framework, one of the most popular UI development toolkits. QML is used in Ubuntu Phone/Ubuntu Touch, KDE Plasma 4 & 5, LG's webOS, and many other user-facing applications.

To build a UI with QML, components are defined and later reused (ideally). For example, in Status applications we may want to display multiple icon SVG files with the same general properties, or include multiple buttons that have the same interactions with a user’s mouse activity. (To learn more about QML, check out their docs!)

Thanks to the QML definitions of the StatusIcon and StatusBaseButton components, we only have to define these properties/behaviors once, despite being able to use them in multiple places.

If you’re familiar with the composition design pattern, or general programming, you likely know the adage "don't repeat yourself" or DRY. This principle applies just as well for design! And thanks to StatusQ, we don't have to deal with multiple definitions for reusable components.

Why StatusQ?

During the early stages of Status Desktop's UI, our developers were learning as they went about QML and Qt. This led to some legacy code and components that weren’t necessarily using the best practices, and weren’t always built in a particularly reusable way. We were also still figuring out a proper design system. In short, the codebase could have been in better shape—and is, now!

The StatusQ library was created in April 2021 to embody better design and programming practices, and the decision that StatusQ would be a separate library was made for a few reasons.

Decoupling it from Status Desktop—where it was originally used—meant that StatusQ could iterate on its own schedule, unhindered by the release cycle and development process of the larger Status Desktop project. This also allows the Status Desktop team to focus purely on the desktop application, without having to worry about whether components exist or work as expected.

And of course, Status Desktop is just one of many projects that may want to use pre-built components. Status supports open source software.

What makes StatusQ special?

StatusQ includes a sandbox application that serves as documentation, playground, and testing suite for StatusQ components. It also includes a demo UI which is essentially a more-static version of the Status Desktop front-end. This allows developers to experiment with components in a pseudo-real setting, and to see how components are combined to create the Status Desktop UI. In this case, it’s easier to show than tell, so here is an example from the application:

Here is a screenshot of the StatusQ sandbox, showing a facsimile of a Status Desktop view in light mode, with OSX look-and-feel.

StatusQ is still being actively developed, and we have plans to make it even better. For example, the sandbox will eventually support automated end-to-end testing, and may even be hosted online for easier use.

Dark mode!

Footnotes

[1] This might not be the abbreviation you’re familiar with, as Wikipedia refers to “Qt Modeling Language” and qml.guide calls it “Qt Markup Language”, and Qt Meta-Object Language comes from wiki.qt.io.