Three Prompts: Zod Type Builder

Introduction

Form validation is a critical part of web development, but writing validation schemas can be tedious and error-prone. The Zod Type Builder project addresses this challenge by providing an intuitive visual interface for constructing Zod validation schemas. With just three AI prompts, we were able to create a fully functional tool that helps developers visualize, build, and export complex Zod schemas with ease.

This interactive tool allows users to start with basic types (object or array) and build out complex nested structures with various field types and validation rules. The generated schema code is displayed in real-time, ready to be copied and used in any JavaScript or TypeScript project.

The Three Prompts

Here are the exact prompts that were used to create this project:

Build an interactive zod type builder with simple UI, first plan in a readme, then get started executing

1. Choose starting type (object or array)
2. Add contents to that type (string, number, boolean, enum, object, array)
3. Allow to keep building out into a deep type
4. show the zod schema on the right side of the builder easy to copy (bottom on mobile)
5. Make the UI really really simple, but clean, bright background, dark text


@projects/zod-type-builder 

Fix the remaining lint error in App.jsx, then make sure all the inputs and buttons handle styling on dark and light mode. They should not respect dark mode and just be styled one way.

First fix the lint issue, then review the styles

Now all the other properties to each field with the checkboxes. Make sure to keep everything else working as expected

nullable
nullish

When applicable
min
max
length

Technologies Used

The Zod Type Builder was built using several modern web technologies:

• React 19.1.0 - For building the interactive user interface components
• Vite - As the build tool and development server
• Zod - The validation library that the builder generates schemas for
• CSS - Custom styling with a focus on light mode and readability
• ESLint - For code quality and consistency

Key Features and Functionality

1. Interactive Type Selection

Users begin by selecting a base type for their schema (object or array). The interface provides a clear preview of what each type represents in Zod syntax, making it easy for users to understand their choice.

2. Recursive Schema Building

The tool supports building deeply nested schemas. Users can add fields to objects, define array item types, and create complex nested structures with multiple levels of objects and arrays.

3. Comprehensive Field Type Support

The builder supports all common Zod types:

• String fields with length validation
• Number fields with min/max constraints
• Boolean fields
• Enum fields with custom values
• Nested objects
• Arrays of any type

4. Advanced Validation Options

Each field can be customized with various validation options:

• Optional fields
• Nullable fields (accepts null values)
• Nullish fields (accepts null and undefined)
• Min/max constraints for numbers
• Min/max/exact length constraints for strings

5. Real-time Code Preview

As users build their schema, the generated Zod code is displayed in real-time with proper formatting and indentation. This provides immediate feedback and helps users understand how their visual choices translate to actual code.

6. Copy to Clipboard

The generated schema code can be copied to the clipboard with a single click, making it easy to integrate into existing projects.

Implementation Details

Component Architecture

The application is structured around several key components:

1. App.jsx - The main component that manages state and coordinates the other components. It contains the logic for generating formatted Zod schema code from the schema state.

2. TypeSelector - Handles the initial selection between object and array types, providing visual examples of each.

3. SchemaBuilder - Manages the addition, editing, and removal of fields in the schema. It handles both object properties and array item types.

4. FieldEditor - Provides the interface for editing individual field properties, including type-specific options and validation constraints.

5. SchemaPreview - Displays the generated schema code with proper formatting and provides the copy-to-clipboard functionality.

State Management

The application uses React's useState and useCallback hooks for state management. The schema state is represented as a nested JavaScript object that mirrors the structure of a Zod schema, with properties like type, optional, nullable, min, max, etc.

This state is passed down through props to child components, and updates flow back up through callback functions. This approach keeps the code simple and maintainable without requiring external state management libraries.

Code Generation

One of the most interesting aspects of the implementation is the code generation logic. The generateTypeCode function recursively processes the schema state object to produce well-formatted Zod schema code strings.

The function handles different field types, validation options, and nested structures, ensuring that the generated code is valid and follows best practices. It also includes proper indentation and line breaks for readability.

Challenges and Solutions

Challenge 1: Handling Nested Schemas

Problem: Creating an intuitive interface for building and editing deeply nested schemas was challenging. Each level of nesting needed its own set of controls while maintaining consistency with the parent levels.

Solution: We implemented a recursive component approach. The SchemaBuilder component can render nested instances of itself for object and array fields, allowing for unlimited nesting depth while keeping the code DRY and maintainable.

Challenge 2: Dark Mode Compatibility

Problem: The initial implementation had issues with dark mode, where inputs and text would become white-on-white and unreadable when the user's system was set to dark mode.

Solution: We updated the CSS to explicitly style inputs, buttons, and form elements with white backgrounds and dark text, ensuring consistent appearance regardless of the user's system preferences.

Challenge 3: Array Field Validation

Problem: The validation logic was incorrectly requiring field names for array item types, causing errors when users tried to set the type of array items.

Solution: We modified the validation logic to only require field names for object properties, not for array items. This fixed the "Field name is required" errors and ensured arrays work correctly.

Challenge 4: Adding Advanced Field Properties

Problem: Adding support for additional field properties like nullable, nullish, min, max, and length required changes to multiple components and the code generation logic.

Solution: We extended the field state structure to include these properties, added UI controls in the FieldEditor component, and updated the code generation logic to incorporate these validations in the correct order (validations first, then nullable/nullish, then optional).

Conclusion

The Zod Type Builder demonstrates how a complex developer tool can be created with just three well-crafted prompts. By focusing on a clean, intuitive interface and real-time feedback, the tool makes it easy for developers to create and visualize Zod validation schemas.

The project showcases the power of React's component model for building interactive tools, and how careful state management can enable complex functionality without excessive complexity. The recursive approach to handling nested schemas is particularly elegant and allows for building arbitrarily complex data structures.

Potential future enhancements could include:

• Support for more advanced Zod features like unions, intersections, and transformations
• The ability to import existing Zod schemas for editing
• Schema validation testing within the tool
• TypeScript type generation alongside the Zod schema

Try out the Zod Type Builder for yourself and see how it can streamline your validation schema creation process!