This is a shortened version of the article. A link to the full version, including the Java examples and Quill connector code, is available at the bottom of the page.
 

We tested Jmix as an alternative to traditional Spring while building a news section for a GameDev project. The section needed a block-based content system in which different types of blocks could be created, configured, and arranged on the same page. Jmix didn’t provide this functionality out of the box, so we implemented it manually.
 

The development formed part of our work on the corporate website for Belka Games, a mobile game development company whose games have more than 100 million players. The wider project covered analytics, creative concept, prototypes, UX/UI design, frontend and backend development, and QA. Its technology stack included React, Next, TypeScript, SCSS, Jmix, Java Spring Boot, PostgreSQL, and Gradle.

Why we chose Jmix

Jmix is an open-source Java platform for rapid enterprise application development and the successor to the CUBA Platform. It includes visual editors, code generators, database migration tools, and other built-in modules. Since it’s based on Spring Boot, Java developers can continue working with a familiar technology stack, connect third-party libraries, and build the backend and UI within one framework.
 

Jmix Studio is an IntelliJ IDEA plugin that adds visual development tools to the platform. It supports project setup, data model generation, database migration configuration, and visual screen and form building. Manual coding can be combined with visual editing, which was one of the main reasons we chose Jmix for the project.

Building the block-based news section

The news section had to support several types of content within a single page. These included rich text, privacy terms, code, quotes, images with captions, game screenshots, game features, company values, benefits, and games.
 

At the center of the structure was the ContentBlock interface with a type field. Each block implemented this interface, defined its own type, and stored the data it required. For example, the rich-text block contained its type, label, and content.
 

We created a separate visual component for every block type to make data entry easier. Inside the component, each block was treated as a separate state that could be edited and saved. The components also included buttons for changing the order of blocks within the container.
 

To store the content, we used a JsonObject mapped to a Java class. When the page was saved, the application collected the states of all blocks, combined them into an array, and saved the result in a table field. This gave us a flexible system in which each material could be assembled from the required blocks.
 

The block editor was one part of the wider Belka Games website project. The visual direction used a coral palette on a light background, black accents, and playful typography to reflect the character of the gaming company. The design and development context is available in the Belka Games case study.

Integrating Quill with Jmix

After implementing the block structure, we needed an editor for text blocks used in news, job postings, and other sections. The standard Jmix RichTextArea wasn’t sufficient for the project, so we integrated the external Quill editor through the JavaScript Component mechanism.
 

The integration required us to declare the component in the XML screen descriptor, connect the local JavaScript files and styles, create a JavaScript connector, and add the component variable and callable methods to the Java class. The connector initialized Quill and defined the available formats and toolbar controls, including headings, bold and underlined text, ordered and unordered lists, alignment, links, right-to-left text direction, and formatting cleanup.
 

When text was changed by a user, the connector passed the plain text, Quill Delta, and generated HTML to the component’s valueChanged method. The connector also included a setValue method that converted HTML into Delta and loaded it into Quill. The result was a visual editor with a configurable toolbar whose buttons could be removed or rearranged depending on the project’s requirements.

When Jmix is useful

Jmix is suitable for projects that require an admin panel, UI editor, or corporate web application to be built from scratch. Since it’s based on Spring Boot, Java developers can work with familiar architecture and libraries while using Jmix Studio for project setup, data models, migrations, screens, and forms.
 

In our case, Jmix gave us the tools to build both the application backend and its editing interface within the same framework. The block system and Quill integration still required custom development, but the platform supported the surrounding application structure.
 

The Belka Games website combined this backend work with React, Next, TypeScript, and SCSS on the frontend. More of our GameDev interfaces and visual work can be found on Red Collar’s Dribbble.