Saltar al contenido principalSaltar a navegaciónSaltar al pie de página
JZdev
HomeAboutProjectsBlogContact
es/en
Contact
es/en
JZ

Menú de navegación

HomeAboutProjectsBlogContact
JZ

Backend Developer specialized in end-to-end systems with Java, Go and Rust — robust, scalable and maintainable solutions.

Get in touch →

Navigation

  • Home
  • About
  • Projects
  • Blog
  • Contact

Services

  • Backend Development
  • REST APIs
  • Full Stack Applications
  • Technical Consulting
© 2026 Javier Zader. Made withand lots of mate 🧉
PrivacyGDPR DataBuilt with Next.js
Inicio/Proyectos/APiGen Studio
Volver a proyectos
CuradoDestacado

APiGen Studio

A visual designer for Spring Boot APIs and microservices — model entities, gateway routes, and event flows, then export a multi-service project.

Ver Demo

Descripción del Proyecto

The Problem#

Tools like bootify.io let you design a single Spring Boot app visually — entities, relations, basic CRUD, auth. That solves one piece of the work. It does not solve modeling a microservices architecture: multiple services, the routes between them, the events that flow between them, and the export of all of that as a coherent system.

I wanted a visual designer that handled the system, not just the app. One canvas where I model services, draw connections, configure a gateway, lay out event/message flows, and export the whole thing as a multi-service project ready to feed APiGen.

What Studio Does#

Studio is a browser-based visual designer for Spring Boot APIs and microservices. Model entities and relations like in bootify.io, then go further: add multiple services, wire gateway routes, design event/message flows, validate cross-service compatibility, and export the full architecture as a project that APiGen can generate. Import SQL schemas or OpenAPI contracts, edit them visually with conflict-aware merge, and never lose work — IndexedDB autosave plus snapshot history are built in.

Constraints I Set#

  • Beyond single-app modeling. Studio has to handle service-to-service architecture, not just entities of one service.
  • Validation happens while editing, not after generation. The user sees conflicts and incompatibilities live, before exporting.
  • Import has to be safe. Bringing in a SQL schema or OpenAPI contract triggers a pre-import snapshot so destructive operations are recoverable.
  • Demo is public from day one. Anyone can open https://apigen-web.vercel.app and try the editor without an account.

My Role#

Single developer. Started January 20, 2026 — two days after APiGen pivoted into a full code generation platform. Designed every screen, wrote every line. 440 commits in 18 active days; the project shipped in a short, intense sprint.

How Studio Started#

I took bootify.io as the reference. The single-app generation flow it offers is clean and useful, but the moment the question becomes "how do these three services talk to each other?" the tool has no answer. That gap is exactly where the work that matters happens.

Studio was built to fill that gap. The entity modeling is the table stakes; the microservices designer is the point.

Key Decisions#

1. Microservices Designer — beyond entity modeling#

The most consequential product decision. Studio is not "bootify.io clone". It adds a service-to-service designer: multiple services on one canvas, connections between them, a gateway route designer for HTTP routing, an event/message designer for async flows, and a multi-service export that emits an architecture, not a single project.

That is the differentiator. The entity editor is the entry point that feels familiar; the microservices designer is what makes Studio worth using once a team grows past one app.

Tradeoff: scope. A single-app generator is a tractable product; a multi-service designer is much larger surface area. More features means more places to break, more interactions to validate, and more decisions to design. The bet is that the depth pays back on architectures with three or more services.

Loading diagram...
Lo que diseñás en el canvas se exporta como una arquitectura multi-servicio (no una sola app) y alimenta a APiGen. Ese es el diferenciador.

2. Layout as logic, not decoration#

When there are relations between nodes, Studio uses ELK for layered graph layout. When there are not, it falls back to grid placement. The same approach applies to service-to-service maps. Layout is part of the product logic — predictable, deterministic, repeatable across imports — not a cosmetic pass at the end.

Tradeoff: layout coupling. Changing the layout algorithm becomes a product-level change, not a CSS tweak. The upside is that two users importing the same OpenAPI file see the same layout, which makes review and collaboration possible.

3. Client-heavy with safe persistence#

All editing, validation, and preview runs in the client — no backend round-trip while modeling. Zustand stores manage editor concerns separately; Zod validates imports and project structure; React Flow drives the canvas.

Persistence is the safety net. Autosave to IndexedDB on every meaningful change. Snapshot history retained per project so users can roll back. Pre-import safety snapshots so a destructive import can be recovered if the merge goes wrong. The principle: client-heavy is fine when no work can be lost.

Loading diagram...
Todo el modelado corre en el cliente; IndexedDB es la red de seguridad (autosave + historial + snapshot pre-import). Client-heavy sin perder trabajo.

What Studio Can Do Today#

  • Visual entity modeling with relations, CRUD generation, and Java/Spring type mapping.
  • Microservices Designer — multiple services, connections, gateway route designer, event/message designer, multi-service export.
  • Import SQL schemas and OpenAPI contracts with conflict-aware merge and pre-import safety snapshots.
  • Auto-layout with ELK (layered when relations exist) and grid fallback. Same logic applied to service-to-service maps.
  • IndexedDB autosave, retained snapshot history, version recovery flows.
  • Multi-format export — ZIP of a ready-to-run Spring Boot project, JSON model, SQL DDL, and PNG/SVG canvas diagrams. Multi-service export bundles individual services or one combined archive.
  • Keyboard-first editing with full shortcut coverage. WCAG 2.1 AA accessibility for non-canvas surfaces.
  • Playwright Component Testing for canvas interactions plus end-to-end tests for full editor flows.

What I'd Reconsider#

Mantine 8 as the UI framework. It is well-built and shipped the product fast, but it ties the editor to its design conventions and components. A more headless approach (Radix + a custom design system, or MUI with deeper theming) would have given more freedom to build editor-specific patterns — denser toolbars, more controlled focus management, layout containers that match graph editing better.

The README has a justification for Mantine; in retrospect the tradeoff was real. The product moved faster early on and pays a bit of a tax now whenever the editor needs UI patterns that fight Mantine's defaults.

Architecture Snapshot#

Browser-only application, no custom backend:

  • React 19 + TypeScript 5.9 + Vite 7 — modern toolchain, fast HMR, optimized builds.
  • Mantine 8 for UI primitives; React Flow for canvas; ELK for layered graph layout with grid fallback.
  • Zustand for editor state, segmented by concern; Zod for import validation and project schema.
  • IndexedDB for autosave + snapshot history; pre-import safety snapshots before destructive merges.
  • Playwright (end-to-end + Component Testing) plus Vitest for unit tests. SonarQube wired in.
  • Deployed to Vercel; Docker images available for self-hosted deployments.

Tecnologías

React 19TypeScript 5.9Vite 7Mantine 8ZustandZodReact FlowELKPlaywrightVitest

Información

Fuente:Curado
Estado:Destacado

Enlaces

Demo en vivo

¿Te interesa trabajar conmigo?

Hablemos sobre tu próximo proyecto o conoce más sobre mi experiencia.

ContactarDescargar CV