How I used AI to develop a Jahia module in JavaScript in record time

Accelerate front-end development on Jahia with AI, drawing inspiration from existing projects

Since version 8.2, Jahia has opened up an exciting new avenue for front-end developers: the ability to create modules entirely in JavaScript (TypeScript/React). This major development means that you no longer need to be a Java expert to build rich, integrated experiences on the platform.
Jahia's philosophy is clever: rendering is mainly done on the server side (Server-Side Rendering) using JavaScript helpers to access the Jahia context and JCR (content repository) data. Then, thanks to a selective hydration mechanism called “Island Architecture,” components can become interactive on the client side. This gives developers complete freedom to animate their front-end while maintaining optimal performance.

The starting point: the reference project ‘jahia-luxe-demo’

To demonstrate the power of this new approach, the Jahia teams have made a comprehensive reference site available: ‘Jahia-luxe-demo’. This project is available on GitHub (https://github.com/Jahia/luxe-jahia-demo), simulates a luxury real estate listing site. It is a gold mine for understanding best practices in JavaScript development on Jahia.

Inspired by this demo, I set myself a challenge: to use code AI to recreate a similar front-end, but for ads between individuals. The basic mechanism (display, search, filters) is very similar, but the types of content are completely different.

Context is king: giving AI the keys to the kingdom

One of the most important factors for success when working with AI to generate code is its ability to understand the full context of the application. In my case, this meant two things:
1.  The AI needed access to the entire source code of my new application, which I named ‘ClassifiedAds’.
2.  More importantly, it had to be able to actively draw inspiration from the ‘Jahia-luxe-demo’ code.

To do this, I set up a simple but effective local development environment with VSCode:
* I cloned the ‘Jahia-luxe-demo’ repository.
* At the same level in my file tree, I created the project for my ‘ClassifiedAds’ module.

This structure allowed the AI assistant (in my case, a Codex/Copilot-type tool) to “see” and analyze both projects simultaneously.
To start a Jahia Javascript module, follow the tutorial: https://academy.jahia.com/tutorials-get-started/front-end-developer/introduction

Step one: define the content model with AI

The first task was to ask the AI to generate the definition for my ‘ClassifiedAd’ content type (a classified ad). To guide its creativity, I asked it to draw inspiration from the well-known schema.org standard. In a matter of seconds, I had a structured and relevant content definition, ready to be integrated into Jahia.

The reactor core: replicating the search and display logic

The main challenge was to reproduce the faceted search functionality found in Jahia-luxe-demo. In this project, the components that interested me most were:
* ‘Estate’: The detailed view of a property.
* ‘SearchEstate’: The search component that executes a GraphQL query with filters to refine the results.
I then used a very direct prompt in my editor, specifying the local paths of the files to be analyzed:

> “Explore ‘../jahia-luxe-demo/packages/template-set/src/components/Estate’ and ‘SearchEstate’. Take inspiration from them and apply the same logic to my ‘ClassifiedAds’ component. Consider the following properties as search facets: ‘category’, ‘condition’, ‘type’, ‘availability,’ and ‘price.’”

The result was spectacular. The AI:
1. Analyzed the structure of the React components in the demo.
2. Understood how the GraphQL query was dynamically constructed from the selected filters.
3.  Generated a new ‘SearchClassifiedAds’ component and associated views (server and client), adapting the logic to the new facets I had provided.
The foundation of my application was now solid, (https://github.com/smonier/classifiedads) directly modeled on the reference implementation provided by Jahia experts.

Conclusion: a new era of productivity

This experiment demonstrates a paradigm shift. By providing AI with rich and relevant context (in this case, a high-quality reference project), it is possible to go beyond simply generating code snippets to assemble complex features in record time.
The role of the developer is evolving: they are becoming architects who guide AI, validate its proposals, and iterate quickly to refine the final product. For developments on platforms such as Jahia, this approach is incredibly powerful. It allows developers to quickly adopt best practices and focus on adding business value rather than rewriting complex logic.