go back Back

User Interface Refactor

28 Aug 2023 Oliver

The InvenTree development team is thrilled to share some exciting news about the ongoing efforts to significantly overhaul our user interface. To provide a major facelift to InvenTree, we are migrating our entire user interface to the React framework.

A Brief History

The InvenTree software project started as a pure server-side app, with the pages rendered on the server using html template files, via the Django template engine. As the amount of data handled by InvenTree increased, this approach very quickly became untenable, with page loading times slowing noticeably.

A significant milestone came with the introduction of the REST API (we use the Django Rest Framework). Now, the user interface could be separated from the data, which allowed some great improvements to the user experience. Now, content could be loaded dynamically via the API, and rendered on the client side using javascript.

While various improvements have been made, and new features implemented, this has been how the InvenTree user interface has functioned for a number of years. Functionality (and code) has grown somewhat organically, and without much in the way of an overarching design strategy.

A lot of the user interface is still dynamically rendered on the server, with the “gaps” filled in by the client (via API calls). This approach has some drawbacks:

So, it’s time for a clean break! Moving to a modern UI framework is a daunting task, but with some very clear benefits and provides a path into the future.

Design Goals

The primary design goal for our refactor is to render the entire user interface dynamically, using React. To achieve this, we have to implement the following:

Update API

As it stands, the API currently provides the majority of required data to various interfaces, including the web interface, mobile app, and any third party integrations. However there are some data which are not currently accessible via the API, and rendered on-demand by the server. So, we need to ensure that all displayed data are available via API endpoints.

Reimplement UI

Every single page / view needs to be rewritten in React. While this is a lot of work, it will be significantly less work than it took to originally write it all in javascript. We can leverage the reusable components and design patterns provided by React to significantly reduce code duplication. Additionally, there are already a lot of “common” interface patterns (such as data tabulation) used in InvenTree which should cut down the required work.

Test Everything

A big advantage of moving to a modern UI framework is the ability to enhance our unit testing. Currently, while the server code has good code coverage, the front-end code has very little. Our move to React will include a focus on test driven development, to ensure that our front-end is as bug free as is reasonably possible.


There are a number of significant advantages that this refactor will afford:

Release Timeline

Currently, the “master” branch of InvenTree ships with the “legacy” interface, and the new interface (which we have codenamed “platform”). We will be shipping both interfaces side-by-side while we work on the development.

When the new interface is ready to be released, we will have a clean break, with the old interface removed entirely.

Our aim is to have the entire user interface rewritten by the end of the year. Ideally, with developer assistance we could have it done sooner!

You can track the progress of these tasks here - https://github.com/inventree/InvenTree/issues/5212

Distributing the Interface

The intent for distributing the UI is to bundle a set of compiled javascript files with the installer. This means that the install / upgrade process is seamless for users:

Developers will need to install the required development packages to build the user interface on their machine. This is managed by our requirements files.

Interface Preview

The new interface is currently shipping in the “master” branch of InvenTree, and can be accessed at the /platform/ URL. This is very much a work in progress, but is useful for users or developers who wish to see the progress of the overhaul, or (even better) help us develop it.

You can see the latest version on the demo site, at https://demo.inventree.org/platform/

Development Assistance

One major goal of the refactor is to attract more developers by using a well-established modern framework. If you would like to contribute to the new interface, please raise a PR over on our GitHub page.