JaVaDe26

A modern Vaadin UI Designer — build user interfaces visually, persist them in MongoDB, preview in real time, and generate production-ready Java code.

Spiritual successor of JaVaDe (Java Vaadin Designer), rebuilt from scratch with a modern stack and a minimal, rigorous architecture.

---

What it does

JaVaDe26 lets you design Vaadin UIs in the browser:

• Drag & drop components from a palette onto a hierarchical tree
• Configure properties for each component — values are discovered via reflection, grouped by category (Content, Size, State, Style, Validation, Behavior)
• Live preview renders your design as real Vaadin components, with click-to-select linking
• Expand ratios — slider-based flex-grow control for each child in a container, with configurable max and auto-sizing
• CSS editor — inline custom CSS per component, applied in preview and generated in code
• Icon selector — dropdown with all VaadinIcon values, with live icon preview
• Theme support — Light, Dark, Compact, Dark Compact — persisted per project, with dark theme CSS overrides
• Generate Java code — three export options:
  • Source JAR with pom.xml, README, and all Vaadin/Quarkus dependencies
  • Sources ZIP with only Java files
  • AI Markdown — generic, framework-agnostic UI specification for AI consumption
• REST API — all exports available via REST endpoints with OpenAPI/Swagger UI at /q/swagger-ui
• Configurable package — set the base package per project, used in generated code
• Preview width control — slider (200-2000px) with full-width toggle, centered with dotted border, persisted per project
• Component icons — each component type has a descriptive VaadinIcon in palette and tree
• Split layout persistence — panel positions saved in cookies, restored on reload
• Smart persistence — only non-default property values are stored in MongoDB
• Project versioning — create new versions (deep clone) of any project; latest shown by default, all versions accessible via toggle
• Name filter — search projects by name with instant filtering
• Sortable columns — sort projects by creation date
• MCP API — full CRUD API for AI agents at /api/mcp (projects, nodes, components, code generation)
• Sample projects — "Generated Form" and "Dashboard Example" (Grid + TabSheet + Accordion) auto-created on first startup

Stack

Layer	Technology	Version
Runtime	Java (GraalVM)	21
Framework	Quarkus	3.28
UI	Vaadin Flow	25.0
Database	MongoDB	7.x
Build	Maven	3.9+

Architecture

com.javade26/
    model/          Project, ComponentNode, ComponentProperty
    registry/       ComponentDescriptor, VaadinComponentRegistry
    persistence/    ProjectRepository, ComponentNodeRepository,
                    MongoCodecConfig, MongoIndexInitializer,
                    SampleDataInitializer
    service/        DesignerService
    codegen/        CodeGenerator (facade),
                    JavaCodeGenerator, MarkdownGenerator,
                    CodeGenUtils
    rest/           ExportResource (REST API + OpenAPI),
                    McpResource (MCP API for AI agents)
    ui/             MainLayout, ProjectListView, DesignerView,
                    InfoView, McpInfoView,
                    ComponentPalettePanel, ComponentTreePanel,
                    PropertyEditorPanel, PreviewPanel

27 classes, ~5300 lines. No boilerplate, no code generation frameworks — just clean Java 21.

Key design decisions

• Fixed node ID — each component gets a UUID at creation that never changes. Moving a node in the tree only updates parentNodeId and sortOrder; all properties stay intact.
• Embedded properties — properties are stored inside the node document, not in separate collections.
• Reflection-based registry — component properties are discovered automatically from Vaadin classes at startup. No hand-written decorator classes (JaVaDe had 150+).
• Only non-defaults persisted — property values are compared against defaults read from a prototype instance. Only differences are saved to MongoDB.
• Base + User class generation — *ViewBase.java (auto-generated, never edit) + *View.java (user customization point with @Route).
• Virtual properties — _fullWidth, _fullHeight, _icon, _expandRatio, _expandMax, _customStyle, _tabLabel, _gridColumns are handled specially in preview and code generation.
• Versioning — projects have a version number and projectGroup UUID. New versions deep-clone the entire tree with fresh node UUIDs.
• Auto-sizing — containers with expand ratios automatically get setSizeFull() (VL) or setWidthFull() (HL) so flex-grow works.
• Three generators — JavaCodeGenerator (JAR/ZIP), MarkdownGenerator (AI), CodeGenerator (facade).

REST API

Endpoint	Description
GET /api/export/projects	List all projects with metadata
GET /api/export/{id}/jar	Download source JAR
GET /api/export/{id}/sources	Download sources ZIP
GET /api/export/{id}/markdown	Download AI-ready Markdown
GET /api/mcp/projects	List projects (MCP)
POST /api/mcp/projects	Create project (MCP)
POST /api/mcp/projects/{id}/version	Clone project as new version
GET /api/mcp/projects/{id}/tree	Full component tree
POST /api/mcp/projects/{id}/nodes	Add component
GET /api/mcp/components	Available components

Swagger UI: http://localhost:8888/q/swagger-ui

Running

# Prerequisites: Java 21+, MongoDB on localhost:27017

# Dev mode (hot reload)
./mvnw quarkus:dev

# Open http://localhost:8888

Docker (production)

# Build the container image
./mvnw package -Dquarkus.container-image.build=true

# Or run directly with Docker (requires a running MongoDB instance)
docker run -d --name javade26 \
  -p 8888:8888 \
  -e QUARKUS_MONGODB_CONNECTION_STRING=mongodb://admin:secret@host.docker.internal:27017 \
  -e QUARKUS_MONGODB_DATABASE=JaVaDe26 \
  javade26:latest

# Open http://localhost:8888
# MCP API: http://localhost:8888/api/mcp
# Swagger UI: http://localhost:8888/q/swagger-ui

Configure MongoDB credentials in src/main/resources/application.properties:

quarkus.mongodb.connection-string=mongodb://admin:secret@localhost:27017
quarkus.mongodb.database=JaVaDe26

Tests

./mvnw test    # 54 tests

Suite	Tests	Coverage
ProjectRepositoryTest	7	Project CRUD, theme persistence
ComponentNodeRepositoryTest	14	Node CRUD, tree operations, virtual properties
CodeGeneratorTest	8	JAR/ZIP/Markdown generation, content validation
MegaProjectTest	8	59 nodes, 894 properties, save/reload/move/compile
ExportResourceTest	15	REST API endpoints, 404 handling, OpenAPI spec
ExpandRatioVerifyTest	1	Expand ratio persistence round-trip
GenerateTestDataTest	1	Sample data verification

---

Built with Claude Code