Jmix Frontend UI is an alternative to the Backoffice UI. Whereas Backoffice UI is designed primarily for internal (back-office) users, Frontend UI is targeted for external users and is more flexible in terms of layout customization. It also uses different technologies which are more familiar to frontend developers, and allows easy integration of UI libraries and components from vast JavaScript ecosystem. However, it requires better knowledge of modern frontend stack.

Frontend UI is powered by React, but you can also use a different framework (such as Angular or Vue): you can use a framework-agnostic TypeScript SDK for that.

We provide several tools and libraries that you can use in order to build your Frontend UI application (or frontend client as we call it).

Jmix Studio

Jmix Studio can generate a starter app and add the pieces you need such as entity browser and editor screens. Studio uses @haulmont/jmix-front-generator library for code generation.

Component and Utility Libraries for React

There are two libraries for React powered frontend clients that are both used in the code generated by the Studio and can be utilized on its own. One is Jmix React Core which is responsible for core functionalities such as working with entities. The other is Jmix React UI which contains the UI components. It uses Ant Design UI kit and is used by the React client. Both libraries are available as npm packages: @haulmont/jmix-react-core, @haulmont/jmix-react-ui.

Jmix REST library

Jmix REST is a library that handles the interactions with Generic REST API. Frontend clients use Generic REST API to communicate with the backend. However, you don’t have to manually send the requests from your code. If your frontend client is based on React then Jmix React Core components will often handle this communication for you utilizing Jmix REST under the hood. If you are using a different framework or need more flexibility, you can use Jmix REST directly. Jmix REST is available as an npm package @haulmont/jmix-rest.

TypeScript SDK

TypeScript SDK is generated by the Studio as part of the starter application and is a TypeScript representation of project’s entities, fetch plans and facades to access REST services. The SDK can be used to develop a frontend client using your favorite framework as well as for Node.js-based BFF (Backend for Frontend) development.