Vertical Slice
Explore a feature across the stack from one editable schema
Try Vertical Slice
Choose a preset, edit its fields, and inspect the generated layers. The live preview uses temporary browser data; it does not run the generated Java or connect to a database. Changes reset on reload. Download all exports separate files, which your browser may ask you to allow.
One domain schema, eight generated code views, and a browser-only preview.
1package com.myapp.main.domain;23import jakarta.persistence.*;4import lombok.*;5import java.math.BigDecimal;6import java.time.LocalDateTime;78@Entity9@Table(name = "products")10@Getter11@Setter12@NoArgsConstructor13@AllArgsConstructor14@Builder15public class Product {1617 @Id18 @GeneratedValue(strategy = GenerationType.IDENTITY)19 private Long id;2021 @Column(nullable = false)22 private String name;2324 @Column(nullable = false)25 private BigDecimal price;2627 @Column28 private LocalDateTime createdAt;2930 @Column(nullable = false, unique = true)31 private String sku;3233 @Column(nullable = false)34 private Integer stockQuantity;3536 @Column(nullable = false)37 private Boolean active;3839}40Generated templates. Review before integrating.
Seeing a Feature Across the Stack
A small feature often repeats the same information in several places. A field appears in a database table, an entity, a transfer object, an API response, and a form. Changing it means following those connections and checking that each representation still agrees.
Vertical Slice makes that repetition visible. An editable domain schema sits beside generated source and a preview, allowing visitors to inspect how one model shapes a feature across several layers. It is a code-generation workbench for exploring the structure, rather than a running backend application.
One Model, Several Representations
The designer starts from a preset entity. Visitors can change its name and package, add or remove fields, choose types, and adjust the available constraints. The code views regenerate from that shared model as it changes.
Eight views cover a Java entity, DTO, repository, service, and controller, followed by a TypeScript API client and React form and list components. The download collection also includes a SQL migration. Keeping those outputs together makes it easier to trace a field from its storage representation to the interface that collects it.
Trying the Interface
The live preview builds a form and table from the current schema. Visitors can add temporary records and search the displayed data to explore the interface without setting up a server. Switching presets clears the preview records and form so data from one model does not appear under another model's fields.
This preview is implemented separately from the generated source. It does not compile Java, execute a migration, or make requests to the generated API. Its purpose is to show the shape of an interaction while the source views explain the proposed implementation.
Taking the Source Further
Individual code views can be copied or downloaded. Downloading the collection produces separate source files, including the migration; browsers may require permission for multiple downloads. Java filenames preserve the capitalisation of their public classes.
The output is a starting point for integration and review. It still needs an application configuration, dependencies, database setup, and checks against the intended framework versions. Naming, validation, authorisation, error handling, and relationships need the same attention they would in handwritten code. The studio does not compile or test the generated application.
Keeping the Model Inspectable
React holds the schema and temporary preview records, while TypeScript generator functions turn the model into source strings. The demo has no remote generation service or account system. Edits remain in the open page and reset on reload, so downloads provide the route for keeping an experiment.
The useful part of the prototype is the connection between representations: change a field, inspect the affected layers, and see what assumptions the templates make. That gives developers something concrete to examine before turning the generated skeleton into an application.
Project Highlights
- Editable entity names, packages, field types, and constraints
- Eight generated code views across backend and frontend layers
- Schema-driven form and searchable table using temporary sample data
- Source copying, individual downloads, and SQL migration export