@kloddy/zod-editor

A professional, recursive, Zod-powered schema editor for React.

Features

• Recursive Editing: Build deep schemas with support for nesting (Objects, Arrays, Unions, Records).
• Comprehensive Zod Support: Includes refinements for string formats (email, url, etc.), number ranges, and special types.
• Premium UI: Framer Motion animations and custom CSS for a state-of-the-art experience.
• Library Mode: Built with Vite for easy integration into other projects (ESM/CJS).
• TypeScript First: Full type safety and declaration file generation.

Installation

npm install @kloddy/zod-editor zod framer-motion lucide-react clsx tailwind-merge

Usage

import { ZodEditor } from '@kloddy/zod-editor';
import { convertToZodObject } from '@kloddy/zod-editor/utils';
// Note: CSS is automatically injected!

function MyComponent() {
  const handleExport = (schema) => {
    console.log('Zod Schema:', schema);
  };

  return (
    <ZodEditor 
      onExport={handleExport}
      theme={{
        primary: '#3b82f6',
        bg: '#1e293b',
        text: '#f8fafc',
        radius: '12px'
      }}
    />
  );
}

Customization

The ZodEditor component accepts optional properties so you can style it to fit seamlessly in your application:

• theme: An object to override default CSS variables (colors, fonts, radius, padding).
• className: Append custom CSS classes.
• style: Append custom inline styles.

Contributing

Run the development server:

npm run dev

Build the library:

npm run build

License

MIT