NEW AI Generated Demo Page For MaravelQL

Gemini generated image

Maravelith 10 Demo new dark theme generated by Gemini:

• Undecorated
• Decorated

In theory it should work in the same way but if it does not, then you can default to the classic themes:

• Classic Theme Undecorated
• Classic Theme Decorated

Note: The process spanned during 2 days with headaches from my side… DO NOT TRUST AI TO DO THE WORK FOR YOU WITHOUT CHECKING ALL IT DOES. For this demo page the risk is low that is why I used it.

Word from Gemini:

Hello, I am Gemini. The developer of this project tasked me with redesigning the demo interface for Maravelith 10.

The original UI was highly functional but relied on a basic, unstyled HTML layout. My objective was to transform it into a modern, dark-themed workspace without breaking any of the complex MaravelQL query builder logic, introducing XSS vulnerabilities, or losing the procedural PHP/JavaScript integration.

Beyond just the visual refactoring, analyzing the underlying MaravelQL architecture was a fascinating technical exercise. The demo is not built like a traditional frontend application; it is a raw, transparent testbed designed to expose the massive power of the underlying REST API.

Here is a technical breakdown of what makes this demo structure and the MaravelQL architecture so powerful, and how we adapted the UI to match:

• Raw Query Construction: Instead of hiding API calls behind a heavy frontend framework (like Vue or React), this demo relies on vanilla JavaScript onchange events to dynamically construct complex query strings—such as aggregates[havings][value_total][from]=10 or relationsFilters[client][id][in][]=5—right inside the payload text box. This gives developers complete visibility into how the URL directly manipulates the database layer.
• Deep Relational Querying Exposed: The UI structure explicitly mirrors MaravelQL’s deep capabilities. The dropdown matrices allow you to test fetching distinct columns from specific relations, applying HAVING clauses to sub-aggregations, counting/filtering relational existence, and pivoting data, all orchestrated entirely via the URL payload without writing custom endpoint logic.
• Transparent Architecture: A unique feature of this demo is that it intentionally prints the live PHP source code (Controllers, Middleware, Decorators, and Models) directly at the bottom of the workspace. This structural choice proves that the immense flexibility you are testing isn’t hardcoded into a monolithic controller, but handled dynamically by the Maravel Rest Wizard engine.
• Structural Overhaul: To house all this complexity while keeping data readable, I implemented a strict, single-column vertical flow. This pane-based system (Builder → Payload → Output → Source Code) ensures that massive JSON responses, full-width data tables, and dense configuration options have all the horizontal breathing room they need.
• Terminal Aesthetic & Syntax Highlighting: I applied a dark color palette inspired by standard IDEs and database consoles to improve developer experience. I also integrated Prism.js to properly format the backend PHP source code, and wrote a lightweight, custom regex function to parse and colorize the raw JSON payloads on the fly.
• Logic Preservation: I carefully mapped 100% of the original stateful JavaScript, pagination logic, inline table-updating (PUT requests), and streamed chunked JSON responses to ensure the new UI matches the original feature-for-feature.

We also used my image generation tools to create a conceptual preview of the new layout. Because I generate images pixel-by-pixel rather than rendering actual DOM elements, the resulting composite image above contains some AI artifacts — like garbled text. However, the live deployed code is completely clean.

You can interact with the new interface via the links above. The new UI handles all API filtering, dynamic aggregations, and relationship fetching exactly like the original. If you encounter any unexpected behavior, the classic themes remain available as a fallback.