Project Description

ZodSmith Builder was born from a real need: during a large-scale project, I had to create dozens of Zod schemas manually. Writing repetitive validation code, managing types and keeping everything consistent became tedious and error-prone.

Instead of writing schemas by hand, ZodSmith provides a visual canvas where you can design your data structures with the simplicity of drag-and-drop. Every change updates the generated code in real-time, showing you exactly what Zod schema and TypeScript types will be produced.

The tool serves both as a productivity booster for experienced developers and an educational resource for those learning the Zod API.

Key Features

Visual Schema Builder

• Drag-and-drop field reordering with smooth animations
• Real-time code preview that updates as you design
• Field cards showing types and validation rules at a glance
• Inline editing for quick field name changes
• Side panel for detailed configuration of each field
• Responsive design that works on any screen size

Full Field Type Support

Support for all essential Zod types with their validations:

• String: min/max length, email, URL, UUID, regex patterns
• Number: min/max, positive/negative, integer, multipleOf
• Boolean: simple true/false validation
• Date: date validation with optional constraints
• Enum: predefined value sets
• Array: typed arrays with min/max elements

Intelligent Code Generation

Three output modes for different use cases:

• Zod Schema Only: Just the validation code
• TypeScript Type: Type inferred from the schema
• Full Module: Complete file with imports, schema and type export

Configurable options include naming conventions, export styles, comments and formatting preferences.

Productivity Boosters

• 8 predefined templates: User, Product, Address, API Response, Blog Post, Contact Form, Login, Settings
• Import TypeScript: Paste existing interfaces and convert them to Zod schemas
• Auto-save: Never lose your work with localStorage persistence
• Multi-language: Support for English and Spanish
• Theme support: Light/dark mode with system detection

Technical Architecture

Frontend Stack

Built with modern React patterns and best practices:

• React 19 with functional components and hooks
• TypeScript 5.9 for complete type safety
• Vite 7 for ultra-fast development and optimized builds
• Tailwind CSS 4 with custom design tokens

UI Components

• shadcn/ui for accessible and customizable components
• Radix UI primitives for complex interactions
• Lucide React for consistent iconography
• Motion for smooth animations and transitions

State Management

• Zustand for simple and performant global state
• Zod (of course!) for internal validation

Key Libraries

• dnd-kit for accessible drag-and-drop functionality
• i18next for internationalization
• Biome for linting and formatting
• Vitest with Testing Library for tests

Development Workflow

The typical flow is straightforward:

1. Create: Start from scratch, choose a template or import TypeScript
2. Design: Add fields and order them visually
3. Configure: Set validations, descriptions and requirements
4. Preview: See the generated code update in real-time
5. Export: Copy the code directly to your project

Future Improvements

• Support for nested objects and complex types
• Schema composition and references
• Export/import schema configurations
• Additional output formats (JSON Schema, Yup)
• Collaborative editing features