Skip to main contentSkip to main navigationSkip to footer
JZdev
ProjectsBlogContact
es/en
es/en
JZ
Navigation menu
ProjectsBlogContact
JZ

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

Get in touch →

Navigation

  • Projects
  • Blog
  • Contact
© 2026 Javier Zader. Made withand lots of mate 🧉
PrivacyGDPR DataBuilt with Next.js
Home/Projects/APiGen Studio
Back to projects
CuratedFeatured

APiGen Studio

A visual designer for Spring Boot APIs: model entities and services on a canvas and export a project that compiles —a single service (monolith) or several that talk to each other (microservices).

View demo

About this project

apigen generates from a schema, but deciding how the system is structured —what entities exist, how they group into services, what talks to what and over which protocol— is easier to reason about by seeing it than by writing it. apigen Studio is that visual layer, and it works the same for a single service (monolith) as for several services talking to each other (microservices).

The model is built on a canvas (React Flow with ELK auto-layout): entities and services as nodes, relations and service-to-service connections as edges, with synchronous (REST/gRPC) and asynchronous (Kafka/RabbitMQ) connections drawn differently. Gateway routes and messaging configuration are edited in separate panels, not on the canvas. On export, each service is sent to the apigen backend and comes back compiled; the result is packaged into a single multi-service project.

At a glance#

  • ~152,000 lines of production TypeScript/TSX across 342 components
  • 10 Zustand stores, 39 Zod schemas validating the model
  • React Flow canvas with ELK auto-layout, undo/redo and keyboard shortcuts
  • Over 1,100 automated tests (Vitest) and 63 e2e scenarios (Playwright)

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 and an event/message designer for async flows —both in dedicated panels, separate from the canvas—, 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...
What you design on the canvas is exported as a multi-service architecture (not a single app) and feeds APiGen. That is the differentiator.

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...
All the modeling runs in the client; IndexedDB is the safety net (autosave + history + pre-import snapshot). Client-heavy without losing work.

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.

Technologies

ReactTypeScriptReact FlowELKMantineZustandZodVitePlaywrightVitest

Details

Source:Curated
Status:Featured

Links

Live demo

Want to work together?

Let's talk about your next project, or dig deeper into my experience.

Get in touchDownload CV